Tutorials

The following are four tutorials that cover all the basic information on how to use WebRender. Each one adds more features to the same code in order to step you through how to do everything. These tutorials will take you from a basic 2D triangle to an animated and textured 3D cube, after which you should understand the library well enough to use it in your own applications.

Tutorial 1: Red Triangle

This tutorial covers all the basics about setting up a WebRender instance as you create a simple 2D red triangle.

Tutorial 2: Shaders

This tutorial explains how the shader system in WebRender works and also how the callback and canvas rendering works.

Tutorial 3: Textures

This tutorial shows how texture are loaded into WebRender and how they are sampled in the shaders.

Tutorial 4: 3D Cube

This final tutorial simply changes the 2D triangle into a 3D cube in order to show the small differences when working in 3D.

Examples

The following examples are more advanced applications using WebRender. Maze is a more practical implementation, while the others are more advanced graphical techniques. Due to the use of JSON requests to load models and textures, these examples may not run locally without causing a cross-domain error in the browser.

Maze

This is an application that uses WebRender to draw a simple maze that the user can moved around in. An more practical example of how WebRender can be used.

Shadow

This example has a sphere that casts shadows onto the plane below it. It is a crude application of shadowmapping using WebRender.

Transparency

This example shows how partial transparency can be achieved with WebRender and multiple HTML5 canvases.

Waves

This example is using a texture map to morph the vertices of a plane into waves.