二维 glsl 着色器转换
2D glsl shader transformation
我想创建一个着色器来在使用 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);
}
和结果图像
我确定我的方法太天真了。
最后,我决定只使用片段着色器来实现效果。
假深度计算是通过在 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);
我想创建一个着色器来在使用 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);
}
和结果图像
我确定我的方法太天真了。
最后,我决定只使用片段着色器来实现效果。 假深度计算是通过在 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);