WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML
This tutorial describes how to use the
<canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.
Before you start
In this tutorial
- Getting started with WebGL
- How to set up a WebGL context.
- Adding 2D content to a WebGL context
- How to render simple flat shapes using WebGL.
- Using shaders to apply color in WebGL
- Demonstrates how to add color to shapes using shaders.
- Animating objects with WebGL
- Shows how to rotate and translate objects to create simple animations.
- Creating 3D objects using WebGL
- Shows how to create and animate a 3D object (in this case, a cube).
- Using textures in WebGL
- Demonstrates how to map textures onto the faces of an object.
- Lighting in WebGL
- How to simulate lighting effects in your WebGL context.
- Animating textures in WebGL
- Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.