I am currently experimenting with the three.js webGL shader example and am attempting to implement a GUI that can dynamically control the parameters of the shader in real time. Is this achievable? It appears that when I place the effectController variable outside of the shader scripts, everything works fine. However, when I try to create a dynamic GUI variable within the shader scripts, I encounter "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>