2D glsl 着色器转换答案

【问题标题】：2D glsl shader transformation2D glsl 着色器转换
【发布时间】：2015-04-18 09:38:00
【问题描述】：

我想创建一个着色器以在使用 libgdx 构建的 2D 场景上模拟伪 3D 水面。这个想法是重新创建以下效果：

http://forums.tigsource.com/index.php?topic=40539.msg1104986#msg1104986

但是我被困在创建梯形形状上，我想我不明白如何在 opengl 着色器上计算纹理坐标。我可以在顶点着色器中修改顶点，还是可以在片段着色器中置换纹理？

这是我完成的一项测试，但没有按预期工作。

顶点着色器：

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoord0;

void main()
{
    v_color = a_color;
    float factor = (a_texCoord0.x - 0.5) * (a_texCoord0.y);
    v_texCoord0 = a_texCoord0;
    v_texCoord0.x += factor;
    gl_Position =  u_projTrans * a_position;
}

片段着色器只是一个传递

varying vec4 v_color;
varying vec2 v_texCoord0;

uniform sampler2D u_texture;

void main()
{
    gl_FragColor = v_color * texture2D(u_texture, v_texCoord0);
}

和结果图片

我敢肯定我的做法太天真了。

【问题讨论】：

标签： java opengl libgdx glsl shader

【解决方案1】：

最后，我决定只使用片段着色器来实现效果。假深度计算是通过在 Y 轴上应用 X 位移来完成的。

这是片段：

// simulate 3D surface
vec2 new_coord = v_texCoord0;
// calculate the stretching factor
float factor = ((0.5 - new_coord.x) * new_coord.y);
// apply the factor and stretch the image
new_coord.x += factor;

gl_FragColor = texture2D(u_texture, new_coord);

【讨论】：