为什么需要在webgl着色器中定义精度值? [英] Why do I need to define a precision value in webgl shaders?

问题描述

我正在尝试本教程，但我遇到了两个问题，其中一个是以下问题.

I'm trying to get this tutorial to work but I ran into two issues, one of which is the following.

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

When I run the code as is I get an error in the fragment shader saying: THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float). So what I did was specifying a precision for every float/vector I define like so varying highp vec3 vNormal. This eliminates the error but I don't get why? I can't find any other example where precision values are added to variable declarations. Can anybody explain why this occurs? Does it have something to do with my Browser (Chrome 38)?

推荐答案

杰西的答案是正确的，大多数片段着色器在片段着色器代码的顶部设置了默认精度.

Jessy's answer is correct that most fragment shaders set a default precision at the top of the fragment shader code.

但是，您正在使用Three.js的RawShaderMaterial，它不带任何内置的制服，属性和精度声明.因此，您必须自己定义它.

However you are using Three.js's RawShaderMaterial which does not prepend any of the built-in uniforms, attributes, and precision declarations. So you have to define it yourself.

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

On the other hand the tutorial you linked to is using Three.js's ShaderMaterial for its material so Three.js will have the precision declaration prepended automatically.

如果从着色器代码中删除默认的制服/属性，而使用ShaderMaterial，则无需精确代码即可使用.

If you remove the default uniforms/attributes from your shader code and use ShaderMaterial instead it will work without the precision code.

顶点着色器

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 is a fiddle of your code without the precision declarations.

这篇关于为什么需要在webgl着色器中定义精度值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！