Download (6.97 MB)


This is a simple application that allows the user to move around a maze using either a mouse or the W, A, S, D keys. It has a light source moving back and forth overhead to demonstrate the basic shading it is using, and uses two canvases, one for the 3D maze and a second for the background mountains. Since this was never developed further there is not collision or goal to the game. The bulk of the code dealing with WebRender can be found in the ./engine/engine.js file.

The most important part of this example is the use of two canvases in order to draw the scene. The back canvas uses the HTML5 drawing tool to draw part of a panoramic image of the mountains. Placed over this is a second transparent canvas where the 3D maze is drawn. This trick is important as the drawing tools are much faster than JavaScript, and having the browser handle what is shown is also much faster.

The main goal for performance when working with WebRender is to try and move as much of the process onto the browser.