Awesome WebGL 
This is a curated list of awesome WebGL libraries, resources and much
more.
What is WebGL
WebGL (Web Graphics Library) is a JavaScript API for rendering
interactive 3D computer graphics and 2D graphics within any compatible
web browser without the use of plug-ins. WebGL is integrated completely
into all the web standards of the browser allowing GPU accelerated usage
of physics and image processing and effects as part of the web page
canvas.
WebGL elements can be mixed with other HTML elements and composited
with other parts of the page or page background. WebGL programs consist
of control code written in JavaScript and shader code that is executed
on a computer’s Graphics Processing Unit (GPU).
Contents
WebGL
All things dealing with WebGL
WebGL sub-categories
Articles
WebGL articles and/or blog posts (non-tutorials)
Blog Series
Blog series of WebGL topics
- Codeflow - Many
blogs on different tricks and techniques.
- Real-Time
Rendering - This is the blog for the book Real-Time
Rendering.
- WebGL
Best Practices - Mozilla’s offical set of best practices.
- WebGL Insights -
This is the blog for the book WebGL Insights.
- WebGL Month –
Daily WebGL tutorial for a month.
- WebGL Image
Processing - Covers a range of Image Processing algorithms
in WebGL such as Color Correction, Blend Modes, Thresholding, Dithering,
Convolution and Film Grain.
Books
Popular books about WebGL
- Interactive
Computer Graphics: A Top-Down Approach with WebGL by Edward
Angel and Dave Shreiner - Suitable for
undergraduate students in computer science and engineering, for students
in other disciplines who have good programming skills, and for
professionals interested in computer animation and graphics using the
latest version of WebGL.
- Professional
WebGL Programming by Andreas Anyuru - Everything
you need to know about developing hardware-accelerated 3D graphics with
WebGL.
- Programming
3D Applications with HTML5 and WebGL by Tony Parisi
- Create high-performance, visually stunning 3D applications for the
Web, using HTML5 and related technologies such as CSS3 and WebGL—the
emerging web graphics standard.
- WebGL
Beginner’s guide by Diego Cantor and
Brandon Jones - For JavaScript developer who wants to
take the plunge into 3D web development via WebGL.
- WebGL
Hotshot by Mitch Williams - For web designer
looking to expand your knowledge of 3D graphics concepts and broaden
your existing skill set.
- WebGL
Insights by Patrick Cozzi - Presents real-world
techniques for intermediate and advanced WebGL developers by assembling
contributions from experienced WebGL engine and application developers,
GPU vendors, browser developers, researchers, and educators.
- WebGL
Programming Guide: Interactive 3D Graphics Programming with WebGL by
Kouichi Matsuda and Rodger Lea - WebGL
Programming Guide will help you get started quickly with interactive
WebGL 3D programming, even if you have no prior knowledge of HTML5,
JavaScript, 3D graphics, mathematics, or OpenGL.
Bug Reporting
Reporting bugs helps everyone in long run
GLSL Editors
Online GLSL Editors
NOTE: WebGL
must conform to The OpenGL ES Shading Language, Version 1.00
Official
Specs for GLSL Version 1.00
Official
Specs for Open ES Version 2.0.25
- Fractal Lab -
Online fractal explorer allowing you to explore 2D and 2D fractal.
- GLSL Sandbox - Online live
editor for fragment shaders.
- GLSLbin - Fragment shader sandbox
supporting glslify.
- Shader Toy - Most popular
live editor for fragment shaders.
- ShaderFrog - WebGL Shader
Editor and Composer.
- SHDR Editor - Live GLSL shader
editor, viewer and validator.
- ShaderExpo -
Dependency free shader editor featuring inline error logs, auto
completions, models and textures loading.
References
WebGL references
Talks
WebGL related talks
Tools for development and debugging WebGL
- Khronos Dev
Tools - Useful WebGL developer tools, intended to be used as an ES6
module.
- Spector.js - Agnostic
JavaScript framework for exploring and troubleshooting your WebGL
scenes.
- WebGL
Inspector - Tool inspired by gDEBugger and PIX with the goal of
making the development of advanced WebGL applications easier.
- WebGl Playground
- The editor lets you work on the JavaScript code and the GLSL
vertex/fragment shaders (if you have any) at the same time in a
convenient way. Everything is organized, formatted and highlighted
properly, just as you would like.
- WebGL Report - Way to view
the details of what your browser supports for WebGL.
- WebGL Support Stats -
Interactive dashboard showing the support for WebGL features in
different browsers and devices.
- WebGL Texture
Tester - Attempts to load one of every texture format supported by
WebGL, intended to quickly show which formats your browser/device
supports.
- Web
Tracing Framework - Set of libraries, tools, and visualizers for the
tracing and investigation of complex web applications.
- Canvas
Debugger - Quick tutorial how to use Firefox’s developer tools to
debug WebGL Shaders.
- Firefox
Developer Tools - The official list of all of Firefox’s debugger
tools.
- Shader
Editor - Quick tutorial how to use Firefox’s developer tools to
debug WebGL Shaders.
Tutorials
Online WebGL Tutorials (non-video)
Videos
WebGL Related Videos
WebGL 2
Information about the upcoming WebGL 2 specs
Anything pertaining to WebGL in general is found in the WebGL section
WebGL 2 sub-categories
Articles
WebGL 2 articles and/or blog posts (non-tutorials)
References
WebGL 2 references
Tutorials
Videos
WebGL related Videos
WebVR
Information about different parts of the new and upcoming WebVR
ecosystem
All items related to more developers and less on where to find WebVR
content as entertainment
WebVR sub-categories
Articles
WebVR articles and/or blog posts (non-tutorials)
Blog Series
Maintained blog series of WebVR focused topics
WebVR designed platforms to experience
- JanusVR - Webpages as
collaborative 3D webspaces interconnected by portals.
References
WebVR references
Libraries
More
detailed information about the different libraries can be found in the
Libraries directory.
2D
- p2.js - 2D rigid
body physics engine written in JavaScript.
- Phaser - Open source HTML5 2D game
framework for Canvas and WebGL, supports mobile web browsers.
- PixiJS - powerful 2D Javascript
renderer based on WebGL.
- Planck.js - 2D
physics engine for cross-platform HTML5 game development.
- Stage.js - 2D
Library for cross-platform HTML5 game development.
Compute (GPGPU)
Computer Vision
- GammaCV - WebGL accelerated
Computer Vision library for browser.
Particles
- Phenomenon -
Very small, low-level WebGL library that provides the essentials to
deliver a high performance experience.
Maps and Visualizations
- Cesium - Open-source library for
world-class 3D globes and maps.
- Deck.gl - WebGL overlay suite for
React providing a set of highly performant data visualization
overlays.
- Luma.gl - WebGL2 powered framework
for GPU-powered data visualization and computation.
- xeogl - Data-driven 3D visualization
engine on WebGL.
Math
- glMatrix - Javascript matrix and
vector library for high performance WebGL apps.
- Sylvester - Sylvester is
a vector, matrix and geometry library for JavaScript.
- TWGL - Sole purpose is to make
using the WebGL API less verbose.
Rendering
- GLBoost -
Rendering library for 3D graphic geeks.
- GrimoireGL - Bridge between Web
engineers and CG engineers.
- Hilo3d - WebGL
rendering engine for 3D games.
Physics
- Ammo.js - Direct
port of the Bullet physics engine to JavaScript using Emscripten.
- Cannon.js -
Lightweight and simple 3D physics engine for the web.
WebGL 2
- PicoGL.js -
Minimal WebGL 2-only rendering library.
WebVR
- A-Frame - Web framework for
building virtual reality experiences.
- Hologram - Desktop app that let
you create and prototype WebVR in interactive way needing no previous
coding knowledge.
- LÖVR - Simple framework for creating
VR with Lua.
- React 360 -
Build VR websites and interactive 360 experiences with React.
- Primrose -
Rapidly prototype VR applications in your browser.
Others
- Babylon.js - Complete
JavaScript framework for building 3D games with HTML5, WebGL and Web
Audio.
- Blend4Web - Tool for
interactive 3D visualization on the Internet.
- ClayGL - WebGL graphic Library for
building scalable Web3D applications.
- CopperLicht -
JavaScript library and WebGL 3D engine for creating games and 3D
applications.
- GLGE - Javascript library
intended to ease the use of WebGL.
- Lightgl.js -
Lightweight and explict library to help prototype.
- OSG.js -
WebGL framework based on OpenSceneGraph concepts to interact with
WebGL.
- Pex-gl - JavaScript
libraries for computational thinking in Plask/Node.js and WebGL.
- PlayCanvas - Game engine
platform to build interactive experiences.
- Pocket.gl -
Fully customizable webgl shader sandbox to embed in your pages.
- Regl - Light declarative and
stateless library, functional abstraction for WebGL.
- Scene.js - Extensible WebGL-based
engine for high-detail 3D visualisation.
- Three.js - Aimed to create an
easy to use, lightweight, 3D library.
- Turbulenz -
Modular 3D and 2D game framework for making HTML5 powered games for
browsers, desktops and mobile devices.
- Verge3D - an
artist-friendly toolkit for creating 3D web experiences.
- Whitestorm.js - Framework for
developing 3D web apps with physics.
Similar awesome lists
- awesome -
Curated list of awesome lists.
- awesome-opengl -
Curated list of awesome OpenGL libraries, debuggers and resources.
Inspired by awesome-… stuff.
- awesome-vulkan
- Curated list of awesome Vulkan projects and ecosystem.
- gamedev -
Awesome list about game development.
- glTF - Runtime 3D
Asset Delivery designed for the web.
- graphics-resources
- List of graphic programming resources.
Contributing
Please see CONTRIBUTING
for details.
Testing
Travis CI testing automation thanks to awesome_bot!
License
To the extent possible under law, Spencer Fricke has waived all
copyright and related or neighboring rights to this work.