Question

我一直在尝试使用WebGL，最终设法找到一个可以打破其中一个演示的1行更改。

https://github.com/KhronosGroup/WebGL/blob/master/sdk/demos/webkit/SpiritBox.html

有一个顶点着色器：

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;
    vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
    v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
}

该演示显示了一个旋转框，每张脸上都有一只小狗的照片。

如果我们在着色器函数的末尾添加一行：

    v_Dot = 1.0;

然后框现在变为白色。从= 1.0切换到

    v_Dot = max(v_Dot, 1.0);

让小狗重新出现。

以下是片段着色器的副本，以防链接断开：

precision mediump float;

uniform sampler2D sampler2d;

varying float v_Dot;
varying vec2 v_texCoord;

void main()
{
    vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
    vec4 color = texture2D(sampler2d, texCoord);
    color += vec4(0.1, 0.1, 0.1, 1);
    gl_FragColor = vec4(color.xyz * v_Dot, color.a);
}

这到底是怎么回事？我使用的是Firefox版本24.7.0。

Answer 1

是的！我遇到完全这个错误，试图将这个完全相同的行添加到这个完全相同的演示中！

这肯定是个错误。此外，它只在某些平台上出现。例如。当我在我的macbook pro上查看页面时，它看起来很好（旋转纹理立方体，带有明亮的非定向照明，如预期的那样）但是当我在我的ubuntu盒子上运行时它会失败（没有纹理，正如你所描述的那样）。这是在两台机器上使用chrome“Version 46.0.2490.33 beta（64-bit）”。

这是我的解释（基本上证实了@DietrichEpp的评论）。

有3个属性：0：vNormal，1：vTexCoord，2：vPosition，并且主要脚本做出了硬编码的假设，即索引就是这些（请注意，它目前说“vColor”而不是“vTexCood”，但我认为那部分是无害的。）

但是当你添加“v_Dot = 1。”时，优化器（在问题平台上）通知vNormal不再使用，所以删除它，属性现在为0：vTexCoord，1：vPosition，所以主脚本的索引变得不正确。将其排序（即删除所有现在未使用的东西并相应地调整主脚本的索引），并且程序再次运行。

这显然非常脆弱，我对webgl或opengl ES不够熟悉是否显示着色器编译器/优化器，主脚本或实用程序库中的错误，或上面的某些子集，或其他东西。

我刚才正在进行网络搜索，试图找出报告此错误的位置，这就是我发现问题的方式。

Answer 2

此处的点积表示法线与光线之间的角度。通过在任何地方强制vDot到1.0，你基本上断言“表面法线和光线之间没有角度”。因此，对于表面上的每个点，它的作用就像光线直接位于其上方，并且表面完全被照亮。

为什么在着色器中覆盖一个值会使立方体变为白色？

2 个答案: