Three.js vertex shader to render all geometry triangles so they face camera

Question

I would like to create a vertex shader in Three.js to render the faces of a textured geometry so that all the triangles are face-on to the camera.

This is to emulate the functionality and performance of Three.js Points, but without the size limitation of gl_PointSize.

I'm not really sure what calculation to perform in the vertex shader. Any help appreciated.

Answer 1

you will have to add custom attribute to your geometry, easiest one to use would be a vector to the center of the triangle

in vertex shader you will have to calculate how to move each vertex, you now have

• vertex position
• vector to center
• vertex normal == face normal
• camera orientation (from matrices)

from that you can calculate the triangle center, which be static and calculate the rotation vertex has to make around the triangle center around axis perpendicular to the vector to center so that normal will come out as inverse of the camera orientation

the math is not very complicated, but writing shader code is tedious because of the non-existent debug - i advise you to first write a code that rotates the positions of geometry(using only the same parametres) and port it to shader