three.js dynamischer Fragment-Shader GUI

Question

Ich verwende den three.js WebGL Shader Beispiel, und ich versuche, eine GUI zur Steuerung der Parameter des Shaders dynamisch in Echtzeit hinzuzufügen. Ist das möglich? Es scheint, dass, wenn ich versuche, die Variable effectController außerhalb der Shader-Skripte hinzuzufügen, scheint es gut zu funktionieren, aber wenn ich versuche, eine dynamische GUI-Variable für in den Shader-Skripts bekomme ich "Shader konnte nicht kompilieren" Konsolenfehler.

Three.js: 16617 THREE.WebGLProgram: Shader-Fehler: 0 gl.VALIDATE_STATUS falsch gl.getProgramInfoLog ungültig Shadern ERROR: 0: 109: 'effectController': undeclared Identifikator ERROR: 0: 109: 'horzMod': field Auswahl erfordert Struktur oder Vektor auf der linken Seite

<script id="fragmentShader" type="x-shader/x-fragment"> 
    void main() { 
     e=(effectController.horzMod); 
    } 

</script> 

<script> 
    var effectController = { 
     horzMod: 400 
    }; 
    function initGUI() { 
     var gui = new dat.GUI(); 

     gui.add(effectController, "horzMod", 1, 400, 1); 
    } 
    function init() { 
     console.log(effectController.horizontalSpace) 
     initGUI(); 
    } 
</script> 

Answer 1

Ja, es ist möglich. Aber es ist nicht so einfach, JS-Variablen innerhalb des Shaders zu verwenden: Der Shader ist nicht einmal Javascript. Die Sprach-Shader werden in GLSL geschrieben, und Sie sollten zuerst ein paar Stunden brauchen, um darüber zu lesen, finde ich this piece on html5rocks ziemlich hilfreich (und wenn Sie ein wenig tiefer tauchen wollen, hier ist ein WebGL fundamentals article about GLSL).

Nun, da Sie das gelesen haben, werden Sie verstehen, dass Sie die Werte für Ihre Parameter als Uniformen in die Shader übertragen müssen, wie zum Beispiel uniform float horzMod;.

In THREE.js müssen Sie wissen, wie man das Shader-Material verwendet, das the relevant documentation here hat. Sie werden mit etwas am Ende wie folgt:

var material = new THREE.ShaderMaterial({ 
    vertexShader: '...', 
    fragmentShader: '...', 
    uniforms: { 
    horzMod: { value: 400 } 
    } 
}); 

Und jetzt Sie an dem Punkt sind, wo Sie ein gui-Element des einheitlichen Wert hinzufügen könnten. Mit dat.GUI, das ist ziemlich einfach:

var gui = new dat.GUI(); 
gui.add(material.uniforms.horzMod, 'value', 0, 1000) 
    .name('horzMod');