Using THREE.js to pass an array of vec2 to a shader

Question

Using THREE.js to pass an array of vec2 to a shader

I've spent quite some time browsing the internet but haven't found the right solution yet. I came across a list of uniform types used by THREE.js and believe the code below should be accurate. I'm defining a uniform array of Vector2 at the last line.

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 JavaScript script, I pass this array as shown below. I believe this should also work:

// 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 );

Now my question is, how can I retrieve this uniform variable (pointList in this case) from the fragmentshader?

javascript arrays three.js glsl shader

Answer 1

Answer №1

When working with arrays, it is important to determine the maximum size needed. For example, if you have an array like this:

const myVectorArray = [
    new Vector(),
    new Vector(),
    new Vector(),
    ...
]

One approach is to initialize a shader using the array size:

const myShader = new ShaderMaterial({
    uniforms:{
        _myVectorUniformArray:{
            type:'v2v',
            value: myVectorArray
        }
    },
    vertexShader: 
        '#define ARRAYMAX '+ myVectorArray.length +'\n' + myVertexShader
}

In the vertex shader, initialize the array:

uniform vec2 _myVectorUniformArray[ARRAYMAX];

While populating the array is optional, exposing ARRAYMAX in JavaScript allows for managing the array effectively.

Answer 2

When working with arrays, it is important to determine the maximum size needed. For example, if you have an array like this:

const myVectorArray = [
    new Vector(),
    new Vector(),
    new Vector(),
    ...
]

One approach is to initialize a shader using the array size:

const myShader = new ShaderMaterial({
    uniforms:{
        _myVectorUniformArray:{
            type:'v2v',
            value: myVectorArray
        }
    },
    vertexShader: 
        '#define ARRAYMAX '+ myVectorArray.length +'\n' + myVertexShader
}

In the vertex shader, initialize the array:

uniform vec2 _myVectorUniformArray[ARRAYMAX];

While populating the array is optional, exposing ARRAYMAX in JavaScript allows for managing the array effectively.

Answer 3

Answer №2

To ensure proper initialization, I recommend starting with some vectors:

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

To incorporate this into your shader, you will need to include the following line:

uniform vec2 pointList[2];

If you prefer to avoid using Vector2 objects, you can opt for the 2fv uniform type:

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

Answer 4

To ensure proper initialization, I recommend starting with some vectors:

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

To incorporate this into your shader, you will need to include the following line:

uniform vec2 pointList[2];

If you prefer to avoid using Vector2 objects, you can opt for the 2fv uniform type:

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

Using THREE.js to pass an array of vec2 to a shader

Answer №1

Answer №2

Similar questions

Tips for preventing directly mutating a prop within a recursive component

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

"Bringing in" ES6 for Node

[filepond] in order to enroll using the serverId value received from the server

Generate an array of objects based on the attributes of img elements, extract their values, and display them using jQuery

Using a for loop to cycle through an array and generate sibling div elements

Skipping every third index in a JQuery .each loop after removing an element

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Nested modal in native app utilizes the React Carbon TextInput component for an uneditable input field

What's the best way to make a popup link in my situation?

Using for loop in AJAX Done() function

The JQuery function .load() is not functioning correctly

Using React Router can sometimes lead to an issue where the React components are

Implementing relative pathing in front-end development while using ExpressJS for the back-end

Seeking a straightforward and powerful list for bugs and features that allows users to easily vote and prioritize

What makes the ng-file-upload Upload service so special?

Find and replace problem with findOneReplace

Validation of user input alongside input masking using jQuery

Comparing totals with PHP across a multidimensional array

Unexpected behavior encountered in Rails app with unobtrusive JavaScript