Skip to content

The complete journey of a vertex, going from model coordinates to screen coordinates

Notifications You must be signed in to change notification settings

abernier/vertex-journey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vertex journey

Demo

🧳 The complete journey of a vertex, going from model coordinates to screen coordinates (in pixels) — or how to convert a point to screen

NB: our vertex (aka point) is represented by a 🟠 sphere added to our model 🟪 cube

rendering-pipeline-v3 original: https://www.realtimerendering.com/blog/tag/pipeline/

/*
 Our cube:
  - is 10x10x10 long
  - is positionned at (0, 5, 0) in the world

 Our sphere is positioned at (-5, 5 5) in the cube basis (ie: front-top-left corner)
*/

// cube.position.y = 5
// cube.add(sphere)
// sphere.position.set(-5, 5, 5)

const point = sphere.position.clone(); // (-5, 5, 5) aka relative to cube
console.log("point=", point);

//
// A: Model -> World
//

const M = cube.matrixWorld;
console.log("Model (World) Matrix", M);
point.applyMatrix4(M);
console.log("world-space point=", point);

//
// B: World -> Camera (aka View)
//

const V = camera.matrixWorldInverse;
console.log("View Matrix", V);
point.applyMatrix4(V);
console.log("view-space point=", point);

//
// C: Camera -> NDC
//

const P = camera.projectionMatrix;
console.log("Projection Matrix", P);
point.applyMatrix4(P);
console.log("clip coordinates", point);

//
// D: NDC -> Screen
//

const W = new THREE.Matrix4();
const { x: WW, y: WH } = renderer.getSize(new THREE.Vector2());
W.set(
  WW / 2, 0, 0, WW / 2,
  0, -WH / 2, 0, WH / 2,
  0, 0, 0.5, 0.5,
  0, 0, 0, 1
);
console.log("Window Matrix", W);
point.applyMatrix4(W);
console.log("window coordinates", point);

More conceptually, this is equivalent to:

Untitled (4)

Colophon

INSTALL

Pre-requisites:

  • Node
$ npm ci

Dev

$ npm start

Build

$ npm run build

About

The complete journey of a vertex, going from model coordinates to screen coordinates

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published