This is a list of all the WebGL related activities happening on the web. If you know of anything missing or out of date on this list, we invite you to add it or update it.
- 1 Frameworks
- 1.1 Blend4Web
- 1.2 C3DL
- 1.3 Cesium
- 1.4 CopperLicht
- 1.5 CubicVR.js
- 1.6 FRAK engine
- 1.7 GLGE
- 1.8 GlowScript
- 1.9 Inka3D
- 1.10 J3D
- 1.11 Jax
- 1.12 JebGL
- 1.13 KickJS
- 1.14 KriWeb
- 1.15 Lightgl.js
- 1.16 MathBox
- 1.17 O3D
- 1.18 Oak3D
- 1.19 OpenWebGlobe SDK
- 1.20 OSG.JS
- 1.21 Parallax
- 1.22 PhiloGL
- 1.23 SceneJS
- 1.24 SpiderGL
- 1.25 StormEngineC
- 1.26 taccGL
- 1.27 TDL
- 1.28 Three.js
- 1.29 WebGL Google Web Toolkit bindings
- 1.30 Wt WGLWidget
- 1.31 X3DOM
- 2 Utilities & Debug Helpers
- 3 Tutorials, Technical Whitepapers and How to Guides
- 3.1 Learning WebGL
- 3.2 WebGL tutorial at the Mozilla Developer Center
- 3.3 Professional WebGL Programming
- 3.4 OpenGL ES 3.0 Programming Guide
- 3.5 An introduction to WebGL
- 3.6 WebGL Programming Guide - in French only
- 3.7 WebGL Academy - interactive tutorials
- 3.8 WebGL Fundamentals and Image Processing
- 3.9 WebGL 101 video
- 3.10 Capturing WebGL to video
- 4 Presentations & Videos
- 5 Examples
- 5.1 TuBaGames - 3D Games using WebGL
- 5.2 Quake 3 Map rendered using WebGL
- 5.3 Another Quake 3 Map rendered using WebGL
- 5.4 Shader Toy
- 5.5 Chocolux GPU raytracer ported to WebGL
- 5.6 Realtime raytracing in WebGL using fragment shaders
- 5.7 Examples powered by Blend4Web
- 5.8 Some GPU-based demos by Jonas Sicking of Mozilla
- 5.9 QBox
- 5.10 WebGL examples
- 5.11 3D Minigolf
- 5.12 Animated Jellyfish
- 5.13 WebGLSamples
- 5.14 Sand Toy: Another Particle Experiment
- 5.15 Brain Surface and Tractography Viewer
- 5.16 Sketchfab
- 5.17 maze game
- 5.18 WebShader - from Mistal Research, Inc.
- 5.19 Another helicopter game : Survivor copter
- 5.20 Webgl Cadillac Ranch
- 5.21 WebGL solar system formation
- 5.22 WebGL Path Tracing
- 5.23 Azathioprine WebGL Demo
- 5.24 Webgl card game demo
- 5.25 milkshake
- 5.26 Ocean simulation
- 5.27 GLSL Shader Editor
- 5.28 SolidWorks, Inventor and Rhino Web Viewer
- 5.29 House configurator
- 5.30 70s WebGL Demo
- 5.31 Cl3ver
- 5.32 Shapespark
Blend4Web is an open-source WebGL framework which uses Blender as the primary authoring tool. It features native support for Blender's node materials, NLA editor, particle system, Bullet physics, positional audio and other Blender functionality. Demos and tutorials are available on the official website.
Cesium is an open-source WebGL framework for rendering globes and maps, with a focus on visualizing dynamic data. Cesium strives to have the best possible performance, precision, visual quality, ease of use, platform support, and content. Join our active developer community on github.
CubicVR.js is a lightweight, high-performance and implicit WebGL engine with a versatile collection of built-in features for quick implementation. Examples provided for everything from low-level usage to fully managed scenes and events with physics. Includes support for COLLADA in both XML and BadgerFish-JSON format for simple importing of external models, animations and asset libraries. Bullet physics engine compiled via emscripten directly from C/C++ sources is integrated for full compatibility thanks to the Ammo.js project. You can view the Examples and Demos and API Documentation for the github repository at the CubicVR.js Wiki.
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.
Jax is far more than another WebGL framework. It is a complete development toolkit, providing everything from code generators to test suites. Jax has been designed from the very beginning around bringing big ideas to market fast. It sports arbitrary combinations of material properties, has full support for an any number of light sources, and gracefully recovers when approaching hardware limits on older machines. It also supports more advanced techniques like bump mapping and shadows, and seamlessly integrates into Ruby on Rails applications. Detailed tutorials and guides are available in addition to standard API documentation at jaxgl.com.
JebGL is a Java applet that emulates a WebGL canvas, providing a fallback option for browsers that don't support WebGL. JebGL uses JOGL for hardware acceleration, and supports IE9, IE8, IE7, IE6, Firefox, Chrome, Safari (on Mac), and Opera. Check out the website for more info and demos.
KickJS is a WebGL based 3D game engine build for modern web browsers such as the most recent version of Chrome and Firefox. KickJS provides a game oriented abstraction of WebGL and makes game programming in a browser easy. KickJS is open source (New BSD License)
KriWeb aims to provide a stable error-free basis for creating interactive 3D user experience. It's written in Dart, which makes the class structure clear, and provides safety type checks for early bug detection. The focus on stability also involves wide application of functional elements, such as immutability of basic structures, and the absence of globals. KriWeb provides a flexible playground for experimenting with WebGL, with an ability to scale into large projects. Blender scenes and materials are exported into verifiable XML documents, while meshes and skeletons are transformed into GPU-friendly data structures.
This library makes it easier to quickly prototype WebGL applications. It's lower level than many other WebGL libraries and while it doesn't provide a scene graph, it re-implements OpenGL's modelview/projection matrix stack to provide similar functionality. It also re-introduces some built-in uniforms from GLSL (such as gl_Vertex and gl_ModelViewProjectionMatrix) and OpenGL's immediate mode. Includes a converter to convert .obj files to JSON and then to a scene mesh.
MathBox is a library for rendering presentation-quality math diagrams in a browser using WebGL. Built on top of Three.js and tQuery, it provides a clean API to visualize mathematical relationships and animate them smoothly.
Oak3D encapsulates the browser-layer WebGL API and provides a set of ease-to-use API that free the developers from the bottom API interface details. Also, the Oak3D provides many kinds of basic functional libraries, such as Math Library, Model Library, Skeletal Animation Library and etc. Apart from these, Oak3D has the necessary tools to convert the traditional graphic resources into the acceptable format for Oak3D. All these features make the Oak3D a HTML5 based Web3D development platform.
OpenWebGlobe is an Open Source virtual globe running in WebGL. OpenWebGlobe supports several data categories such as image data, elevation data, points of interest, vector data, and 3D objects. Before streaming over the internet, this data must be pre-processed. Such pre-processing usually comprises a transformation from a local to a global reference system, creation of pyramid layers or levels of detail (LOD), tiling of the data. Source Code: Source on GitHub Live Demo: Demo Switzerland-3D
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. VehicleEditor Sketchfab
Parallax is Google Web Toolkit 3D library. Parallax is based on three.js project and has similar API for the back compatibility. Parallax supports WebGL-canvas renderer only.
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development.
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.
WebGL Google Web Toolkit bindings
There are currently three under development:
Utilities & Debug Helpers
This is a live-editor for fragment shaders that comes with a huge gallery of effects, and shows the code for each effect floating above a full-window or full-screen render of that effect.
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.
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.
Tutorials, Technical Whitepapers and How to Guides
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.
By Eric Shepherd, Developer Documentation Lead at Mozilla.
Book that covers how you develop hardware-accelerated 3D graphics with WebGL. It goes through concepts such as:
- 3D graphics theory
- Vertex shaders and fragment shaders
- WebGL performance optimizations
Guide for learning OpenGL ES 3.0. The sample code from the book has been ported to WebGL and is available on the book website.
Introductory article on WebGL from Opera's developer site.
This programming guide is framework agnostic and concerns both webgl API and main 3D algorithms.
Learn to build webgl applications step by step.
WebGL Fundamentals and Image Processing
Articles by Gregg Tavares on the fundamentals of WebGL and its use in image processing:
WebGL 101 video
A WebGL 101 video by Erik Möller starting from the very minimal sample and gradually building on that until you have a multitextured mesh format, XHR, Camera and a simple scene graph.
Capturing WebGL to video
Presentations & Videos
See the separate Wiki topic on WebGL Presentations from Recent Conferences.
Currently includes the "Barfight" game which includes skeletal meshes, particles, dynamic shadows and lots of geometry. More to come soon!
A complete Quake 3 level, drawn using CopperLicht, a WebGL engine
Another Quake 3 map rendered using custom code (not CopperLicht), implements most shaders and features player collision detection
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.)
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 examples from Lewpen.com
Blend4Web demo applications and scenes: Nature Morte, The Farm, Fashion Show and The Island.
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 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.
Simulations on GPU
Linear and nonlinear waves. Solitons. Schrödinger equation. N-body. Ink droplet dynamics.
Open Source molecule and crystal viewers ChemDoodle Web Component library, GLmol.
An Interactive Introduction to Splines Bezier, B-splines, NURBS and subdivision interactive splines and 3d models.
Fully playable 3D minigolf game. Uses JigLibJS physics engine.
A very high quality animated jellyfish model. Uses multiple layers for a very realistic effect.
Various samples mostly from people at Google.
Particles experiment with osg.js
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.
Publish interactive 3D content online using WebGL
3D Maze game.
WebShader is an online graphics shader development tool for WebGL. It supports the creation of multi-pass materials, 2D and cubemap textures, control over render states, ability to create variables, etc. WebShader is currently available as a beta release.
Fly through a narrow cave with an helicopter.
WebGL version of the Cadillac Ranch
Numerical simulation : solar system formation. From 10 000 bodies interacting, get 30 big satellites.
GPU accelerated path tracing demonstration
Impressive Demoscene style demo. Made with Inka3D
Character animation by shaders. No keyframe.
Port of MilkDrop renderer to WebGL. Plays music and shows cool programmable visualizations.
Ocean simulation with refraction and reflection.
A browser based GLSL Shader Editor created in KickJS. Open Source (BSD New License).
Display designs of SolidWorks, Inventor and Rhino by WebGL.
House configurator demo. It allows to make its own house from a predefined house model, and to visualize it in 3D.
Demoscene style demo featuring motion capture character animation. Made with Inka3D
Create and publish interactive 3D for web and mobile using WebGL
Real-time interior visualizations with baked lights and Oculus Rift support