20

我试图获得与图片中描述的效果相似的效果。左侧的白色区域不在原始照片,它将像素推开。我试过使用 Core Image(它提供了一些接近的效果),但它对我的需要来说太慢了。我需要让效果变得活泼,这样我才能让它对触摸做出响应。

iOS sdk 中是否有一个关闭效果\动画与 UIVIew 做类似的事情?(我找不到任何接近的东西)如果没有,有人可以提供如何使用 OpenGL 来攻击它吗?(代码示例非常受欢迎)

(这种效果将在我正在编写的开源类中发挥重要作用,因此如果有更简单的解决方案可用,我不希望使用 GPUImage 等第 3 方类(我的目标是此类无依赖项) )

在此处输入图像描述在此处输入图像描述在此处输入图像描述

4

5 回答 5

27

沙,

我所做的是在我的 OpenGL 坐标中布置一个矩形网格点。(我使用了 50x50 的网格)。然后我在同一坐标空间中定义一个或多个控制点。我有一个我写的通用捏拉伸算法。它需要一个控制点、一个半径和一个有符号整数来表示吸引/排斥网格点的数量,并将其应用于我的网格坐标。对于捏合,它将网格点拉近控制点,而对于拉伸,它将控制点推开。变化在控制点处最大,随着与控制点的距离增加到半径值而下降。

一旦我改变了我的网格的坐标,我就定义了一组三角形条带来绘制我的图像的整个(扭曲的)矩形区域。我可以通过一个 OpenGL 绘图调用将我的整个纹理渲染到扭曲的网格上。OpenGL 负责拉伸图像像素以适应我的控制点网格中的扭曲三角形。这是一个使用多个控制点创建胖脸外观的前后图像示例。它显示了网格,因此您可以看到它在做什么。这是我的丑杯子,所以提前道歉:

在此处输入图像描述

和拉伸的图像:

在此处输入图像描述

在我的例子中,我希望图像周边的控制点保持在原位,并且只有图像的内部会被扭曲,所以我添加了额外的代码逻辑来将周边控制点锁定到位。这就是为什么图像的框架没有像您的图像那样被推入。然而,这需要额外的代码。

代码最终使用距离公式计算出每个网格点与控制点的距离,然后触发计算角度,乘以改变距离,然后再触发计算每个网格的新位置-观点。不过,由于我只转换了一个 50x50 的控制点网格,它的速度足以跟上。

我们的应用程序 Face Dancer 在应用商店免费提供。(在此链接下载它:应用商店中的 Face Dancer您可能想下载并尝试一下。(它包括许多免费的变形,然后提供额外的变形作为应用内购买)还有一个付费的“ Plus”版本,包含所有变形。

当您运行 Face Dancer 时,如果您用两根手指在图像上双击,它会显示用于创建变形的控制点网格,以便您可以看到它在做什么。

有一个名为 GLCameraRipple 的 OpenGL 示例应用程序,它包含在 Xcode 中并从文档链接。我建议将其作为起点。它从摄像头获取视频并将其绘制到屏幕上。如果您触摸屏幕,它会扭曲图像,就好像屏幕是一池水,而您的手指会在其中产生涟漪。它使用了我所描述的网格扭曲技术。

不幸的是,我不认为该应用程序使用 GLKit,这是使用 OpenGL ES 2.0 的一种更简单的方法。GLKit 提供了许多使其更易于使用的功能,包括 GLKViews 和 GLKViewControllers。

于 2014-01-07T15:03:03.847 回答
5

有一个新的很棒的开源类,用一个很好的例子完全回答了我的问题。你可以在这里找到它。

在此处输入图像描述

于 2014-06-15T12:02:32.483 回答
1

您可能会看到的另一件事是在 iOS 6 中添加的 Core Image 孔失真滤镜 (CIHoleDistortion)。它创建的效果与您正在寻找的效果非常相似。这是从我编写的非常接近的测试程序生成的示例图像。

但是,您会注意到 Apple 的滤镜会导致图像从框架边缘“拉开”。我认为这是一个错误,但祝 Apple 能够修复它:

在此处输入图像描述

于 2014-03-25T16:38:26.590 回答
0

你展示的东西看起来像一个网状扭曲。使用 OpenGL 会很简单,但“简单的 OpenGL”就像简单的火箭科学。

我为我的公司编写了一个名为 Face Dancer 的 iOS 应用程序,它能够使用 OpenGL 对来自内置摄像头的视频进行 60 fps 的网格扭曲动画,但工作量很大。(它确实对面部进行了有趣的镜子类型变化——想想现场的“胖摊”,还有许多其他效果。)

于 2013-12-31T23:12:20.933 回答
0

我将研究两种方法:首先,核心图像过滤器,其中包括许多您似乎需要的失真过滤器。主要问题是其中许多在 iOS 中不可用(但在 OSX 上......)。

其次,GPUImage 库有许多您也可以使用的失真过滤器。这是一个讨论如何使用它们的 Q:

如何使用 OpenGL ES 对 UIImage 应用失真?

于 2014-01-09T00:47:52.420 回答