Question

我正在使用three.js webGL着色器示例，我正在尝试添加GUI以实时动态控制着色器的参数。这可能吗？似乎当我尝试在着色器脚本之外添加effectController变量时，它似乎工作正常，但是当我尝试在着色器脚本中创建动态GUI变量时，我得到“着色器无法编译”控制台错误。

three.js：16617 THREE.WebGLProgram：shader error：0 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders ERROR：0：109：'effectController'：未声明的标识符错误：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非常有帮助（如果你想深入一点，这里＆＃39; sa { {3}}）。

现在您已经了解了，您将了解需要将参数的值作为制服传递到着色器中，例如uniform float horzMod;。

在THREE.js中，您需要了解如何使用具有WebGL fundamentals article about GLSL的着色器材质。你最终会得到这样的东西：

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

现在，您可以在统一值中添加gui-element。使用the relevant documentation here，这非常简单：

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

three.js动态片段着色器GUI

1 个答案: