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 around the X or Y axes to see three intersecting squares. See the Intersecting Planes Texture Map. See the WebGL Matrix Transformation Utility : Initialization JavaScript Source Code. Read Matrix Transformation Utility Information, below.

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 similar to the WebGL E-Book Series, source code.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.