Passing an array of vec2 to shader in THREE.js

Question

I've been searching the web for a while now and did not find the correct answer yet. I found the list of uniform types THREE.js uses, and I think the following code should be correct. At the last line I define an uniform array of Vector2.

uniforms: {
    "center":   { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
    "aspectRatio": { type: "f", value: null },
    "radius": { type: "f", value: 0.1 },
    "pointList":  { type: "v2v", value: [] },
},

In my js script I pass this array as follows. This should work too, I guess:

// Add effects
effect = new THREE.ShaderPass( THREE.MetaBalls2D );
effect.renderToScreen = true;
effect.uniforms[ 'aspectRatio' ].value = window.innerWidth/window.innerHeight;
effect.uniforms[ 'pointList' ].value = pointList //is an array of THREE.Vector2;
composer.addPass( effect );

My question now is, how do I access this uniform variable (pointList in this case) from the fragmentshader?

pailhead · Accepted Answer · 2014-08-12 02:24:36Z

8

You should know what is the max size that your array should be, so say you have an array:

var myVec2Array = [
    new THREE.Vector2(),
    new THREE.Vector2(),
    new THREE.Vector2(),
    ...
]

you can do something along these lines, when you initialize a shader:

var myShader = new THREE.ShaderMaterial({
    uniforms:{
        _myVec2UniformArray:{
            type:'v2v',
            value:myVec2Array
        }
    },
    vertexShader: 
        '#define ARRAYMAX '+ myVec2Array.length +'\n' + myVertexShader
}

In myVertexShader you would init:

uniform vec2 _myVec2UniformArray[ARRAYMAX];

You don't have to populate the array, but you can expose ARRAYMAX in js, and use it to manage the array on both ends.

answered Aug 12, 2014 at 2:24

pailhead

5,5372 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Over a year ago

question @pailhead - with this setup, would it be possible to send an updated _myVec2UniformArray uniform with a different size array? Would it work as long as that new array size is less than the ARRAYMAX?

pailhead Over a year ago

i think glsl wont let you resize and array, not sure exactly what the impact of this is, but you can pass another uniform and break before hitting MAX_whatever?

HugoLasticot Over a year ago

Thanks a lot. That tricks save me ! Just a question, could you initialize an array with define ? Like that: #define array '+ myVec2Array +'\n' + myVertexShader ?

mrdoob · Accepted Answer · 2014-08-11 20:48:04Z

2

I would initialise it with some vectors just in case:

"pointList":  { type: "v2v", value: [ new THREE.Vector2(), new THREE.Vector2() ] },

I think this is what you need to add to your shader:

uniform vec2 pointList[2];

Also, if you want to avoid Vector2s you can use 2fv as uniform type:

"pointList":  { type: "2fv", value: [ 1, 0,  0, 1 ] }

answered Aug 11, 2014 at 20:48

mrdoob

19.6k4 gold badges66 silver badges62 bronze badges

3 Comments

ThijsM Over a year ago

Thank you @mrdoob for the answer. So, if I understand it correctly, you only can initialize the array if you know the size upfront? Could you pass the number of points via an int and initialize it like this: uniform vec2 pointList[size];? Because that would be what I need. I want to pass the size from javascript to my shader.

pailhead Over a year ago

I think you could do something like "#define maxv2s 10\n" + yourGlslShader; and then uniform vec2 myv2array[maxv2s] this way you could define this shader from js. You can't dynamically scale the array, I think.

pailhead Over a year ago

2fv seems pretty interesting, i didn't know about it before!

Collectives™ on Stack Overflow

Passing an array of vec2 to shader in THREE.js

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related