Where in source code does ThreeJS perform updates to WebGL uniforms that are Objects?

Questions
, ,
1

I’m trying to find out where in the source code does the ThreeJS engine perform automatic updates to shader uniforms that are objects (e.g., variables of type Vector3 or Color).

Consider the following code. If I want to update the time uniform, I have to do it manually with uniforms.time.value = xx, but if I want to update the mouse uniform, I just need to set the Vector, and ThreeJS automatically updates it for me:

const mousePos = new THREE.Vector2();

// Init material
const mat = new THREE.RawShaderMaterial({
    uniforms: {
        time: {value: 0},
        mouse: {value: mousePos}
    },
    vertexShader: vShader,
    fragmentShader: fShader,
});

// When uniform is '1f' (number),
// I have to set its .value each time it changes:
update(time) {
    mat.uniforms.time.value = time;
}

// However, if uniform is '2f+' (an object), 
// I just need to set the .value on material initiation
// And the uniform updates automatically when the object is modified:
mouseMove(x, y) {
    mousePos.set(x, y);
}

I’ve been searching in the source code for a while with no success. Where does Three.JS perform these WebGL calls when a uniform is updated? And does it handle 1f uniforms differently than 2f+ uniforms?

22%20PM

2

That happens in WebGLUniforms. The following section is updating uniforms of type 2f or 2fv:

The method does accept Vector2 or an array with two float values. Because of caching, uniforms are only updated if necessary.

2 Likes
3

That’s exactly what I was looking for, thanks!

I wasn’t sure if WebGL stored references to object uniforms. It’s really cool to see that Three.js caches, and updates them for you. Man, you really get to appreciate how much Three.js automatically does for you when trying to write your own plain WebGL!

1 Like