Warum muss ich einen Genauigkeitswert in Webgl-Shadern definieren?

Question

Ich versuche, this tutorial zu arbeiten, aber ich lief in zwei Probleme, von denen einer der folgenden ist.

Wenn ich den Code ausführen, wie es ist, bekomme ich einen Fehler in der Fragment-Shader sagen: THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float). Also was ich getan habe, war eine Genauigkeit für jeden Float/Vektor, den ich so definiere, zu spezifizieren varying highp vec3 vNormal. Dies beseitigt den Fehler, aber ich verstehe nicht warum? Ich kann kein anderes Beispiel finden, wo Präzisionswerte zu Variablendeklarationen hinzugefügt werden. Kann jemand erklären, warum das passiert? Hat es etwas mit meinem Browser zu tun (Chrome 38)?

Answer 1

Jessys Antwort ist korrekt, dass die meisten Fragment-Shader eine Standard-Genauigkeit am oberen Rand des Fragment-Shader-Codes festlegen.

Sie verwenden jedoch die RawShaderMaterial von Three.js, die keine der integrierten Uniformen, Attribute und Präzisionsdeklarationen vorgibt. Sie müssen es also selbst definieren.

Auf der anderen Seite verwendet das Tutorial, das Sie verknüpft haben, Three.js's ShaderMaterial für sein Material, so dass Three.js die Genauigkeitserklärung automatisch vorangestellt wird.

Wenn Sie die Standard-Uniformen/Attribute aus Ihrem Shader-Code entfernen und stattdessen ShaderMaterial verwenden, funktioniert es ohne den Präzisionscode.

Vertex Shader

varying vec3 vNormal; 

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

Fragment Shader

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 
} 

Update auf das Material

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

Here ist eine Geige Ihres Codes ohne die Genauigkeitsdeklarationen.

Answer 2

In WebGL-Fragment-Shadern ist keine Standardpräzision vorhanden. (Hohe Präzision ist Standard für Vertex-Shader.) Die einfachste Lösung ist

precision highp float; 

, um alle Ihre Fragment-Shader zu schreiben, die die Notwendigkeit zu beseitigen, die Genauigkeit für alle Floating-Point-Vektorvariablen zu definieren, aber im Allgemeinen,

precision mediump float; 

wird für die Leistung vorzuziehen sein. Ich rate nicht Tief; Die gute mobile Hardware von heute unterstützt es nicht einmal mehr, und entspricht dem Typus von Lowp bis Mediump.