为什么我需要在 webgl 着色器中定义一个精度值？

Question

我试图让this tutorial 工作，但我遇到了两个问题，其中一个是以下问题。

当我按原样运行代码时，片段着色器中出现错误提示：THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float)。所以我所做的是为我定义的每个浮点数/向量指定一个精度，就像varying highp vec3 vNormal 一样。这消除了错误，但我不明白为什么？我找不到任何其他将精度值添加到变量声明的示例。谁能解释为什么会这样？它与我的浏览器（Chrome 38）有关吗？

Answer 1

Jessy 的回答是正确的，大多数片段着色器在片段着色器代码的顶部设置了默认精度。

但是，您使用的是 Three.js 的 RawShaderMaterial，它没有预先添加任何内置的统一、属性和精度声明。所以你必须自己定义。

另一方面，您链接到的教程使用 Three.js 的 ShaderMaterial 作为其材料，因此 Three.js 将自动添加精度声明。

如果您从着色器代码中删除默认的制服/属性并改用ShaderMaterial，则它可以在没有精度代码的情况下工作。

顶点着色器

varying vec3 vNormal;

void main() {
    vNormal = normal;
    gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(position,1.0);
}

片段着色器

varying vec3 vNormal;

void main() {
    vec3 light = vec3(0.5, 0.2, 1.0);

    // ensure it's normalized
    light = normalize(light);

    // calculate the dot product of
    // the light to the vertex normal
    float dProd = max(0.0, dot(vNormal, light));

    // feed into our frag colour
    gl_FragColor = vec4(dProd, // R
                        dProd, // G
                        dProd, // B
                        1.0);  // A
}

资料更新

// create the sphere's material
var shaderMaterial = new THREE.ShaderMaterial({
    vertexShader:   document.getElementById('vertex-shader').innerHTML,
    fragmentShader: document.getElementById('fragment-shader').innerHTML
});

Here 是没有精度声明的代码。

Answer 2

WebGL 片段着色器没有默认精度。 （高精度是顶点着色器的默认设置。）最简单的解决方案是添加

precision highp float;

到所有片段着色器，这将消除为所有浮点向量变量定义精度的需要，但通常，

precision mediump float;

将更可取，以提高性能。我不建议lowp；当今优秀的移动硬件甚至不再支持它，相当于将 lowp 类型定义为 mediump。