Track Awesome Webgl Updates Weekly

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

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 sjfricke/awesome-webgl · ⭐ 1.2K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Aug 14 - Aug 20, 2023

Blog Series

• WebGL Image Processing - Covers a range of Image Processing algorithms in WebGL such as Color Correction, Blend Modes, Thresholding, Dithering, Convolution and Film Grain.

May 31 - Jun 06, 2021

References / Firefox Specific Tools/Debugger

• WebXR Device API - The W3C draft API for WebXR.

Apr 19 - Apr 25, 2021

Others / Particles

• OSG.js - WebGL framework based on OpenSceneGraph concepts to interact with WebGL.

Sep 28 - Oct 04, 2020

Articles

• First steps in WebGL - Learn what WebGL is and how it works by drawing a triangle.

May 25 - May 31, 2020

Articles

• Optimizing Scenes for Better WebGL Performance - optimization techniques that proved to work well for creating WebGL-based interactives.

Others / Particles

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

Apr 13 - Apr 19, 2020

Blog Series

• WebGL Best Practices - Mozilla's offical set of best practices.

• WebGL Month (⭐212) – Daily WebGL tutorial for a month.

Jun 03 - Jun 09, 2019

Talks

• Next-Generation 3D Graphics on the Web - Talk at Google I/O 19 from Ricardo Cabello (MrDoob).

Apr 01 - Apr 07, 2019

GLSL Editors

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

Others / Particles

• Pocket.gl (⭐119) - Fully customizable webgl shader sandbox to embed in your pages.

Community / Particles

• Khronos Forum

Dec 24 - Dec 30, 2018

Bug Reporting

• Khronos Github Issue Page (⭐2.5k) - Spec or Conformance related bugs

Tools/Debugging

• Spector.js - Agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes.

Dec 17 - Dec 23, 2018

References

• Khronos Official Wiki - The official wiki for WebGL.

Tools/Debugging / Firefox Specific Tools/Debugger

• Firefox Developer Tools - The official list of all of Firefox's debugger tools.

References / Firefox Specific Tools/Debugger

• Mozilla VR - Mozilla's official WebVR page.

Aug 20 - Aug 26, 2018

Maps and Visualizations / Particles

• Luma.gl - WebGL2 powered framework for GPU-powered data visualization and computation.

WebVR / Particles

• Primrose (⭐529) - Rapidly prototype VR applications in your browser.

Jul 09 - Jul 15, 2018

References

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

Tutorials / Firefox Specific Tools/Debugger

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

Compute (GPGPU) / Computer Vision

• GammaCV - WebGL accelerated Computer Vision library for browser.

Compute (GPGPU) / Particles

• Phenomenon (⭐1.7k) - Very small, low-level WebGL library that provides the essentials to deliver a high performance experience.

Maps and Visualizations / Particles

• Deck.gl - WebGL overlay suite for React providing a set of highly performant data visualization overlays.

WebVR / Particles

• React 360 - Build VR websites and interactive 360 experiences with React.

Others / Particles

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

Jun 25 - Jul 01, 2018

Community / Particles

• Active Meetup Groups
  • San Francisco, CA
  • Mountain View, CA
  • London, United Kingdom
  • New York, NY

Mar 26 - Apr 01, 2018

References

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

• WebGL Extensions - List of extensions for WebGL

Related lists / Particles

• glTF (⭐6.6k) - Runtime 3D Asset Delivery designed for the web.

Mar 12 - Mar 18, 2018

Bug Reporting

• Mozilla BugZilla - Firefox related bugs

Feb 12 - Feb 18, 2018

2D / Firefox Specific Tools/Debugger

• p2.js (⭐2.6k) - 2D rigid body physics engine written in JavaScript.

Physics / Particles

• Ammo.js (⭐3.7k) - Direct port of the Bullet physics engine to JavaScript using Emscripten.

• Cannon.js - Lightweight and simple 3D physics engine for the web.

Feb 05 - Feb 11, 2018

Others / Particles

• ClayGL - WebGL graphic Library for building scalable Web3D applications.

Jan 01 - Jan 07, 2018

Rendering / Particles

• GLBoost (⭐105) - Rendering library for 3D graphic geeks.

• GrimoireGL - Bridge between Web engineers and CG engineers.

• Hilo3d (⭐612) - WebGL rendering engine for 3D games.

Dec 25 - Dec 31, 2017

Bug Reporting

• Chrome Bug Report - Chrome related bugs

• WebKit Bugzilla - Safari related bugs

Tools/Debugging

• Khronos Dev Tools (⭐189) - Useful WebGL developer tools, intended to be used as an ES6 module.

Others / Particles

• Lightgl.js (⭐1.5k) - Lightweight and explict library to help prototype.

Dec 18 - Dec 24, 2017

Others / Particles

• Turbulenz (⭐4.3k) - Modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.

Nov 20 - Nov 26, 2017

Articles / Firefox Specific Tools/Debugger

• What's Coming in WebGL 2.0 - Look into the upcoming features of WebGL 2.

References / Firefox Specific Tools/Debugger

• WebGL 2 Compatible Chart - Chart to show current browsers supporting WebGL 2

WebVR / Particles

• LÖVR - Simple framework for creating VR with Lua.

Others / Particles

• Whitestorm.js - Framework for developing 3D web apps with physics.

Community / Particles

• Facebook

Oct 02 - Oct 08, 2017

GLSL Editors

• GLSLbin - Fragment shader sandbox supporting glslify (⭐2.1k).

• ShaderFrog - WebGL Shader Editor and Composer.

2D / Firefox Specific Tools/Debugger

• Planck.js (⭐4.6k) - 2D physics engine for cross-platform HTML5 game development.

• Stage.js (⭐2.3k) - 2D Library for cross-platform HTML5 game development.

Maps and Visualizations / Particles

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

Sep 25 - Oct 01, 2017

Maps and Visualizations / Particles

• xeogl - Data-driven 3D visualization engine on WebGL.

Others / Particles

• Blend4Web - Tool for interactive 3D visualization on the Internet.

• PlayCanvas - Game engine platform to build interactive experiences.

Sep 04 - Sep 10, 2017

References / Firefox Specific Tools/Debugger

• WebVR Spec - The official W3C WebVR spec (legacy).
  • How to read WebVR Specs

Aug 28 - Sep 03, 2017

References / Firefox Specific Tools/Debugger

• Browser Support - Shows support by browser, headset, and OS.

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

WebVR / Particles

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

Aug 21 - Aug 27, 2017

Tutorials / Firefox Specific Tools/Debugger

• Directional Shadow Mapping - Concepts behind real time directional light shadow mapping.

• Multitexturing using a Blendmap - How to use a blendmap to multitexture a terrain.

• Particle Effects via Billboards - Create particle effects by applying a technique called billboarding.

Aug 14 - Aug 20, 2017

Tools/Debugging

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

Blog Series / Firefox Specific Tools/Debugger

• Mozilla VR Blog - WebVR focused blog from makers of Firefox.

Platforms / Firefox Specific Tools/Debugger

• JanusVR - Webpages as collaborative 3D webspaces interconnected by portals.

Community / Particles

• Stack Overflow

• WebVR Slack

• WebVR Public Mailing List

Jul 17 - Jul 23, 2017

2D / Firefox Specific Tools/Debugger

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

• PixiJS - powerful 2D Javascript renderer based on WebGL.

Jul 03 - Jul 09, 2017

WebVR / Particles

• A-Frame - Web framework for building virtual reality experiences.
  • Awesome-AFrame (⭐1.3k)

Jun 26 - Jul 02, 2017

Tutorials / Firefox Specific Tools/Debugger

• WebGL Workshop - Interactive workshop to get you up and running with WebGL.

Jun 05 - Jun 11, 2017

Others / Particles

• Pex-gl - JavaScript libraries for computational thinking in Plask/Node.js and WebGL.

May 29 - Jun 04, 2017

Videos / Firefox Specific Tools/Debugger

• WebGL 2.0 is Here: What You Need To Know - Khronos Webinar April 2017.
  • Slides

May 01 - May 07, 2017

Blog Series

• Codeflow - Many blogs on different tricks and techniques.

Books

• Professional WebGL Programming by Andreas Anyuru - Everything you need to know about developing hardware-accelerated 3D graphics with WebGL.

• WebGL Insights (⭐38) 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.
  • Book's Personal Site

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

GLSL Editors

• Fractal Lab - Online fractal explorer allowing you to explore 2D and 2D fractal.

• SHDR Editor - Live GLSL shader editor, viewer and validator.

References

• Google Project ANGLE (⭐3k) - Default WebGL backend for both Google Chrome and Mozilla Firefox on Windows platforms.

• WebGL Source Code (⭐2.5k) - Source code to both view and contribute.

Tools/Debugging

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

Tools/Debugging / Chrome Specific Tools/Debugger

• Spector.js Extension - Explore and Troubleshoot your WebGL and WebGL2 scenes easily.

Tutorials / Firefox Specific Tools/Debugger

• Getting Started with WebGL - Mozilla Foundation guide to getting started with WebGL.

• Learning WebGL - Tutorials from the author of WebGL Up and Running.

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

• WebGL Fundamentals - Series of online tutorials with code samples and live demonstrations.

• WebGL 2 Examples (⭐487) - Rendering algorithms implemented in raw WebGL 2.

WebGL 2 / Particles

• PicoGL.js - Minimal WebGL 2-only rendering library.

Apr 24 - Apr 30, 2017

Articles

• WebGL Off the Main Thread - How to use Web Workers in WebGL.

Books

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

Articles / Firefox Specific Tools/Debugger

• WebGL 2 Lands in Firefox - Information the support for WebGL 2 starting with Firefox 51.

• WebGL 2 Basics - Blog post about getting started with WebGL 2.

• WebGL 2 New Features - Blog post about whats new and cool in WebGl 2.

Others / Particles

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

Mar 27 - Apr 02, 2017

Community / Particles

• Public Mailing List

Mar 13 - Mar 19, 2017

Community / Particles

• Reddit

• Twitter

• Freenode IRC

• Google Group

• Google Plus

Feb 20 - Feb 26, 2017

Books

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

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

Talks

• List of Presentations - List presented by Khronos of various WebGL related presentations.

Tools/Debugging

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

Tools/Debugging / Chrome Specific Tools/Debugger

• GLSL Shader Editor Extension (⭐604) - Chrome DevTools extension to help you edit shaders live in the browser.

Tools/Debugging / Firefox Specific Tools/Debugger

• Canvas Debugger - Quick tutorial how to use Firefox's developer tools to debug WebGL Shaders.

• Shader Editor - Quick tutorial how to use Firefox's developer tools to debug WebGL Shaders.

Videos / Firefox Specific Tools/Debugger

• An Introduction to WebGL Programming - 3 hour overview of WebGL by SIGGRAPH University.

• WebGL Tutorials - YouTube - Series of lecture style video tutorials from Indigo Code on YouTube.

Articles / Firefox Specific Tools/Debugger

• WebGL 2 What's New - Look into the new features added in WebGL 2.

Tutorials / Firefox Specific Tools/Debugger

• WebGL 2 Fundamentals- Series of online tutorials with code samples and live demonstrations.

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

Math / Particles

• glMatrix - Javascript matrix and vector library for high performance WebGL apps.

Others / Particles

• GLGE - Javascript library intended to ease the use of WebGL.

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

Related lists / Particles

• awesome (⭐264k) - Curated list of awesome lists.

• awesome-opengl (⭐1.9k) - Curated list of awesome OpenGL libraries, debuggers and resources. Inspired by awesome-... stuff.

• awesome-vulkan (⭐2.9k) - Curated list of awesome Vulkan projects and ecosystem.

• gamedev (⭐12k) - Awesome list about game development.

• graphics-resources (⭐1.7k) - List of graphic programming resources.

Feb 06 - Feb 12, 2017

References

• WebGL Reference Card - WebGL 1.0 API Quick Reference Card for printing.

Tools/Debugging / Chrome Specific Tools/Debugger

• Webgl Insight (⭐907) - Chrome extension WebGL debugging toolkit providing a variety of capabilities.

References / Firefox Specific Tools/Debugger

• WebGL 2 Reference Card - WebGL 2.0 API Quick Reference Card for printing.

Jan 16 - Jan 22, 2017

Videos / Firefox Specific Tools/Debugger

• Fun with WebGL 2.0 - Video tutorial series on getting started with WebGL 2, still actively adding videos.

Others / Particles

• Regl - Light declarative and stateless library, functional abstraction for WebGL.

Jan 02 - Jan 08, 2017

Articles

• Context Loss & Preloading - How to manage WebGL when you run into the dreaded context lost.

Blog Series

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

• WebGL Insights - This is the blog for the book WebGL Insights.

GLSL Editors

• GLSL Sandbox - Online live editor for fragment shaders.

• Shader Toy - Most popular live editor for fragment shaders.

References

• WebGL Spec Sheet - All the detailed information about WebGL.

Tools/Debugging

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

Tutorials / Firefox Specific Tools/Debugger

• Get Started Tutorial - Khronos' tutorial how to get up and running with WebGL.

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

Articles / Firefox Specific Tools/Debugger

• WebGL 2 SIGGRAPH Asia 2015 - Presentation by Zhenyao Mo, Ken Russell of Google during SIGGRAPH Asia 2015.

References / Firefox Specific Tools/Debugger

• WebGL 2 Spec Sheet (Editor Draft) - All the detailed information about WebGL 2.

Math / Particles

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

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

Others / Particles

• Three.js - Aimed to create an easy to use, lightweight, 3D library.