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.
- In addition, the following uniforms the editor sets for you: `uTime`, `uResolution`, and `uCameraPosition`.
+ In addition, the following uniforms the editor sets for you: `uTime`, `uResolution`, `uMouseCoord` and `uCameraPosition`.
diff --git a/scene.js b/scene.js
index 21801e5..231ec1a 100644
--- a/scene.js
+++ b/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;
diff --git a/shader_manager.js b/shader_manager.js
index 857ec7b..33a2bbc 100644
--- a/shader_manager.js
+++ b/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;
diff --git a/snippets/default_fragment_shader.glsl b/snippets/default_fragment_shader.glsl
index 07225ff..5c4573c 100644
--- a/snippets/default_fragment_shader.glsl
+++ b/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