Home / Javascript / Texture in vertex shader

Texture in vertex shader


It’s such a shame that I only discover that you can get the texture data in the vertex shader recently. the texture2D method is not fragment shader only, this opens another world to me. Like this particle video example that i have rebuild for thousand times, now it’s extremely easy to build. Because i can just update the video texture and calculate the new position with the pixel, therefor i don’t need to re-upload the vertices position every frame. The resource saved allow me to do more e.g. using a texture particle, and create a simple dof effect.

here is how the vertex shader looks like :

vec4 colorVideo = texture2D(uSampler2, uvRef);
vec3 pos = aVertexPosition;
pos.y += colorVideo.y * offset;

when uploading the vertices you need to pass an extra uv coordinate so you know where to pick the color from the video texture, which is the uvRef in this example, then calculate the offset you want and add it to the position of the particle. That’s it, hope you enjoy it !

Leave a Reply

Your email address will not be published. Required fields are marked *