I am trying to figure out how to make an instance of THREE.Mesh always face the camera using a vertex shader instead of just relying on the [THREE.Mesh].lookAt() method.
After reading through NeHe's Billboarding tutorial, I understand the concept except for how to apply orientation vectors to each vertex.
My current progress can be seen in this fiddle: http://jsfiddle.net/RZ4XE/2/
Below is the snippet of my vertex shader code (fragment shader deals with color information). I am utilizing default uniforms and attributes provided by THREE.js for those unfamiliar:
cameraPosition(vec3)position(vertex position, another vec3)projectionMatrix(camera's projectionMatrix, mat4)modelViewMatrix(camera.matrixWorldInverse * object.matrixWorld, mat4)
void main() {
vec3 look = normalize(cameraPosition - position);
if (length(look) == 0.0) {
look.z = 1.0;
}
vec3 up = vec3(0.0, 1.0, 0.0);
vec3 right = normalize(cross(up, look));
up = normalize(cross(look, right));
mat4 transformMatrix;
transformMatrix[0][0] = right.x;
transformMatrix[0][1] = right.y;
transformMatrix[0][2] = right.z;
transformMatrix[1][0] = up.x;
transformMatrix[1][1] = up.y;
transformMatrix[1][2] = up.z;
transformMatrix[2][0] = look.x;
transformMatrix[2][1] = look.y;
transformMatrix[2][2] = look.z;
gl_Position = projectionMatrix * modelViewMatrix * transformMatrix * vec4(position, 1.0);
}
Any help would be greatly appreciated. Thank you!