WebGL/WebGPU/three.js Resources

Eric runs across WebGL resources and then tend to lose track of them, so he made this page. Feel free to send him suggestions.

Browser-related

Does this browser support WebGL? Test here.
What WebGL extensions does this browser support? Test here, and here, and here.
What browser versions support WebGL? Find out here.
How do I start up my browser for local development? Chrome: --allow-file-access-from-files else check the three.js page or Udacity page.
What's my GPU info on Chrome? Paste in this URL: chrome://gpu/
How do I use native OpenGL instead of ANGLE for Windows Chrome and Firefox? Find out here.
What other command line options are there for Chrome? Find out here.
You just want eye candy? Try here for starters.

Reference Pages

Khronos Reference card
Khronos Wiki.
Blacklist of GPUs that don't run WebGL.
OpenGL ES Shading Language functions, used for WebGL/Three.js shaders.

Forums and News

WebGL Dev List on Google Groups
Twitter: #threejs, #webgl
Reddit: three.js, WebGL

Tools

Spector.js for examining renders and state. Documentation.
about:tracing in Google Chrome, for examining GPU and CPU usage.
Debuggers and profilers, profiling tips, browser editors, Cozzi's list (old)
Firefox Canvas Debugger
Shader compile/link performance
Chrome shader editor
Texture Format Tester
Analyzing traces

Three.js

Homepage (which includes so very much), Lee Stemkoski's demos, Yomotsu examples, Udacity demos and code
Introductory tutorial from an free book, with coding inside the browser.
Quick reference, API, wiki docs, object overview
Thumbnails of examples
useful links page
Demos: beyond three.js's, find more at Learning Three.js, Edan Kwan, Fractal Fantasy, and Autodesk Forge.
Source code
Editor
Intro "live" slideset (and my own fork), basics article.

Courses and Tutorials for WebGL and Three.js

WebGL Fundamentals and WebGL2 Fundamentals have numerous articles on getting started and specific subjects.
The three.js homepage links to The book Discover Three.js has an extensive introduction to three.js online for free.
Udacity three.js MOOC course signup, resources, and syllabus (dead links) - quite old, but the graphics lectures and general three.js knowledge is still valid (I admit a bias, as I designed it).
Barcelona WebGL MOOC course homepage
WebGL Lessons: Three.js Shaders on github
Steven Wittens' lovely computer graphics lessons using Three.js, and WebGL intro demofest
Tarek Sherif's tutorial slide presentation and repository.
SIGGRAPH University introduction to WebGL

WebGL 2

Khronos Reference card
Specification, related OpenGL ES 3.0 specification
How to start using WebGL 2.
New features in WebGL 2.
Samples and examples, and bugs.
PicoGL.js - a minimal WebGL 2 rendering library; tutorial
Fun with WebGL 2.0 - short tutorial videos, code repository, and blog
SIGGRAPH WebGL BOF videos: 2016, 2017, 2018
Brandon Jones' blog
How Cesium creates a WebGL 2 context
Many more articles can be found at Jendrik Ullner's site - search on "webgl"

File Formats

glTF

WebVR

WebVR info page

WebGPU

WebGPU spec
Chrome ships WebGPU
Will Usher's tutorials: Hello world triangle, bind groups
WebGPU Error Handling best practices
Many more articles can be found at Jendrik Ullner's site - search on "webgpu"

Other Frameworks

Shadertoy - play with, test, and share procedural shaders
babylon.js
glslify - for shaders
Polygonjs - node-based shaders and more
PlayCanvas
WebGLStudio.js
A-FRAME - for VR, built atop three.js
CesiumJS - for globes and maps
Still more options
Wikipedia list

Compression

Open3DGC
OpenCTM
Draco

More Links

Just can't get enough? Here are more on WebGL and many other subjects.

Books

An undifferentiated listing of what I've found out there, though not exhaustive - I avoid "web technology" compendiums ("Learn Three.js, WebGL, HTML 5, and everything else in 24 Hours!") and books with no ratings and little information about them. Books are newest to oldest, and those older than five years old have been removed. Some books do come with free sample chapters and code samples (or the whole volume!), and some have extensive samples on Amazon or Google Books, linked.

cover Real-Time 3D Graphics with WebGL 2, Second Edition, by Farhad Ghayour and Diego Cantor, Packt Publishing, October 2018 (Table of Contents, Google Books sample).
cover Learn Three.js, Third Edition, by Jos Dirksen, Packt Publishing, August 2018 (Table of Contents, code repository, Google Books sample).
cover WebGL Gems, by Greg Sidelnikov, Learning Curve, June 2017.
cover download for free WebGL Insights, edited by Patrick Cozzi, CRC Press, July 2015 (book's website, blog), download for free.
cover Interactive Computer Graphics with WebGL (Seventh Edition), by Edward Angel and Dave Shreiner, Addison-Wesley, March 2014 (more info, figures and source code).

Thanks to Patrick Cozzi for collecting many of the links to tools.


Contact: Eric Haines