User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome WebGL

A curated list of awesome WebGL libraries, resources and much more

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Nov. 26, 2020, 6:09 a.m.

Thank you sjfricke & contributors
View Topic on GitHub:
sjfricke/awesome-webgl

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Articles

Blog Series

🎓 Daily WebGL tutorials

169
3
1y 119d
n/a

Many blogs on different tricks and techniques.

This is the blog for the book Real-Time Rendering.

This is the blog for the book WebGL Insights.

Books

Website for WebGL Insights

32
40
3y 4m
n/a

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.

by Andreas Anyuru - Everything you need to know about developing hardware-accelerated 3D graphics with 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.

by Diego Cantor and Brandon Jones - For JavaScript developer who wants to take the plunge into 3D web development via WebGL.

by Mitch Williams - For web designer looking to expand your knowledge of 3D graphics concepts and broaden your existing skill set.

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

GLSL Editors

Online fractal explorer allowing you to explore 2D and 2D fractal.

Online live editor for fragment shaders.

Fragment shader sandbox supporting glslify.

Most popular live editor for fragment shaders.

WebGL Shader Editor and Composer.

Live GLSL shader editor, viewer and validator.

Dependency free shader editor featuring inline error logs, auto completions, models and textures loading.

References

A conformant OpenGL ES implementation for Windows, Mac, Linux, iOS and Android.

1.85K
366
5d
n/a

The Official Khronos WebGL Repository

1.81K
574
1d
MIT

Group who's goal is to help bring high-performance Virtual Reality to the open Web.

Known bugs in graphics drivers affect the conformance suite, and consequently, portability of code.

WebGL 1.0 API Quick Reference Card for printing.

All the detailed information about WebGL.

Talks

List presented by Khronos of various WebGL related presentations.

Talk at Google I/O 19 from Ricardo Cabello (MrDoob).

Tools/Debugging

Agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes.

Tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier.

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.

Way to view the details of what your browser supports for WebGL.

Interactive dashboard showing the support for WebGL features in different browsers and devices.

Attempts to load one of every texture format supported by WebGL, intended to quickly show which formats your browser/device supports.

Set of libraries, tools, and visualizers for the tracing and investigation of complex web applications.

Chrome Specific Tools/Debugger

Google Chrome DevTools extension to live edit WebGL GLSL shaders

520
48
4y 7m
MIT

A helpful Chrome extension for WebGL development

858
44
1y 7m
MIT

Explore and Troubleshoot your WebGL and WebGL2 scenes easily.

Firefox Specific Tools/Debugger

Quick tutorial how to use Firefox's developer tools to debug WebGL Shaders.

The official list of all of Firefox's debugger tools.

Quick tutorial how to use Firefox's developer tools to debug WebGL Shaders.

Tutorials

Concepts behind real time directional light shadow mapping.

Khronos' tutorial how to get up and running with WebGL.

Mozilla Foundation guide to getting started with WebGL.

Tutorials Point set of article to get you familiar with WebGL terms.

Tutorials from the author of WebGL Up and Running.

How to use a blendmap to multitexture a terrain.

Create particle effects by applying a technique called billboarding.

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

Simplified online IDE with automatic indentation, syntax highlighting for HTML, Javascript, GLSL and Python. You can run your code and download your projects.

Series of online tutorials with code samples and live demonstrations.

Interactive workshop to get you up and running with WebGL.

Videos

Series of lecture style video tutorials from Indigo Code on YouTube.

Articles

Look into the new features added in WebGL 2.

Presentation by Zhenyao Mo, Ken Russell of Google during SIGGRAPH Asia 2015.

Information the support for WebGL 2 starting with Firefox 51.

Blog post about getting started with WebGL 2.

Blog post about whats new and cool in WebGl 2.

References

WebGL 2.0 API Quick Reference Card for printing.

Chart to show current browsers supporting WebGL 2

Tutorials

Rendering algorithms implemented in raw WebGL 2.

335
53
2y 14d
MIT

Series of online tutorials with code samples and live demonstrations.

Great source of many different WebGL 2 work with very good commenting.

Videos

Blog Series

WebVR focused blog from makers of Firefox.

Platforms

Webpages as collaborative 3D webspaces interconnected by portals.

References

Shows support by browser, headset, and OS.

Mozilla's official WebVR page.

Curated list of resources to help create good UX in WebVR.

The official W3C WebVR specs.

2D

JavaScript 2D physics library

2.25K
305
2y 7m
n/a

2D JavaScript Physics Engine

3.83K
238
13d
Zlib

2D HTML5 rendering and layout engine for game development

2K
230
4m
n/a

Open source HTML5 2D game framework for Canvas and WebGL, supports mobile web browsers.

powerful 2D Javascript renderer based on WebGL.

Computer Vision

WebGL accelerated Computer Vision library for browser.

Particles

⚡️ A fast 2kB low-level WebGL API.

1.41K
33
12m
MIT

Maps and Visualizations

Open-source library for world-class 3D globes and maps.

WebGL overlay suite for React providing a set of highly performant data visualization overlays.

WebGL2 powered framework for GPU-powered data visualization and computation.

Data-driven 3D visualization engine on WebGL.

Math

Javascript matrix and vector library for high performance WebGL apps.

Sylvester is a vector, matrix and geometry library for JavaScript.

Sole purpose is to make using the WebGL API less verbose.

Rendering

A Useful WebGL Library for Small Turning (Outdated, Deprecated to use)

106
14
64d
MIT

🎮 A 3D WebGL Rendering Engine developed by Alibaba Group

202
21
8d
MIT

Bridge between Web engineers and CG engineers.

Physics

Direct port of the Bullet physics engine to JavaScript using Emscripten

2.43K
345
71d
n/a

Lightweight and simple 3D physics engine for the web.

WebGL 2

Minimal WebGL 2-only rendering library.

WebVR

[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.

1.3K
185
3y 38d
n/a

A syntax-highlighting text editors that renders to an HTML5 Canvas

437
58
5m
n/a

Web framework for building virtual reality experiences.

Desktop app that let you create and prototype WebVR in interactive way needing no previous coding knowledge.

Simple framework for creating VR with Lua.

Create exciting 360 and VR experiences using React

Others

A lightweight WebGL library

1.26K
138
4y 5m
MIT

A fully customizable webgl shader sandbox to embed in your pages

102
14
1y 7m
GPL-3.0

Turbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.

3.13K
467
4y 11m
MIT

Complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio.

Tool for interactive 3D visualization on the Internet.

WebGL graphic Library for building scalable Web3D applications.

JavaScript library and WebGL 3D engine for creating games and 3D applications.

Javascript library intended to ease the use of WebGL.

WebGL framework based on OpenSceneGraph concepts to interact with WebGL.

JavaScript libraries for computational thinking in Plask/Node.js and WebGL.

Game engine platform to build interactive experiences.

Light declarative and stateless library, functional abstraction for WebGL.

Extensible WebGL-based engine for high-detail 3D visualisation.

Aimed to create an easy to use, lightweight, 3D library.

an artist-friendly toolkit for creating 3D web experiences.

Framework for developing 3D web apps with physics.

Community

Related lists

😎 Awesome lists about all kinds of interesting topics

146.49K
19.19K
4d
CC0-1.0

A curated list of awesome OpenGL libraries, debuggers and resources.

1.36K
132
34d
n/a

Awesome Vulkan ecosystem

1.89K
178
3d
n/a

A list of Game Development resources to make magic happen.

7.7K
753
5d
GPL-3.0

glTF – Runtime 3D Asset Delivery

4.33K
784
3d
n/a

a list of graphic programming resources

1.5K
112
5y 37d
MIT