基于位移图的基于3d效果的iPhone [英] Displacement map based 3d effect on iPhone

问题描述

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

I am trying to make an app which use displacement map for 3d effect. In Flash it can be done using displacement filter like shown here: http://flashflex.com/pixel-bender-displacement-map-fakes-3d-effect-update/. There are few apps who do that on iPhone like one here: www.youtube.com/watch?v=NvCHHUN8nnE

我想知道他们是如何执行此操作的。

I am wondering how do they perform this.

我正在尝试使用基于置换贴图的技术在此处描述：www.cocos2d-iphone.org/forum/topic/11659但是在飞行中似乎很慢。

I am trying to use displacement map based technique describe here: www.cocos2d-iphone.org/forum/topic/11659 but it seems to be slow to be done on the fly.

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

Any pointer would be highly appreciated.

谢谢

推荐答案

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

Perhaps the simplest way to achieve displacement mapping in OpenGL ES 2.0 is also probably the fastest. You need two textures, one to contain color (a regular one), and a displacement map. When sampling the regular texture normally, your fragment shader would look like:

uniform sampler2D myTexture;
varying vec2 texcoords;

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

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

This is pretty simple stuff. Now, to achieve displacement mapping, you need to:

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用于位移。但是，这样，您只能获得静态的，与视图无关的位移。要获得真正的位移，需要生成纹理切线和bitangents ，其中包含方向对象空间中的纹理轴（一个棘手的概念，阅读文章）。一旦你拥有它们，你所需要的只是物体眼睛的位置（可以通过顶点着色器中的模型视图 - 投影逆相乘顶点位置来计算），并通过在切线/直线矢量上投影，你可以按顺序调制位移依赖于视图：

This is also simple. You have another texture where red and green are used as x and y for the displacement. This way, however, you only get static, view-independent displacement. To get real displacement, one would need to generate texture tangents and bitangents which contain the directions of texture axes in object space (a tricky concept, read the article). Once you have them, all you need is object-space eye position (can be calculated by multiplying vertex position by modelview-projection inverse in vertex shader), and by projecting this on the tangent/bitangent vectors, you can modulate the displacement in order to be view dependent:

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;
}

（这是顶点着色器）和片段着色器：

(that was vertex shader), and fragment shader here:

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);
}

这应该可以解决问题......（注意我是从头上写的所以，如果有任何错误，请不要犹豫评论）

And that should do the trick ... (note i wrote that from head so if there are any errors, don't hesitate to comment)

编辑：有错误，我将参数的顺序换成了texture2D （采样器先行）。

EDIT: And there were errors, I swapped order of arguments to texture2D (sampler goes first).

这篇关于基于位移图的基于3d效果的iPhone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！