awesome-webgl

WebGL reference

A curated collection of resources and guides for learning and using WebGL in web development

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

GitHub
1k stars
41 watching
90 forks
last commit: over 1 year ago
Linked from 6 awesome lists

awesomeawesome-listglsl-editorslearning-webgllistwebglwebgl-articleswebgl-programmingwebgl-referenceswebgl-spec-sheetwebgl-tutorials

Awesome WebGL / WebGL / Articles
Context Loss & Preloading How to manage WebGL when you run into the dreaded context lost
WebGL Off the Main Thread How to use Web Workers in WebGL
Optimizing Scenes for Better WebGL Performance optimization techniques that proved to work well for creating WebGL-based interactives
First steps in WebGL Learn what WebGL is and how it works by drawing a triangle

Awesome WebGL / WebGL / Blog Series
Codeflow Many blogs on different tricks and techniques
Real-Time Rendering This is the blog for the book
WebGL Best Practices Mozilla's offical set of best practices
WebGL Insights This is the blog for the book
WebGL Month 220 3 months ago – Daily WebGL tutorial for a month
WebGL Image Processing Covers a range of algorithms in WebGL such as Color Correction, Blend Modes, Thresholding, Dithering, Convolution and Film Grain

Awesome WebGL / WebGL / Books
Interactive Computer Graphics: A Top-Down Approach with WebGL by and - 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 - Everything you need to know about developing hardware-accelerated 3D graphics with WebGL
Programming 3D Applications with HTML5 and WebGL by - 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 and - For JavaScript developer who wants to take the plunge into 3D web development via WebGL
WebGL Hotshot by - For web designer looking to expand your knowledge of 3D graphics concepts and broaden your existing skill set
WebGL Insights 38 over 7 years ago by - 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

Awesome WebGL / WebGL / Books / WebGL Insights
Book's Personal Site

Awesome WebGL / WebGL / Books
WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL by and - 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

Awesome WebGL / WebGL / Bug Reporting
Chrome Bug Report Chrome related bugs
Khronos Github Issue Page 2,658 23 days ago Spec or Conformance related bugs
Mozilla BugZilla Firefox related bugs
WebKit Bugzilla Safari related bugs

Awesome WebGL / WebGL / GLSL Editors
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
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

Awesome WebGL / WebGL / References
Google Project ANGLE 3,473 7 days ago Default WebGL backend for both Google Chrome and Mozilla Firefox on Windows platforms
Khronos Official Wiki The official wiki for WebGL
WebVR Community Group Group who's goal is to help bring high-performance Virtual Reality to the open Web
WebGL Errata Known bugs in graphics drivers affect the conformance suite, and consequently, portability of code
WebGL Extensions List of extensions for WebGL
WebGL Reference Card WebGL 1.0 API Quick Reference Card for printing
WebGL Source Code 2,658 23 days ago Source code to both view and contribute
WebGL Spec Sheet All the detailed information about WebGL

Awesome WebGL / WebGL / Talks
List of Presentations List presented by Khronos of various WebGL related presentations
Next-Generation 3D Graphics on the Web Talk at Google I/O 19 from Ricardo Cabello (MrDoob)

Awesome WebGL / WebGL / Tools/Debugging
Khronos Dev Tools 201 almost 2 years ago 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
GLSL Shader Editor Extension 619 over 7 years ago Chrome DevTools extension to help you edit shaders live in the browser
Spector.js Extension Explore and Troubleshoot your WebGL and WebGL2 scenes easily
Webgl Insight 912 about 3 years ago Chrome extension WebGL debugging toolkit providing a variety of capabilities
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

Awesome WebGL / WebGL / Tutorials
Directional Shadow Mapping Concepts behind real time directional light shadow mapping
Get Started Tutorial Khronos' tutorial how to get up and running with WebGL
Getting Started with WebGL Mozilla Foundation guide to getting started with WebGL
Learn WebGL Tutorials Point set of article to get you familiar with WebGL terms
Learning WebGL Tutorials from the author of
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
The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders
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 Workshop Interactive workshop to get you up and running with WebGL

Awesome WebGL / WebGL / Videos
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

Awesome WebGL / WebGL 2 / Articles
WebGL 2 What's New Look into the new features added in WebGL 2
What's Coming in WebGL 2.0 Look into the upcoming features of WebGL 2
WebGL 2 SIGGRAPH Asia 2015 Presentation by Zhenyao Mo, Ken Russell of Google during SIGGRAPH Asia 2015
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

Awesome WebGL / WebGL 2 / References
WebGL 2 Spec Sheet (Editor Draft) All the detailed information about WebGL 2
WebGL 2 Reference Card WebGL 2.0 API Quick Reference Card for printing
WebGL 2 Compatible Chart Chart to show current browsers supporting WebGL 2

Awesome WebGL / WebGL 2 / Tutorials
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
WebGL 2 Examples 535 about 6 years ago Rendering algorithms implemented in raw WebGL 2

Awesome WebGL / WebGL 2 / Videos
Fun with WebGL 2.0 Video tutorial series on getting started with WebGL 2, still actively adding videos
WebGL 2.0 is Here: What You Need To Know Khronos Webinar April 2017

Awesome WebGL / WebGL 2 / Videos / WebGL 2.0 is Here: What You Need To Know
Slides

Awesome WebGL / WebVR / Blog Series
Mozilla VR Blog WebVR focused blog from makers of Firefox

Awesome WebGL / WebVR / Platforms
JanusVR Webpages as collaborative 3D webspaces interconnected by portals

Awesome WebGL / WebVR / References
Browser Support Shows support by browser, headset, and OS
Mozilla VR Mozilla's official WebVR page
UX of VR Curated list of resources to help create good UX in WebVR
WebXR Device API The W3C draft API for WebXR
WebVR Spec The official W3C WebVR spec (legacy)

Awesome WebGL / WebVR / References / WebVR Spec
How to read WebVR Specs

Awesome WebGL / Libraries / 2D
p2.js 2,647 over 2 years ago 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 4,922 5 days ago 2D physics engine for cross-platform HTML5 game development
Stage.js 2,432 about 1 month ago 2D Library for cross-platform HTML5 game development

Awesome WebGL / Libraries / Compute (GPGPU)
GammaCV WebGL accelerated Computer Vision library for browser
Phenomenon 1,778 about 1 year ago Very small, low-level WebGL library that provides the essentials to deliver a high performance experience

Awesome WebGL / Libraries / 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

Awesome WebGL / Libraries / 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

Awesome WebGL / Libraries / Rendering
GLBoost 106 almost 2 years ago Rendering library for 3D graphic geeks
GrimoireGL Bridge between Web engineers and CG engineers
Hilo3d 652 7 months ago WebGL rendering engine for 3D games

Awesome WebGL / Libraries / Physics
Ammo.js 4,183 10 months ago Direct port of the Bullet physics engine to JavaScript using Emscripten
Cannon.js Lightweight and simple 3D physics engine for the web

Awesome WebGL / Libraries / WebGL 2
PicoGL.js Minimal WebGL 2-only rendering library

Awesome WebGL / Libraries / WebVR
A-Frame Web framework for building virtual reality experiences

Awesome WebGL / Libraries / WebVR / A-Frame
Awesome-AFrame 1,340 about 7 years ago

Awesome WebGL / Libraries / WebVR
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 530 8 months ago Rapidly prototype VR applications in your browser

Awesome WebGL / Libraries / 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 1,520 about 2 years ago 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 122 over 5 years ago 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 4,581 over 1 year ago 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

Awesome WebGL / Community
Stack Overflow
Reddit
Facebook
Twitter
Freenode IRC
Khronos Forum
Google Group
Google Plus
Public Mailing List
WebVR Slack
WebVR Public Mailing List

Awesome WebGL / Community / Active Meetup Groups
San Francisco, CA
Mountain View, CA
London, United Kingdom
New York, NY
awesome 334,113 2 days ago Curated list of awesome lists
awesome-opengl 2,172 over 1 year ago Curated list of awesome OpenGL libraries, debuggers and resources. Inspired by awesome-... stuff
awesome-vulkan 3,336 5 months ago Curated list of awesome Vulkan projects and ecosystem
gamedev 13,670 4 days ago Awesome list about game development
glTF 7,192 11 days ago Runtime 3D Asset Delivery designed for the web
graphics-resources 1,800 almost 4 years ago List of graphic programming resources

Backlinks from these awesome lists:

More related projects: