diff --git a/index.html b/index.html index caa418c..aac9056 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,7 @@

shaderEd

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