iphone - iPhone 上基于位移贴图的 3D 效果

Question

我正在尝试制作一个使用置换贴图实现 3D 效果的应用程序。在 Flash 中，可以使用位移过滤器来完成，如下所示:http://flashflex.com/pixel-bender-displacement-map-fakes-3d-effect-update/ 。很少有应用程序可以在 iPhone 上执行此操作，如下所示:www.youtube.com/watch?v=NvCHHUN8nnE

我想知道他们是如何做到这一点的。

我正在尝试使用此处描述的基于位移图的技术:www.cocos2d-iphone.org/forum/topic/11659，但动态完成似乎很慢。

任何指针都将受到高度赞赏。

谢谢

Answer 1

也许在 OpenGL ES 2.0 中实现置换贴图最简单的方法也可能是最快的。您需要两个纹理，一个包含颜色(常规纹理)和一个置换贴图。当正常采样常规纹理时，您的片段着色器将如下所示:

uniform sampler2D myTexture;
varying vec2 texcoords;

void main()
{
    gl_FragColor = texture2D(myTexture, texcoords);
}

这是非常简单的事情。现在，要实现置换贴图，您需要:

uniform sampler2D myTexture;
uniform sampler2D myDisplacementMap;
varying vec2 texcoords;

void main()
{
    vec2 displacement = 0.1 * texture2D(myDisplacementMap, texcoords).rg;
    gl_FragColor = texture2D(myTexture, texcoords + displacement);
}

这也很简单。您还有另一个纹理，其中红色和绿色用作位移的 x 和 y。然而，通过这种方式，您只能获得静态的、与 View 无关的位移。为了获得真实的位移，需要generate texture tangents and bitangents其中包含对象空间中纹理轴的方向(一个棘手的概念，请阅读文章)。拥有它们后，您所需要的只是对象空间眼睛位置(可以通过将顶点位置乘以顶点着色器中的模型 View 投影逆来计算)，并且通过将其投影到切线/双切线向量上，您可以按顺序调制位移依赖于 View :

attribute vec3 position, tangent, bitangent;
attribute vec2 texcoord;
varying vec2 texcoords;
varying vec3 eye_dir, tan, bitan;
uniform matrix4f modelviewProjectionMatrix;
uniform matrix4f modelviewProjectionMatrixInverse;

void main()
{
    gl_Position = modelviewProjectionMatrix * vec4(position, 1.0);
    tan = tangent;
    bitan = bitangent;
    texcoords = texcoord;
}

(那是顶点着色器)，这里是片段着色器:

uniform sampler2D myTexture;
uniform sampler2D myDisplacementMap;
varying vec2 texcoords;
varying vec3 eye_dir, tan, bitan;

void main()
{
    vec2 eyen = normalize(eye_dir);
    vec2 modulation = vec2(dot(eyen, normalize(tan)), dot(eyen, normalize(bitan)));
    vec2 displacement = 0.1 * texture2D(myDisplacementMap, texcoords).rg * modulation;
    gl_FragColor = texture2D(myTexture, texcoords + displacement);
}

这应该可以解决问题......(注意我是从头开始写的，所以如果有任何错误，请随时发表评论)

编辑:并且存在错误，我将参数顺序交换为texture2D(采样器先行)。