I was recently asked about coordinate systems used in WebGL, so I decided to summarize them below:
There are six coordinate systems in WebGL:
Local space: an object made up of vertices has its own coordinate system, which is used to define the the position of its vertices relative to the object itself.
World space: The one consisting of all its objects, which is used for to define the position of an object within the scene
View space: It represent the field of view of a camera.similar to how human eyes perceive the world.
Clip space: a space defined by a specific viewing area
NDC(Normal Device Coordinate) space: a normalized space where coordinates range from -1 to 1 on the x and y axes.
Screen space: it is a final 2D space where objects are rendered onto the WebGL canvas.
Vertex postion is always represented by a four-dimensional vector (x, y, z, w) before being transformed into NDC space.
gl_position is sent to NDC space that uses left-handed coordinate system, and is then transformed into right-handed coordinate system through the multiplication of Model-View-Projection(mvp) matrix and gl_position
there is an illustration showing the transformation between coordinate systems in WebGL Programming Guide
Top comments (1)
Hey there, would you be interested in joining our WebGL Shader Hackathon?
Until 8 May, create your original shader and publish it on our blockchain to compete for prizes ranging between $500 and $1000!