block by mbostock 10591444

Perspective Transformation II

Full Screen

A perspective projection can be precisely specified through four pairs of corresponding points. By dragging the four corners of the grid above, you can adjust the perspective projection interactively and place the grid anywhere you like in the scene.

The points of the grid are transformed using a transformation matrix, which is computed by solving a series of linear equations derived from the four point-pairs using LU decomposition as implemented by numeric.js.

This technique can also be used to compute a CSS matrix3d transform to place a DOM element within a scene.

index.html

Makefile

numeric-license.txt

numeric-solve.js

numeric-solve.min.js

package.json