added built-in uniform uMouseCoord

index.html

@@ -71,7 +71,7 @@ <h1>shaderEd</h1>
         <div id="uniformsPanel">
             <p id="uniformHelp">
             Use the controls below to add custom uniforms to your shader. You can also update the value of an existing uniform by adding a new uniform with the same name.
-            </br>In addition, the following uniforms the editor sets for you: </br><b>`uTime`, `uResolution`,</b> and <b>`uCameraPosition`</b>.
+            </br>In addition, the following uniforms the editor sets for you: </br><b>`uTime`, `uResolution`, `uMouseCoord`</b> and <b>`uCameraPosition`</b>.
             </p>
             <div id="controls">
                 <input type="text" id="uniformName" placeholder="Uniform Name">

scene.js

@@ -28,6 +28,7 @@ export class SceneSetup {
                 uResolution: { value: new THREE.Vector2(this.renderCanvas.clientWidth, this.renderCanvas.clientHeight) },
                 uCameraPosition: { value: this.camera.position.clone() },
                 uTime: { value: 0.0 },
+                uMouseCoord: { value: new THREE.Vector4(0.0, 0.0, 0.0, 0.0) },
             },
             vertexShader: vertexShaderCode,
             fragmentShader: fragmentShaderCode,
@@ -49,6 +50,7 @@ export class SceneSetup {
         this.animate();
         document.getElementById('shapeType').addEventListener('change', (event) => this.switchGeometry(event.target.value));
         window.addEventListener('resize', () => this.onWindowResize());
+        document.addEventListener('mousemove', (e) => this.updateMouseUniform(e));
     }
 
     setupInitialGeometry() {
@@ -74,6 +76,24 @@ export class SceneSetup {
         this.stats.update();
     }
 
+    // Function to convert screen coordinates to NDC
+    updateMouseUniform(e) {
+        // Get mouse position in screen coordinates
+        let mouseX = e.clientX;
+        let mouseY = e.clientY;
+
+        // Convert to normalized device coordinates (NDC)
+        let xNDC = (mouseX / window.innerWidth) * 2 - 1;
+        let yNDC = -(mouseY / window.innerHeight) * 2 + 1;
+
+        // Update the uMouseCoord uniform
+        // Assuming Z and W components are not used in this context, set to 0.0
+        window.material.uniforms.uMouseCoord.value.x = xNDC;
+        window.material.uniforms.uMouseCoord.value.y = yNDC;
+        window.material.uniforms.uMouseCoord.value.z = 0.0; // Optional, based on usage
+        window.material.uniforms.uMouseCoord.value.w = 0.0; // Optional, based on usage
+    }
+
     onWindowResize() {
         const width = this.renderCanvas.clientWidth;
         const height = this.renderCanvas.clientHeight;

shader_manager.js

@@ -8,6 +8,7 @@ export class ShaderManager {
             uniforms: {
                 uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
                 uTime: { value: 0.0 },
+                uMouseCoord: { value: new THREE.Vector4(0.0, 0.0, 0.0, 0.0) },
             },
         });
         this.isVertexShader = true;

snippets/default_fragment_shader.glsl

@@ -12,6 +12,7 @@ out vec4 outColor; // Output color of the fragment
 uniform float uTime;
 uniform vec2 uResolution;
 uniform vec3 uCameraPosition;
+uniform vec4 uMouseCoord;
 
 void main() {
     // Simple example: modulate the output color with the normal vector to visualize it