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.

Frameworks

BabylonJS

BabylonJS is a complete JavaScript framework for building 3D games with HTML 5 and WebGL. Play directly with the Babylon.js API via the Babylon Playground

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.

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.

Cesium

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.

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.js

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.

Famous

Famous unites DOM and WebGL under a single coordinate system. Borrowing concepts from modern game development, Famous structures applications in a scene graph hierarchy that makes manipulating HTML and WebGL together simple and programatic.

FRAK engine

FRAK engine is a JavaScript library/API for crating interactive 3D applications using WebGL. The purpose of the library is to provide an API for making easier developing 3D content for the web, games and other interactive applications. Basic features are finished and the engine is used in some real projects, but there is still a lot of generalized testing to do. Editor is still under development.

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.

GlowScript

GlowScript enables even novice programmers to create 3D WebGL animations in JavaScript quickly and easily. For example, the one-line program, "box()", produces a cube that can be rotated and zoomed. There is extensive documentation and you can run many illustrative examples. Here is an overview.

Goo Create

Goo Create is a framework for professional users who want a complete online graphical pipeline.

Inka3D

Inka3D is an export plugin for Autodesk Maya. A wide range of features is supported including mel expressions, driven keys, shading networks, lighting, skinning and particles. All exported Maya attributes such as positions, rotations, scales, colors or even user defined extra attributes can be controlled using JavaScript.

Iquix.js

Iquix is a proprietary JavaScript library that ranges 3D vector graphics, computational geometry, physical simulation, artificial intelligence, multi-thread execution as well as other functionalities. Its drawing module is able to work both with WebGL and canvas 2D rendering contexts. Obviously the performance when using canvas 2D is less than that when using WebGL but, at least, it allows to handle 3D geometries in any device. Iquix is the framework used to develop the free online CAD application LAI4D.

J3D

J3D is a WebGL based 3D engine. It consists of a Javascript rendering engine and a C#/Unity3d scene exporter.

Jax

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

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

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

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.

Lightgl.js

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

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.

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.

Oak3D

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 SDK

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

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. VehicleEditor Sketchfab

Parallax

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

PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development.

PlayCanvas

PlayCanvas is a cloud-based game development platform for 3D games. A demo is available.

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).

StormEngineC

StormEngineC is a 3D Graphics library written on JavaScript, open source, which provides an easy way to load objects in OBJ format and adding the physical simulation for these. contains more features as sunlight, spot lights, shadows, SSAO.

stack.gl

stackgl is an open software ecosystem for WebGL, built on top of browserify and npm. Inspired by the Unix philosophy, stackgl modules "do one thing, and do it well".

taccGL

taccGL is an open source javascript class library for general purpose HTML5+CSS pages providing close integration of WebGL, CSS, and HTML, i.e. taccGL can animate integrated scenes of HTML+CSS elements and 3D objects with depth buffering, lighting, and shadows; map HTML elements on 3D objects; or align 3D objects with HTML elements. Transitions include moving, accelerating, rotating, fading, or processing with customized shaders. Because animated content can be CSS formatted HTML, the library is very easy to be used by HTML+CSS developers to animate classic, responsive and mobile pages. taccGL adapts to slower (including mobile) devices by gracefully disabeling features and has a restricted fall back to canvas 2D, so that animated pages can run on many HTML 5 browsers. Tutorial: http://www.taccgl.org/tutorial/ GitHub: https://github.com/HEI-Informationssystems-GmbH/taccgl

TDL

TDL is a low-level JavaScript library that scarifies features for speed. It was used to create many of the samples at webglsamples.org 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.

Physijs plugin - Physijs brings a very easy to use interface to the three.js framework.

Unity 5

Unity 5 now supports WebGL export. WebGL Demo is available.

Unreal 4

Unreal Engine 4 is a suite of integrated tools for game developers to design and build games and, just like Unity, it supports HTML5 and WebGL exporting from the latest version (4.7) on.

Voxel.js

Voxel is an open source game-building toolkit for modern web browsers focused on Voxel games like Minicraft. A demo is available.

WebGL Google Web Toolkit bindings

There are currently three under development:

Wt WGLWidget

Wt's WGLWidget offers the WebGL API to the server-side C++ programmer. In line with the other Wt classes, the API is widget-centric and the library copes with the typical web-aspects. Wt may be especially interesting to projects written in C++ (or C) for performance or legacy reasons, that are to be ported to the web. Wt's approach to WebGL is flexible enough to allow for matrices to be modified in JavaScript on the browser, which yield excellent performance results for e.g. interactive camera transformations.

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.

Utilities & Debug Helpers

GLSL Sandbox

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.

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).

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.

Professional WebGL Programming

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
Textures
Lighting
WebGL performance optimizations

OpenGL ES 3.0 Programming Guide

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.

An introduction to WebGL

Introductory article on WebGL from Opera's developer site.

WebGL Programming Guide - in French only

This programming guide is framework agnostic and concerns both webgl API and main 3D algorithms.

WebGL Academy - interactive tutorials

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

How to capture WebGL to PNGs effectively for dozens of GBs of frames, using a sandboxed filesystem, by Steven Wittens

Proof of concept browser based distributed video render system, by Joshua Koo

Presentations & Videos

See the separate Wiki topic on WebGL Presentations from Recent Conferences.

Examples

STLFinder - The free 3d models search engine

Search for free 3d models from major repositories and get their files quickly.

Yobi3D - 3D model search engine

Search for 3D models on the internet and see the results in 3D.

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

Examples powered by Blend4Web

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

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.

WebGL examples

Simulations on GPU Linear and nonlinear waves. Solitons. Schrödinger equation. N-body. Ink droplet dynamics.

Crystal models

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.

3D Minigolf

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

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.

Sand Toy: Another Particle Experiment

Particles experiment with 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.

Sketchfab

Publish interactive 3D content online using WebGL

maze game

3D Maze game.

WebShader - from Mistal Research, Inc.

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.

User Contributions