Main Page

From The WebGL Cookbook

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!

Contents 1 Recipes 1.1 Initialising 1.2 Geometry 1.3 Shaders 1.4 Misc 2 Useful Links 2.1 Frameworks and libraries 2.1.1 Useful utilities 2.1.2 WebGL frameworks

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)

Frameworks and libraries

Useful utilities

• Sylvester, a JavaScript library for matrix multiplication

WebGL frameworks

• C3DL, a JavaScript library that will make it easier to write 3D applications using Canvas 3D (now WebGL)
• EnergizeGL uses a language inspired by processing and similar Java frameworks.
• GLGE, "WebGL for the lazy"
• 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.
• 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.