I’m using Three.js to render dynamic shadows. In my GLSL shader, I have a uniform vec3 array parameter and a uniform float array parameter. During the rendering process, I want to update these arrays. My question is how to update them in my animate function?
My code looks like:
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 pos[4];
uniform float size[4];
uniform float tt;
void main() {
vec3 color = vec3(0.0)
for(int i=0; i<4; i++)
{
color += myfunction(pos[i], size[i]); // the final color value is within [0,1]
}
gl_FragColor=vec4(color * tt,1.0);
}
</script>
<script>
var mypos = new Array();
var mysize = new Array();
var renderer, camera, scene, mesh, material;
init();
animate();
function init(){
// initiate renderer, scene, camera, mesh
...
//
mypos[0] = new THREE.Vector3(1,0,0);
mypos[1] = new THREE.Vector3(0,1,0);
mypos[2] = new THREE.Vector3(0,0,1);
mypos[3] = new THREE.Vector3(1,1,0);
mysize[0] = 0.1;
mysize[1] = 0.2;
mysize[2] = 0.3;
mysize[3] = 0.4;
material = new THREE.ShaderMaterial({
uniforms: {
pos: { value: [mypos[0], mypos[1], mypos[2], mypos[3]] },
size: { value: [mysize[0], mysize[1], mysize[2], mysize[3]] },
tt : {value: 0.3}
},
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
}
...
}
function animate()
{
for(var i=0; i<4)
{
mypos[i] = new vec3(mypos[i].x + 0.1*i, mypos[i].y + 0.2*i, mypos[i].z + 0.3*i);
mysize[i] = mysize[i]+ 0.5* i;
}
tt = tt + 0.01;
// To change tt
material.uniforms.tt.value = tt;
//How to update mypos[4] and mysize[4] for material
??
}
</script>
To update the tt value in shader, I can use material.uniforms.tt.value = tt;. When I update the values of the two arrays, mypos[4] and mysize[4], I tried to use the following code:
material.uniforms.pos.value = [mypos[0], mypos[1], mypos[2], mypos[3]];
material.uniforms.size.value = [mysize[0], mysize[1], mysize[2], mysize[3]];
It gives me the error that Uncaught TypeError: firstElem.toArray is not a function .
So, I want to know how to update the values of mypos[4] and mysize[4] for the material. Thanks a lot!!!