Billboard Shader from Quads

Im attempting to convert this shader: https://codesandbox.io/p/sandbox/tree-test-gcw6xx

The desired result is for the quads to fully billboard toward the camera like a traditional billboard. I have tried a lot of different approaches but no matter what i do, the quads never fully face the camera or become skewed.

Its quite simple to get something to billboard toward the camera inside the shader. However making the individual quads have this behaviour seems a lot more challenging. Any help or pointers is appreciated!

I think it’s because you have your tree laid out on the ground instead of sticking out of the grid.
Threejs uses Y = up by default… dnnno what the r3f stuff is using, but… if you have to make it work in such cases sometimes you may need to supply a different “up” vector to the object… the object.up vector is used by the the lookAt method which may be what is used internally here.

https://threejs.org/docs/#api/en/core/Object3D.up

Vertex shader for static sprite:

vec3 cameraRight=vec3(viewMatrix[0].x,viewMatrix[1].x,viewMatrix[2].x);
vec3 cameraUp=vec3(viewMatrix[0].y,viewMatrix[1].y,viewMatrix[2].y);
vPosition=(cameraRight*position.x)+(cameraUp*position.y);

Ill try to adjust the mesh thank you