WebGL Notes 1

The transformation of 2D.

Local Coordinate

The coordinate you would like to work with

This is the local coordinate you use to define your points (used in draw lines and triangles)

Clip Coordinate

Clip Coordinate or World Coordinate (without normalizing to -1 to 1)

This is the clip coordinate that WebGL wishes to work with.

The information is exactly the same. We are only changing the format to represent this piece of distinguished information.

That is we are mapping from one to another.

clip_coordinate = f(local_coordinate)

The reason why we have to send a coordinate specific like this is that WebGL could easily compute with this -1 to 1 coordinate without worrying about inconsistency.

And the reason we want to work in the local coordinate is that we wish to use a coordinate that we are familiar with.

Viewport Coordinate (0, 0)

Viewport Coordinate without any translation

Since the world coordinate extends from -1 to 1, the viewport actually extends from (0, 0) to (width, height) as described in pixels, e.g. 300px * 500px.

So there is a matrix to transform the world coordinate to the viewport coordinate.

viewport_coordinate = w2v(world_coordinate)

Viewport Coordinate (3, 4)

Viewport that has been translated by (3, 4)

gl.viewport(3, 4, width, height)

This is to illustrate how you can translate viewport to a new position which is different than the first three that this time you are changing the definition, you are mentioning a new thing.