WebGL Terrain

Rotate Show queried voxels

This very simple WebGL scene shows a green terrain and a red sphere which can be placed anywhere on the surface of the terrain.

If you click at the terrain, the red sphere will be placed at that location.

To rotate the terrain, drag the mouse cursor into the desired direction.

If you select "Show queried voxels" you can see which voxels of the terrain needed to be queried to find the point on the surface. The query starts at the bounding box of the terrain (indicated by a blue sphere) and then traverses voxels along the line of sight until a triangle from the surface mesh is hit.


This applet has been programmed in JavaScript and WebGL.

WebGL Terrain is © Werner Randelshofer. Parts of the code (as marked) are from the WebGL demo repository. This code is copyright by Apple Inc. and by Google Inc. and is used under permission.

If the applet does not display, you may need to use a different browser.
At the time of writing (August 2011) WebGL is supported in Chrome 12, Firefox 5 and in Safari 5.1*.

*You may have to enable WebGL in Safari. See this blog article.


terrain.zip (36 KB)

Creative Commons Attribution 3.0

External Links

WebGL documentation at Khronos.org

WebGL demo repository.

Copyright © Werner Randelshofer. All Rights Reserved.