I am trying to achieve a specific effect where all instances of a mesh face the camera.
uniform vec2 size;
uniform vec3 center;
vec3 billboard(vec3 v, mat4 view) {
vec3 up = vec3(view[0][1], view[1][1], view[2][1]);
vec3 right = vec3(view[0][0], view[1][0], view[2][0]);
vec3 pos = center + right * v.x * size.x + up * v.y * size.y;
return pos;
}
void main() {
vec3 worldPos = billboard(position, viewMatrix);
gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPos, 1.0);
}
The current code I have for rendering a billboard is not displaying anything as expected. Passing 'position' into the vec4 constructor on the last line renders the shape correctly, indicating an issue with the calculation within the function.
I have been attempting to follow this tutorial: detailing solution #2, but so far have struggled to resolve the problem.
There are other potential solutions such as those mentioned in these resources:
- THREE.JS GLSL sprite always front to camera
- THREE.js - Billboard Vertex Shader
Although they provide some insight, none of them seem to perfectly fit my requirements.
Based on my understanding, it seems crucial to send the center position after any translations to ensure accurate calculations in world space.
Considering that Three.js passes the camera position in the vertex shader, I wonder if applying a transformation based on the distance between the camera and billboard center would impact performance significantly.
Since this will be instanced, using a Sprite object or setting LookAt to the camera position every frame is not feasible in my case.
If anyone has insights or guidance, I would greatly appreciate it!