This content kit explores how to take data within a WebGL project, and project it into the proper spaces to display it on the screen. It assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. It explains the three core matrices that are typically used to represent a 3d object: the model, view and projection matrices.
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 and shader code. To download these files either grab the zip file or run git clone git@github.com:TatumCreative/mdn-model-view-projection.git from the command line.
These lessons require a browser and device that support WebGL. The browsers that support these features are Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+. Be aware that not all devices support WebGL even if the browsers do. There are many tutorials available throughout the web on graphics programming, but this content kit specifically targets web developers. It's assumed that the audience is familiar with an intermediate level web development, 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4