three.js動的フラグメントシェーダGUI

Question

私はthree.js webGLシェーダの例を使用しています。シェーダのパラメータをリアルタイムで動的に制御するGUIを追加しようとしています。これは可能ですか？シェイダースクリプトの外でeffectController変数を追加しようとするとうまくいくように見えますが、シェイダースクリプトで動的GUI変数を作成しようとすると、「シェーダーはコンパイルできませんでした」というコンソールエラーが発生するようです。

three.js：16617 THREE.WebGLProgram：シェーダーエラー：0 gl.VALIDATE_STATUS偽gl.getProgramInfoLog無効シェーダERROR：0：109： 'effectController'：宣言されていない識別子 ERROR：0：109： 'horzMod'：フィールド選択するには、左側に構造またはベクターが必要です

<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

はい、可能です。シェーダ内のJS変数を使用するだけでは簡単ではありません。シェーダはJavaScriptでさえありません。言語シェーダーはGLSLと書かれていますが、最初に読むには数時間かかるはずです。this piece on html5rocksが非常に役に立ちます（さらに深く掘り下げたい場合はWebGL fundamentals article about GLSLです）。

これで、パラメータの値を均一な形でシェーダに渡す必要があることがわかりました（たとえば、uniform float horzMod;）。

THREE.jsでは、the relevant documentation hereのシェーダマテリアルの使用方法を知る必要があります。あなたは次のようなものになります：

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

これで、均一値にgui要素を追加できるようになりました。 dat.GUIを使用すると、これはかなり簡単です：

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