Passing in array of vectors as a uniform?

Questions
1

I need to pass in an array of vectors as a uniform to my shader.

According to an answer on a related SO question says that the syntax is to do something like

const myUniform = [
  new THREE.Vector3(1.0, 0.0, 0.0),
  new THREE.Vector3(0.0, 1.0, 0.0),
];

const uniforms: {
  "myUniform":  { type: "v3v", value: myUniform },
};

const material = new THREE.ShaderMaterial({
  uniforms: uniforms,
});

However, when I tried this, I got an error like below:

image
image1126×639 62.9 KB

I played around a bit to find out what’s up, and noticed that the error actually goes away when I do the following:

const myUniform = [
  new THREE.Vector3(1.0, 0.0, 0.0),
  new THREE.Vector3(0.0, 1.0, 0.0),
];

const uniforms: {
  "myUniform":  myUniform, // assign the array of vectors directly??
};

I assigned the array of vectors directly as my uniform’s value.

Although this made the error disappear, I could not find any info on whether this is the correct syntax to use for passing in array of things as uniforms to the shaders.

Why did I get the error above when i tried the first syntax, but not with the second syntax?
Also, what is the correct way of passing in array of things as uniforms?

2

I haven’t personally messed around with this, but Uniform Docs may have some hints

3

Live example: https://jsfiddle.net/eax03ufm/

You always have to assign the uniform’s value to the value property. So the correct syntax is:

const uniforms = {
    colors: {
        value: [ new THREE.Color( 0xff0000 ), new THREE.Color( 0x00ff00 ) ]
    }
};

The type property is not necessary anymore since the engine can automatically detect the uniform type when evaluating the compiled shader program.

2 Likes