This content kit is brief overview of manipulating 3d objects with matrices (a concept from linear algebra.) Matrix math is used heavily in WebGL, but web developers are more familiar with DOM manipulations. This intro divorces the explanation of matrices from the WebGL APIs by using the CSS3 matrix3d transform.
It demonstrates translation, scale, and rotation transformations, as well as exploring how to compose a single matrix transform from multiple transforms through matrix multiplication.
| Lesson | Code | |
|---|---|---|
| Multiplication | JSFiddle | 01-multiplication |
| Translation | JSFiddle | 02-translation |
| Scale | JSFiddle | 03-scale |
| Rotation Basics | JSFiddle | 04-rotate |
| Rotate X/Y/Z | JSFiddle | 05-rotate-all |
| Composition | JSFiddle | 06-composition |
Lessons are located both in this repo and on JSFiddle. The .js files contain the lessons as comments next to the live code. The lessons are designed so that the code can be edited and tweaked for experimentation while following along. When working from the code in the repo, the lessons are located in /lessons and are in alphabetical order.
The lessons can either be worked online from JSFiddle, or downloaded and explored locally. The content of the lessons is mixed in with the code. The script.js files contain most of the lesson, while the index.html contains the HTML. To download these files either grab the zip file or run git clone git@github.com:TatumCreative/mdn-lighting-models.git from the command line.
- Verify browser supports unprefixed CSS3 transforms.
- Download the lesson files to your machine.
- Open the lessons in the browser:
- Either open the index.html files from the lessons in your browser
- Or if you are serving files with a local webserver, make sure and serve them from the root directory of the content kit so that the shared js files can be correctly loaded in.
- Verify browser supports unprefixed CSS3 transforms.
- Visit the JSFiddle links
These lessons require a browser that supports unprefixed CSS3 3d transforms.. The browsers that support this feature are Firefox 16+, Google Chrome 36+, Opera 23+, Safari 9+ and Internet Explorer 10+. It's assumed that the audience is familiar with a basic level web development, CSS, markup, and JavaScript.
Submit an issue or a pull request for any corrections or updates. For a history of the updates visit the commit history.