通过 WebGL 使用 GLSL 的投影纹理映射

Question

我想将纹理投影到墙壁或任何物体上。我根据这个 Cg 投影纹理映射 tutorial (ctrl-f "9.3") 修改了这个 tutorial's 着色器，但我得到了一个空白的白色画布。我是着色器新手，不太清楚如何调试（没有 JS 错误），有什么提示吗？

顶点着色器：

uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
uniform vec3 lightDir;

attribute vec3 vNormal;
attribute vec4 vTexCoord;
attribute vec4 vPosition;

varying float v_Dot;
varying vec2 v_texCoord;

void main()
{
    gl_Position = u_modelViewProjMatrix * vPosition;
    v_texCoord = vTexCoord.st * vPosition;
    vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
    v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
}

片段着色器：

uniform sampler2D sampler2d;

varying float v_Dot;
varying vec2 v_texCoord;

void main()
{
    vec4 color = texture2DProj(sampler2d,v_texCoord);
    gl_FragColor = vec4(color.xyz * v_Dot, color.a);
}

Answer 1

如果您的代码有问题，我认为这是您计算 v_texCoord 的奇怪方式。你确定你不想用矩阵代替 vTexCoord 吗？撇开这一点不谈，与我的预期相反，texture2DProj 是在 GLSL ES 1.0 中定义的，而且它似乎在语法上是正确的，并且具有匹配的不同名称。

当您没有可用的步进调试器时调试 GLSL 往往涉及将中间值作为片段颜色输出。因此，您的测试可能是：

1. 调整片段着色器以输出恒定的颜色，例如鲜红色。如果您的几何图形没有变为鲜红色，则说明您的程序链接不正确，您应该检查日志中的编译错误。
2. 尝试将 gl_FragColor 设置为适当调整的 v_texCoord 版本。尝试从顶点着色器加载具有不同中间值的 v_texCoord。观察输出以确保您得到正确的数字。
3. 尝试不使用投影步骤的纹理，以确保您正在上传纹理并正确设置适当的制服。

加上你能想到的任何其他变化。