Main Page

'''This Wiki is on a temporary lockdown due to a prolonged spam attack. Please email me if you have a change that urgently needs to be made'''

This website contains useful recipes for writing WebGL code. WebGL is a new technology that lets you code hardware-accelerated graphics into web pages, using JavaScript and a simple graphics API called OpenGL ES.

It does not contain a tutorial on WebGL: for that, you can check out the Learning WebGL lessons.

It does, however, include a list of Frequently Asked Questions about WebGL (though this might move elsewhere in the future).

Each recipe on this site should be a small(ish) bit of code showing how to do one thing only. It's not a site for frameworks or APIs, just snippets of code (though if you have a framework you'd like people to know about, feel free to add a link to the Frameworks and libraries section of this main page).

If you have a recipe that you want to add, just register (links at the top right) and add a link to a new page to the appropriate category in the list below. If there's no appropriate category, feel free to add one or use "Misc".

Right, enough explanation - on to the recipes!

Initialising

 * How to initialise WebGL
 * Useful include function

Geometry

 * How to draw a sphere

Shaders

 * Loading shaders from HTML script tags
 * A Uniform parser to work out which uniforms are defined in a shader from its source.
 * A basic vertex/fragment shader combination showing colours

Misc

 * Nothing here yet!

Useful Links

 * The official Khronos WebGL page
 * The Khronos WebGL forums
 * The Khronos WebGL Wiki
 * WebGL Cheat Sheet (API as of February 2010)
 * The OpenGL® ES Shading Language Specification (12 May, 2009)

Useful utilities

 * WebGL playground, an online tool for creating, testing, and sharing WebGL projects. The editor lets you work on JavaScript code and GLSL vertex/fragment shaders (if you have any) at the same time in a convenient way. You see the result on the same page. And you can use arbitrary JavaScript libraries/frameworks (e.g., those listed in this wiki).

Matrix libraries

 * Sylvester, a JavaScript library for matrix multiplication
 * mjs, something similar specifically designed for WebGL.
 * glMatrix, again something similar but now "stupidly fast" :-)

WebGL frameworks

 * C3DL, a JavaScript library that will make it easier to write 3D applications using Canvas 3D (now WebGL)
 * Copperlicht
 * EnergizeGL uses a language inspired by processing and similar Java frameworks.
 * GLGE, "WebGL for the lazy"
 * Jax, a complete WebGL development environment with emphasis on productivity
 * Processing.js, a JavaScript version of the well-known Processing library.
 * SceneJS, a JavaScript library for building scene graphs on WebGL
 * SpiderGL, providing typical structures and algorithms for realtime rendering to developers of 3D graphics web applications, without forcing them to comply with some specific paradigm.
 * StormEngineC
 * Three.js
 * WebGLU, a utility library for working with WebGL
 * X3DOM, is a framework for integrating and manipulating X3D scenes as HTML5 DOM elements, which are rendered via WebGL.
 * o3d Google's Webgl framework.
 * osgjs OpenSceneGraph implementation in javascript.
 * Oak3D An easy-to-use WebGL-based 3D graphics engine.