Struggling to incorporate the Voronoi shader from the Book of Shaders into three.js, I can't figure out why the mouse position isn't affecting my visible output. Even though I'm logging the mouse position and checking that the uniform value is being updated, the shader doesn't seem to be reacting at all on my end.
I have confirmed that the mouse position is being logged and the u_time is updating when I inspect it in the animate callback function. However, despite these updates, the shader's appearance remains static with no changes whatsoever.
This is what I am seeing (an unchanging image) while the animate method is being called:
https://i.sstatic.net/Vdh0e.png
The u_time variable is updating as expected when I check it within animate, indicating that the callback is functioning properly. The issue seems to lie in the uniforms not being updated, even though I believed I was handling the updates correctly.
Note - I followed a similar Stack Overflow post on passing mouse positions to shaders through uniforms for guidance, experimenting with both the original mouse position and a modified version to map values from [-1, 1].
Here is the full code:
<!--
* Based on Book of Shaders 12:
https://thebookofshaders.com/12/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>WebGL Demo - Voronoi</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="./libraries/threejs/three.min.js"></script>
<!-- shaders -->
<script type="x-shader/x-vertex" id="vertexShader">
void main() {
vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * modelViewPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Shader logic here...
</script>
</head>
<body></body>
<script>
// JavaScript logic here...
</script>
</html>