I'm maintaining a vertex shader encapsulated in a custom material class (inherited from ShaderMaterial but now from MeshStandardMaterial) which convert 3D coordinate to NDC as usual:
vec4 ndcPos = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
ndcPos /= ndcPos.w;
//...other transformations to ndcPos
then a set of transformations are applied to ndcPos. As you can see they are applied in NDC space. I need to take the result coordinate back to camera (eye) space so I guess we need to inverse the steps, something like this:
vec4 mvPos = ndcPos * ndcPos.w;
mvPos *= inverse of projectionMatrix;
Expected result: mvPos has only the modelView transformation applied.
Questions:
projectionMatrix? It would be easy and low-cost passing the camera.projectionMatrixInverse as uniform to the vertex shader but I didn't find a way to do so in three.js: neither ancestor material classes, nor onBeforeCompile can access the camera.The inverse operation to compute the view space position is
vec4 p = inverse(projectionMatrix) * ndc;
vec4 mvPos = p / p.w;
and the inverse operation to compute the object position is
vec4 p = inverse(projectionMatrix * modelViewMatrix) * ndc;
vec4 pos = p / p.w;
(Note that in the above code pos corresponds to the attribute position and mvPos corresponds to position * modelViewMatrix.)
Note: If you transform a Cartesian coordinate with a perspective projection matrix (or inverse perspective projection matrix), the result is a Homogeneous coordinate. To convert a Homogeneous coordinate into a Cartesian coordinate, you must perform a Perspective Divide (after the Perspective Divide, the component w is 1).
It should be mentioned that the inverse function exists only since GLSL ES 3.00 (WebGL 2.0) and is not available in GLSL ES 1.00 (WebGL 1.0). So it may be necessary to calculate the inverse matrix in Javascript and pass it as a uniform variable to the shader.