What is the process for converting NDC coordinates to camera space within a vertex shader?

Question

What is the process for converting NDC coordinates to camera space within a vertex shader?

I am currently maintaining a vertex shader contained within a custom material class (originally inherited from ShaderMaterial but now from MeshStandardMaterial) which converts 3D coordinates to Normalized Device Coordinates (NDC) as usual:

vec4 ndcPos = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
ndcPos /= ndcPos.w;
//...other transformations to ndcPos

Next, a series of transformations are applied to ndcPos. These transformations are carried out in NDC space. To return the resulting coordinate back to camera (eye) space, it appears that the steps need to be reversed, as shown below:

vec4 mvPos = ndcPos * ndcPos.w;
mvPos *= inverse of projectionMatrix;

Expected outcome: mvPos should only have the modelView transformation applied.

Queries:

Is this approach correct?
How can the inverse of projectionMatrix be computed? It would be convenient and efficient to pass camera.projectionMatrixInverse as a uniform to the vertex shader, but I have not been able to figure out a way to do so in three.js: neither through ancestor material classes, nor through onBeforeCompile which can access the camera.

javascript three.js glsl webgl

Answer 1

Answer №1

To calculate the view space position in reverse, you can use the following operation:

vec4 p = inverse(projectionMatrix) * ndc;
vec4 mvPos = p / p.w;

Similarly, to determine the object position in reverse, you can use the following operation:

vec4 p = inverse(projectionMatrix * modelViewMatrix) * ndc;
vec4 pos = p / p.w;

(Please note that in the code above, pos represents the position attribute and mvPos represents position * modelViewMatrix.)

It is important to remember that when transforming a Cartesian coordinate with a perspective projection matrix, or its inverse, you will obtain a Homogeneous coordinate. To convert this back into a Cartesian coordinate, a Perspective Divide must be done (which sets the component w to 1 after the Divide).

Furthermore, please keep in mind that the inverse function is only available in GLSL ES 3.00 (WebGL 2.0) and not in GLSL ES 1.00 (WebGL 1.0). If needed, the inverse matrix can be calculated in Javascript and passed as a uniform variable to the shader.

Answer 2

To calculate the view space position in reverse, you can use the following operation:

vec4 p = inverse(projectionMatrix) * ndc;
vec4 mvPos = p / p.w;

Similarly, to determine the object position in reverse, you can use the following operation:

vec4 p = inverse(projectionMatrix * modelViewMatrix) * ndc;
vec4 pos = p / p.w;

(Please note that in the code above, pos represents the position attribute and mvPos represents position * modelViewMatrix.)

It is important to remember that when transforming a Cartesian coordinate with a perspective projection matrix, or its inverse, you will obtain a Homogeneous coordinate. To convert this back into a Cartesian coordinate, a Perspective Divide must be done (which sets the component w to 1 after the Divide).

Furthermore, please keep in mind that the inverse function is only available in GLSL ES 3.00 (WebGL 2.0) and not in GLSL ES 1.00 (WebGL 1.0). If needed, the inverse matrix can be calculated in Javascript and passed as a uniform variable to the shader.

What is the process for converting NDC coordinates to camera space within a vertex shader?

Answer №1

Similar questions

The retrieval of data from AWS Dynamodb in Node.js is not done synchronously

Using Meteor package to efficiently import JSON arrays into mongoDB

"Enhance your Angular experience with SweetAlert integration using directives and translation

Tips for identifying and logging out a dormant user from the server side using Angular 2 Meteor

Utilizing Flask to gather information from a leaflet map

Using THREE.js to shoot a ball with a curve on the X or Z axis

How can I animate SVG paths to fade in and out sequentially?

Converting JSON to PNG format using FabricJS

Navigate to a specific hidden div that is initially invisible

Exploring Highcharts Pie Chart with AJAX for Real-time Data Updates

Uploading files in AngularJS using Rails Paperclip

Targeting an HTML form to the top frame

What is the best way to achieve a Clamp-To-Border effect on a Texture loaded onto an Image in the THREE.js?

Leveraging Ajax to fetch JQuery

Tips for accessing basic information from these websites without encountering CORS issues

Is the $http call for OPTIONS instead of POST?

Using React Material UI icon within an auto complete feature

steps for incorporating AngularJS code into a bootstrap modal within an asp.net core mvc application

Avoid refreshing AJAX on browser back navigation

Add the div id to the script