WebGL Free Matrix Transformation Utility

Input values in the form below. Then select the Show Transformation button or tap the canvas. Rotate the flat blue square mesh to see three intersecting squares. Read Matrix Transformation Utility Information.

Rotation Around Axes

Rotate X Rotate Y Rotate Z Translate X Translate Y Translate Z Scale X Scale Y Scale Z

Change Values in the Matrix to Modify the Mesh

Matrix Transformation Utility Information

Prepare WebGL mesh elements for display online with this utility. 3D models often need a few modifications to work well with Web projects. 3D models may load with the wrong orientation, size, or location. Find the right rotation, scale, and translation easily with the Matrix Transformation Utility.

Matrix transformation values interactively modify the WebGL mesh. Calculate rotation with degrees. Transformations accumulate. Select the Reset Transformation button to start over. By default three perpendicular planes render. However without rotation, only the front facing plane displays. Notice each transformation displays in text. The Reset Transformation button clears the transformation text too.

Meshes load and display with JavaScript and shaders described in the WebGL EBook Series Online 3D Media with WebGL.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.