three.js dynamic fragment shader GUI

Question

Im using the three.js webGL shader example, and I'm trying to add a GUI to control the parameters of the shader dynamically in real time. is this possible? it seems that when I try to add the effectController variable outside of the shader scripts it seems to work fine but when I try to make a dynamic GUI variable for in the shader scripts I get "shader could not compile" console errors.

three.js:16617 THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders ERROR: 0:109: 'effectController' : undeclared identifier ERROR: 0:109: 'horzMod' : field selection requires structure or vector on left hand side

<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>

Do you mean like THIS ?

2pha
– 2pha

2016-12-09 12:29:34 +00:00
Commented Dec 9, 2016 at 12:29 — 2pha
– 2pha, Commented Dec 9, 2016 at 12:29

xXx · Accepted Answer · 2018-08-20 09:09:35Z

Yes, it is possible. But it is not as easy as just using JS-variables within the shader: The shader isn't even Javascript. The language shaders are written in is called GLSL, and you should first take a few hours to read up on that, I find this piece on html5rocks quite helpful (and if you want to dive a bit deeper, here's a WebGL fundamentals article about GLSL).

Now that you read that, you will understand that you need to pass the values for your parameters into the shaders as uniforms, like for instance uniform float horzMod;.

In THREE.js you will need to know about how to use the shader-material, which has the relevant documentation here. You will end up with something like this:

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

And now you are at the point where you could add a gui-element to the uniform-value. Using dat.GUI, this is pretty easy:

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

Collectives™ on Stack Overflow

three.js dynamic fragment shader GUI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related