Switch up the position of the vertex shader in Three.js/webgl

Question

Switch up the position of the vertex shader in Three.js/webgl

I've been working on a particle system using three.js that involves using regular JavaScript loops to change particle positions, but I've found that this method is quite slow.

Due to this performance issue, I've decided to delve into transferring the calculations to the GPU via shaders.

However, I've encountered an issue where I'm unable to get the positions to update properly. Each particle seems to remain at its initial position.

var vertexShader = [
        'void main() {',
        '    vec3 newPosition = position.xyz;',
        '    newPosition.y += 10.0;',
        '    gl_PointSize = 1.00;',
        '    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );',
        '}',
    ].join('\n');

My question is, why does

'    newPosition.y += 10.0;',

not update the particle positions as expected?

Do I need to introduce some sort of time variable into the shader code, as I've noticed others doing this in their implementations? Any advice would be greatly appreciated.

javascript opengl-es three.js particle-system

Answer 1

Answer №1

I figured it out, the position is considered as an Attribute. To manipulate it, I discovered that passing a uniform to the Shader is necessary. This uniform can then be utilized to increment the position Attribute.

Here is an example of a Vertex shader:

let vertexShader = [
        'uniform float time;',
        'void main() {',
        '   vec3 updatedPos = position;',
        '   updatedPos.x += time;',
        '   gl_PointSize = 1.00;',
        '   gl_Position = projectionMatrix * modelViewMatrix * vec4( updatedPos, 1.0 );',
        '}',
    ].join('\n');

Answer 2

I figured it out, the position is considered as an Attribute. To manipulate it, I discovered that passing a uniform to the Shader is necessary. This uniform can then be utilized to increment the position Attribute.

Here is an example of a Vertex shader:

let vertexShader = [
        'uniform float time;',
        'void main() {',
        '   vec3 updatedPos = position;',
        '   updatedPos.x += time;',
        '   gl_PointSize = 1.00;',
        '   gl_Position = projectionMatrix * modelViewMatrix * vec4( updatedPos, 1.0 );',
        '}',
    ].join('\n');

Switch up the position of the vertex shader in Three.js/webgl

Answer №1

Similar questions

Retrieving selected values from an ngx dropdown list

After toggling the class, Jquery will no longer select the button

Display a pop-up when hovering over a layer with react-leaflet

IE Troubles: Timer Function Fails in Asp.Net MVC

Ways to clearly establish the concept of "a"

Retrieving checkbox value upon form submission

Unable to successfully download zip files using Ajax in the MVC framework

To trigger the opening of one offcanvas menu from another offcanvas menu

show image with the help of jquery and ajax

Select value not updating as expected

When it comes to Redux, is it considered an anti-pattern to pass an event from a presentational component to a container component

Looking for assistance in using JavaScript to determine the percentage of a DIV's width in pixels

jQuery - Enhancing User Experience with Dynamic Screen Updates

The function res.send is unavailable and errors are not being properly managed

Tips on generating a sample Mongoose Model with all null values

Generating a safe POST connection with express.js

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

Is it possible to apply action.payload to multiple keys within an object?

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob