What is the process of updating a uniform in Three.js?

Question

What is the process of updating a uniform in Three.js?

I had to revise my inquiry since I realized I was inquiring about the wrong thing previously.

What I actually wanted to know is, what's the process for updating a uniform in three.js?

Answer 1

Answer №1

Here is a solution that appears to be effective:

setMaterialProperty(yourMesh, 'yourUniform', whatever);

Answer 2

Here is a solution that appears to be effective:

setMaterialProperty(yourMesh, 'yourUniform', whatever);

Answer 3

Answer №2

There are two methods available:

To update the uniform within the Shader Material itself

OR

You can utilize mesh.material to access the ShaderMaterial and then make changes to the uniform

Here is an example illustrating both cases:

   var delta = 0
   var customUniforms = {
    delta: { value: 0 },
    u_time: { value: Date.now() }
   };

    // Creating a shader material with custom Uniforms
    shaderMaterial = new THREE.ShaderMaterial({
      uniforms: customUniforms,
      vertexShader: document.getElementById("vertexShader2").textContent,
      fragmentShader: document.getElementById("fragmentShader2").textContent
    });

    // Setting up a Mesh object for shader rendering
    var geometry = new THREE.BoxBufferGeometry(10, 10, 10, 10, 10, 10);
    shaderMesh = new THREE.Mesh(geometry, shaderMaterial);
    this.scene.add(shaderMesh);

In the animate loop

  animate = () => {
    delta += 0.1; 

          // Updating the uniform in Shader Material
          shaderMaterial.uniforms.delta.value = 0.5 + Math.sin(delta) * 0.0005;

          // Updating the uniform using mesh directly
     shaderMesh.material.uniforms.u_time.value = delta;

}

Visit here for additional reference

https://i.sstatic.net/4nG28.png

Complete Example provided below:

<body>
    <div id="container"></div>
    <script src="js/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4(position, 1.0 );
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform vec2 u_resolution;
        uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            gl_FragColor=vec4(st.x,st.y,0.0,1.0);
        }
    </script>
    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById('container');

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry(2, 2);

            uniforms = {
                u_time: { type: "f", value: 1.0 },
                u_resolution: { type: "v2", value: new THREE.Vector2() },
                u_mouse: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragmentShader').textContent
            });

            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);

            container.appendChild(renderer.domElement);

            onWindowResize();
            window.addEventListener('resize', onWindowResize, false);

            document.onmousemove = function(e){
              uniforms.u_mouse.value.x = e.pageX
              uniforms.u_mouse.value.y = e.pageY
            }
        }

        function onWindowResize(event) {
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.u_resolution.value.x = renderer.domElement.width;
            uniforms.u_resolution.value.y = renderer.domElement.height;
        }

        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            uniforms.u_time.value += 0.05;
            renderer.render(scene, camera);
        }
    </script>
</body>

Answer 4

There are two methods available:

To update the uniform within the Shader Material itself

OR

You can utilize mesh.material to access the ShaderMaterial and then make changes to the uniform

Here is an example illustrating both cases:

   var delta = 0
   var customUniforms = {
    delta: { value: 0 },
    u_time: { value: Date.now() }
   };

    // Creating a shader material with custom Uniforms
    shaderMaterial = new THREE.ShaderMaterial({
      uniforms: customUniforms,
      vertexShader: document.getElementById("vertexShader2").textContent,
      fragmentShader: document.getElementById("fragmentShader2").textContent
    });

    // Setting up a Mesh object for shader rendering
    var geometry = new THREE.BoxBufferGeometry(10, 10, 10, 10, 10, 10);
    shaderMesh = new THREE.Mesh(geometry, shaderMaterial);
    this.scene.add(shaderMesh);

In the animate loop

  animate = () => {
    delta += 0.1; 

          // Updating the uniform in Shader Material
          shaderMaterial.uniforms.delta.value = 0.5 + Math.sin(delta) * 0.0005;

          // Updating the uniform using mesh directly
     shaderMesh.material.uniforms.u_time.value = delta;

}

Visit here for additional reference

https://i.sstatic.net/4nG28.png

Complete Example provided below:

<body>
    <div id="container"></div>
    <script src="js/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4(position, 1.0 );
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform vec2 u_resolution;
        uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            gl_FragColor=vec4(st.x,st.y,0.0,1.0);
        }
    </script>
    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById('container');

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry(2, 2);

            uniforms = {
                u_time: { type: "f", value: 1.0 },
                u_resolution: { type: "v2", value: new THREE.Vector2() },
                u_mouse: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragmentShader').textContent
            });

            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);

            container.appendChild(renderer.domElement);

            onWindowResize();
            window.addEventListener('resize', onWindowResize, false);

            document.onmousemove = function(e){
              uniforms.u_mouse.value.x = e.pageX
              uniforms.u_mouse.value.y = e.pageY
            }
        }

        function onWindowResize(event) {
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.u_resolution.value.x = renderer.domElement.width;
            uniforms.u_resolution.value.y = renderer.domElement.height;
        }

        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            uniforms.u_time.value += 0.05;
            renderer.render(scene, camera);
        }
    </script>
</body>

Answer 5

Answer №3

A simple illustration on how to update the shader uniform dynamically.

/* Vertex Shader */
<script type="x-shader/x-fragment" id="myShader">
    uniform float customUniform;
    uniform sampler2D customTexture;
    varying vec2 textureUV;
    varying vec2 vertexPosition;

    vertexPosition = uv * vec2(customUniform, customUniform); // Updated based on mouse movement

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
</script>

/* Setting the uniform */
var myCustomUniform;
var customTexture = new THREE.ImageUtils.loadTexture('./data/textures/customTexture.jpg');
uniforms = {
    customUniform: { type: "f", value: myCustomUniform },
    customTexture: { type: "t", value: customTexture },
};

customMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('myShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    wireframe: false,
    side: THREE.FrontSide
});

document.addEventListener('mousemove', updateUniformOnMouseMove, false);

function updateUniformOnMouseMove(event) {
    uniforms.customUniform.value += 0.01; // Update the custom uniform value
    uniforms.customUniform.needsUpdate = true;
}

...

Answer 6

A simple illustration on how to update the shader uniform dynamically.

/* Vertex Shader */
<script type="x-shader/x-fragment" id="myShader">
    uniform float customUniform;
    uniform sampler2D customTexture;
    varying vec2 textureUV;
    varying vec2 vertexPosition;

    vertexPosition = uv * vec2(customUniform, customUniform); // Updated based on mouse movement

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
</script>

/* Setting the uniform */
var myCustomUniform;
var customTexture = new THREE.ImageUtils.loadTexture('./data/textures/customTexture.jpg');
uniforms = {
    customUniform: { type: "f", value: myCustomUniform },
    customTexture: { type: "t", value: customTexture },
};

customMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('myShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    wireframe: false,
    side: THREE.FrontSide
});

document.addEventListener('mousemove', updateUniformOnMouseMove, false);

function updateUniformOnMouseMove(event) {
    uniforms.customUniform.value += 0.01; // Update the custom uniform value
    uniforms.customUniform.needsUpdate = true;
}

...

Answer 7

Answer №4

I found a great solution for my specific needs:

const material = new THREE.ShaderMaterial({
    uniforms: {
        customVec3Uniform: { value: new THREE.Vector3(1,1,1) }
    },
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
});

If you need to update the uniform values at runtime (source):

material.uniforms.customVec3Uniform.value = new THREE.Vector3(2,2,2);
// mat.needsUpdate = true; // my example works without 'needsUpdate'

Answer 8

I found a great solution for my specific needs:

const material = new THREE.ShaderMaterial({
    uniforms: {
        customVec3Uniform: { value: new THREE.Vector3(1,1,1) }
    },
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
});

If you need to update the uniform values at runtime (source):

material.uniforms.customVec3Uniform.value = new THREE.Vector3(2,2,2);
// mat.needsUpdate = true; // my example works without 'needsUpdate'

Answer 9

Answer №5

Alternative Method for Modifying Three.js Materials

If you are making changes to a material that goes beyond using THREE.ShaderMaterial, such as THREE.MeshStandardMaterial with modifications to its fragment shader, the process will be slightly different.

To adjust the shader's uniforms without needing recompilation, it is necessary to keep a reference to the shader within the onBeforeCompile callback, allowing access to the uniforms through this stored reference.

Using Typescript Class:

Begin by connecting to the THREE.Material's onBeforeCompile function and transferring relevant values (in this case, a uniforms dictionary created in the constructor) into the shader's uniforms. It is crucial as shader compilation occurs before initial use. Maintain a reference to the shader within your class for easy access. Proceed with any additional adjustments to the fragment shader using these uniforms as required.

private _uniforms: { [uniform: string]: ShaderUniform } = {};
private _shader?:THREE.Shader;

this._material.onBeforeCompile = (shader) => {
    let prepend = "";
    //transfer any pre-compilation changes and add them to the fragment shader 
    Object.entries(this._uniforms).forEach(([key, info]) => {
       prepend += `uniform ${info.type} ${key};\n`
       shader.uniforms[key] = {value: info.value};
    });
    //add the prepended shaders and other modifications to the fragment shader using basic string substitutions 
    shader.fragmentShader = prepend + shader.fragmentShader;
    //keep a reference to the shader
    this._shader = shader;
}

If the shader has not been compiled yet, retrieve or set the property from the stored uniforms, otherwise utilize the shader's own uniform value, available only post-compilation.

public getUniform(name:string) : any {
    return this._shader ? this._shader.uniforms[name].value : this._uniforms[name].value;
}

public setUniform(name:string, value:any) {
   if (this._shader) {
       return this._shader.uniforms[name].value = value
   } else {
       this._uniforms[name].value = value;
   }
}

Answer 10

Alternative Method for Modifying Three.js Materials

If you are making changes to a material that goes beyond using THREE.ShaderMaterial, such as THREE.MeshStandardMaterial with modifications to its fragment shader, the process will be slightly different.

To adjust the shader's uniforms without needing recompilation, it is necessary to keep a reference to the shader within the onBeforeCompile callback, allowing access to the uniforms through this stored reference.

Using Typescript Class:

Begin by connecting to the THREE.Material's onBeforeCompile function and transferring relevant values (in this case, a uniforms dictionary created in the constructor) into the shader's uniforms. It is crucial as shader compilation occurs before initial use. Maintain a reference to the shader within your class for easy access. Proceed with any additional adjustments to the fragment shader using these uniforms as required.

private _uniforms: { [uniform: string]: ShaderUniform } = {};
private _shader?:THREE.Shader;

this._material.onBeforeCompile = (shader) => {
    let prepend = "";
    //transfer any pre-compilation changes and add them to the fragment shader 
    Object.entries(this._uniforms).forEach(([key, info]) => {
       prepend += `uniform ${info.type} ${key};\n`
       shader.uniforms[key] = {value: info.value};
    });
    //add the prepended shaders and other modifications to the fragment shader using basic string substitutions 
    shader.fragmentShader = prepend + shader.fragmentShader;
    //keep a reference to the shader
    this._shader = shader;
}

If the shader has not been compiled yet, retrieve or set the property from the stored uniforms, otherwise utilize the shader's own uniform value, available only post-compilation.

public getUniform(name:string) : any {
    return this._shader ? this._shader.uniforms[name].value : this._uniforms[name].value;
}

public setUniform(name:string, value:any) {
   if (this._shader) {
       return this._shader.uniforms[name].value = value
   } else {
       this._uniforms[name].value = value;
   }
}

What is the process of updating a uniform in Three.js?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The production build of Angular 2 with special effects amplification

Show the information obtained from the dropdown menu selection

Retrieve the offspring with the greatest level of depth within a parental relationship

How can Navbar values in a React application be dynamically updated depending on the user's login status?

Unable to proceed due to lint errors; after conducting research, the issue still remains

Unable to utilize console.log and alert functions within the Next.js application

Tips for utilizing promises to create automated waiting for a function's completion in node.js/javascript

Resetting a Material UI search filter TextField back to its initial state after clearing it

Issue with activation of onClick event in case/switch statement

What is the best way to send the entire image to an API route in Next.js so that I can save it using FS and then upload it to Cloudinary?

Dropdown selection not getting updated when modifying DropdownSection component

Attempting to figure out how to make Bootstrap pagination function properly

What is the method for selecting a specific side of a BoxGeometry in THREE.js?

The tooltip feature is functioning properly on the button, but unfortunately it is not working

The mysterious case of jQuery DOM alterations vanishing from sight in the view

Steps for implementing a datepicker in a dynamically generated element

Here's a guide on executing both GET and POST requests using a single form

What is the process for updating selenium-webdriver if it is not globally installed on my system?

Ways to identify if one object is positioned above another

What is the best way to populate multiple fields in vue.js using Google Autocomplete?