Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using a custom vertex shader with THREE.Points

Tags:

three.js

I see that Threejs has a Points Material to draw a geometry as points rather than as triangles. However, I want to manipulate the vertices using my own vertex shader, using a Shader Material. In WebGL, I think I could just call gl_drawArrays using gl.Points instead of gl.Triangles. How can I tell the renderer to draw the geometry as points? Is there a better way to go about this?

like image 651
bryan wong Avatar asked Aug 01 '17 23:08

bryan wong


People also ask

What can you do with a vertex shader?

Vertex shaders typically perform transformations to post-projection space, for consumption by the Vertex Post-Processing stage. They can also be used to do per-vertex lighting, or to perform setup work for later shader stages.

How many times does the vertex shader program execute?

A vertex shader is a piece of code that is executed in the GPU processors, and it's executed once, and only once for each vertex you send to the graphics card. So, if you have a 3D model with 1000 vertices, the vertex shader will be executed 1000 times, so remember to keep your calculations always simple.

What is vUV in vertex shader?

The vUV model-texture mapping variable that was passed by the vertex shader to the pixel shader for the current portion of the 3D mesh is used to apply the originally intended 2D texture color to the 3D mesh with the line.

What happens between vertex and fragment shaders?

The difference between vertex and fragment shaders is the process developed in the render pipeline. Vertex shaders could be define as the shader programs that modifies the geometry of the scene and made the 3D projection. Fragment shaders are related to the render window and define the color for each pixel.


2 Answers

little addition, I had no joy until I added gl_PointSize to my vertex shader:

void main(){
    gl_PointSize = 100.;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.);
}

found the answer in the GPU particle system example.

like image 70
Peter Hayman Avatar answered Dec 06 '22 11:12

Peter Hayman


Found my solution right after asking the question. Just create a THREE.Points object instead of THREE.Mesh using whatever geometry and the Shader Material you want to use.

THREE.Points(geometry, new THREE.ShaderMaterial(parameters));

like image 35
bryan wong Avatar answered Dec 06 '22 12:12

bryan wong