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用于位移。但是，这样，您只能获得静态的，与视图无关的位移。要获得实际位移，需要generate texture tangents and bitangents包含对象空间中纹理轴的方向（一个棘手的概念，请阅读文章）。拥有它们之后，您所需要的只是物体空间眼睛位置（可以通过顶点着色器中的模型视图 - 投影反转乘以顶点位置来计算），并通过将其投影到切线/直线矢量上，您可以按顺序调整位移视为依赖：

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（采样器先行）。

位移图基于iPhone的3D效果

1 个答案: