This is a list of all the WebGL related activities happening on the web. If you know of anything missing from this list, please add it or send a message to [email protected].

Frameworks

C3DL

C3DL is an open source javascript library (MIT license) that makes it easier to build web applications with WebGL. The library has support for cameras, lights, swappable shader effects, collada model loading, mouse picking, particle system and more. See Website for more info.

CopperLicht

CopperLicht is a full JavaScript 3D engine for creating games and 3d applications. CopperLicht includes a full 3d world editor and supports about 20 3D file formats (for example. 3ds, .obj, .x, .lwo, .stl. and more). CopperLicht is free to use.

CubicVR

CubicVR is in the early stages of being ported to WebGL. Information about CubicVR.js is available as is the source code.

EnergizeGL

EnergizeGL is a WebGL framework focused on generative design and information visualization. Everything is kept very simple, to enable users to work on their projects as fast and easy as possible.

GammaJS

GammaJS is a Javascript engine for creating simple 2.5D Platform games powered by WebGL.

GLGE

The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.

GTW

GTW is a WebGL framework for creating rich user interface for Web applications. GTW is currently under development and built around two key design goals: First, the actual UI look 'n feel is abstracted from the application using an 'external' JSON formatted 'scene file', and second, GTW classes can be easily extended to create custom UI elements.

O3D

O3D is an open-source JavaScript API for creating rich, interactive 3D applications in the browser. Originally built by Google as a browser plug-in, this new implementation of O3D is a JavaScript library implemented on top of WebGL. O3D provides a sample COLLADA Converter, which can be used to import files in the COLLADA format, or write your own converter and loader for other formats. O3D also provides a scene graph API.

SceneJS

JavaScript scene graph framework for WebGL

SpiderGL

SpiderGL is a JavaScript 3D Graphics library which relies on WebGL for realtime rendering. The philosophy behind SpiderGL is : to provide typical structures and algorithms for realtime rendering to developers of 3D graphics web application, without forcing them to comply with some specific paradigm (i.e. scene graphs) nor preventing low level access to the underlying graphics layer (WebGL).

TDL

TDL is a low-level JavaScript library that scarifies features for speed. It was used to create many of the samples at webglsamples.googlecode.com as well as Google Body

Three.js

Three.js is a lightweight 3D engine with a very low level of abstraction (aka for dummies). Currently the examples are the documentation. Be aware that the API may change from revision to revision breaking backwards compatibility. The engine can render using <canvas>, <svg> and WebGL.

X3DOM

X3DOM is a framework for integrating and manipulating (X3D) scenes as HTML5-DOM elements, which are rendered via WebGL. The open-source system allows defining 3D-scene description and runtime behavior declaratively, without any low-level JavaScript or GLSL coding.

WebGL Google Web Toolkit bindings

There are currently three under development:

OSG.JS

OSGJS is a scene graph library similar to OpenSceneGraph. The OSGJS api is similar to the OpenSceneGraph api, letting people knowing it ready to program application with OSGJS. Some plugin has been made for OpenSceneGraph to manipulate model and export them to OSGJS format. GlobeTweeter VehicleEditor ShowWebGL

Utilities & Debug Helpers

WebGLU

Javascript utility library for working with WebGL. WebGLU makes developing WebGL applications easier. WebGLU is open source library under the MIT license.

WebGLTrace

WebGLTrace is a WebGL context wrapper that prints a trace of an application's WebGL calls to the JavaScript console. The trace is helpful for debugging, and can also be used to create stand-alone applications that recreate a given series of WebGL calls. Such a stand-alone application could be useful for regression tests and bug reports.

WebGLDebugUtils

WebGLDebugUtils include functions for wrapping every WebGL call with your own callback. So for example you can easily call glGetError after every call to help find bugs or log all calls or any other use for wrapping every call. Also includes functions to turn WebGL enums into strings and for simulating lost context events.

WebGLUtils

WebGL utils includes 3 functions. (1) A function to properly setup WebGL and handle both browsers that don't have WebGL and machines that don't support WebGL. (2) a function to handle render loops in the most cross browser and user friendly way. (using setTimeout or setInterval = BAD!) (3) a function to get the current time in a cross browser and 'correct' way.

gluUnProject

A simple standalone port of gluUnProject to Javascript. The interface is very similar to the C variant of the function with the same name.

Tutorials, Technical Whitepapers and How to Guides

Learning WebGL

Follow along with Giles Thomas as he learns WebGL. The website has clear, informative lessons instructing you how to create WebGL graphics in your browser. An understanding of OpenGL is recommended.

WebGL tutorial at the Mozilla Developer Center

By Eric Shepherd, Developer Documentation Lead at Mozilla.

OpenGL ES 2.0 Programming Guide

Guide for learning OpenGL ES 2.0, the underpinnings of WebGL. The sample code from the book has been ported to WebGL and is available on the book website.

Presentations & Videos

WebGL Camp #1 took place at Stanford University on June 25th, 2010 and videos of all talks are available

Examples

PC Programming - GPU Noise

Demo and sample code for generating real-time 4D Perlin and simplex noise right in a web page.

TuBaGames - 3D Games using WebGL

Currently includes the "Barfight" game which includes skeletal meshes, particles, dynamic shadows and lots of geometry. More to come soon!

Quake 3 Map rendered using WebGL

A complete Quake 3 level, drawn using CopperLicht, a WebGL engine

Another Quake 3 Map rendered using WebGL

Another Quake 3 map rendered using custom code (not CopperLicht), implements most shaders and features player collision detection

Shader Toy

27 Shader demos ported from various demo scene coders. Built by iq of rgba (Note: some of the shaders have not been updated to take into account recent changes in WebGL. Most will work on the page, but some will not.)

Chocolux GPU raytracer ported to WebGL

WebGL port of Auld's amazing 1K demo, Chocolux. Chocolux is a real-time recursive GPU raytracer using four spheres. There are only 2 triangles on screen; all of the ray tracing happens in the fragment shader. Chocolux's raytracer does a few things for distortion (reuse of a loop variable in an inner loop) to achieve the stylized effect and the small footprint.

Realtime raytracing in WebGL using fragment shaders

Realtime raytracing examples from Lewpen.com

Some GPU-based demos by Jonas Sicking of Mozilla

A GPU-based ray tracer or a more colorful version of the same.
Some other shader-based demos: a Mandelbrot set that you can click on to see the corresponding Julia set, and secondly a page that morphs between Julia sets.

QBox

Qbox is a simple photo slideshow which maps images on the faces of a rotating cube; it uses 2D Canvas to resize and center the images and to produce the textures for the cube.

Animated Alien

Animated alien by @pl4n3

Worlds of WebGL

Animated particle system by [email protected]

Computer simulations

N-body simulations on GPU. Linear and nonlinear waves. Solitons. 3DS and spline based models. Fire, fur and random terrain demos. NaCl and ethanol models. "Life" under a magnifying glass.

3D Minigolf

Fully playable 3D minigolf game. Uses JigLibJS physics engine.

KataSpace

An open source multi-user 3D application and platform. Introductory blog post

Animated Jellyfish

A very high quality animated jellyfish model. Uses multiple layers for a very realistic effect.

WebGLSamples

Various samples mostly from people at Google.

Particles Experiment

Particles experiment with osg.js

Scene import from OpenSceneGraph

Scene import from OpenSceneGraph to osg.js

Brain Surface and Tractography Viewer

The Brain Surface and Tractography Viewer was developed at Children's Hospital Boston in the Fetal-Neonatal Neuroimaging and Development Science Center as part of a web front-end that automates the processing of MRI and Diffusion MRI by Dan Ginsburg and Rudolph Pienaar.

User Contributions