Awesome WebGL
Last updated
Last updated
This is a curated list of awesome WebGL libraries, resources and much more.
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).
All things dealing with WebGL
WebGL articles and/or blog posts (non-tutorials)
Blog series of WebGL topics
Popular books about WebGL
Reporting bugs helps everyone in long run
Online GLSL Editors
WebGL references
WebGL related talks
Tools for development and debugging WebGL
Online WebGL Tutorials (non-video)
WebGL Related Videos
Information about the upcoming WebGL 2 specs
WebGL 2 articles and/or blog posts (non-tutorials)
WebGL 2 references
WebGL related Videos
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 articles and/or blog posts (non-tutorials)
Maintained blog series of WebVR focused topics
WebVR designed platforms to experience
WebVR references
Active Meetup Groups
Similar awesome lists
- How to manage WebGL when you run into the dreaded context lost.
- How to use Web Workers in WebGL.
- optimization techniques that proved to work well for creating WebGL-based interactives.
- Learn what WebGL is and how it works by drawing a triangle.
- Many blogs on different tricks and techniques.
- This is the blog for the book Real-Time Rendering.
- Mozilla's offical set of best practices.
- This is the blog for the book WebGL Insights.
– Daily WebGL tutorial for a month.
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 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.
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.
- Chrome related bugs
- Spec or Conformance related bugs
- Firefox related bugs
- Safari related bugs
NOTE:
- Online fractal explorer allowing you to explore 2D and 2D fractal.
- Online live editor for fragment shaders.
- Fragment shader sandbox supporting .
- 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.
- Default WebGL backend for both Google Chrome and Mozilla Firefox on Windows platforms.
- The official wiki for WebGL.
- 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.
- List of extensions for WebGL
- WebGL 1.0 API Quick Reference Card for printing.
- Source code to both view and contribute.
- All the detailed information about WebGL.
- List presented by Khronos of various WebGL related presentations.
- Talk at Google I/O 19 from Ricardo Cabello (MrDoob).
- Useful WebGL developer tools, intended to be used as an ES6 module.
- 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 DevTools extension to help you edit shaders live in the browser.
- Explore and Troubleshoot your WebGL and WebGL2 scenes easily.
- Chrome extension WebGL debugging toolkit providing a variety of capabilities.
- 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.
- 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.
- 3 hour overview of WebGL by SIGGRAPH University.
- Series of lecture style video tutorials from Indigo Code on YouTube.
Anything pertaining to WebGL in general is found in the section
- Look into the new features added in WebGL 2.
- Look into the upcoming features of 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.
- All the detailed information about WebGL 2.
- WebGL 2.0 API Quick Reference Card for printing.
- Chart to show current browsers supporting WebGL 2
- Series of online tutorials with code samples and live demonstrations.
- Great source of many different WebGL 2 work with very good commenting.
- Rendering algorithms implemented in raw WebGL 2.
- Video tutorial series on getting started with WebGL 2, still actively adding videos.
- Khronos Webinar April 2017.
- WebVR focused blog from makers of Firefox.
- Webpages as collaborative 3D webspaces interconnected by portals.
- Shows support by browser, headset, and OS.
- Mozilla's official WebVR page.
- Curated list of resources to help create good UX in WebVR.
- The W3C draft API for WebXR.
- The official W3C WebVR spec (legacy).
- 2D rigid body physics engine written in JavaScript.
- Open source HTML5 2D game framework for Canvas and WebGL, supports mobile web browsers.
- powerful 2D Javascript renderer based on WebGL.
- 2D physics engine for cross-platform HTML5 game development.
- 2D Library for cross-platform HTML5 game development.
- WebGL accelerated Computer Vision library for browser.
- Very small, low-level WebGL library that provides the essentials to deliver a high performance experience.
- 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.
- 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 library for 3D graphic geeks.
- Bridge between Web engineers and CG engineers.
- WebGL rendering engine for 3D games.
- Direct port of the Bullet physics engine to JavaScript using Emscripten.
- Lightweight and simple 3D physics engine for the web.
- Minimal WebGL 2-only rendering library.
- 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.
- Build VR websites and interactive 360 experiences with React.
- Rapidly prototype VR applications in your browser.
- 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.
- Lightweight and explict library to help prototype.
- 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.
- Fully customizable webgl shader sandbox to embed in your pages.
- 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.
- Modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.
- an artist-friendly toolkit for creating 3D web experiences.
- Framework for developing 3D web apps with physics.
- Curated list of awesome lists.
- Curated list of awesome OpenGL libraries, debuggers and resources. Inspired by awesome-... stuff.
- Curated list of awesome Vulkan projects and ecosystem.
- Awesome list about game development.
- Runtime 3D Asset Delivery designed for the web.
- List of graphic programming resources.
Please see for details.
Travis CI testing automation thanks to !
To the extent possible under law, has waived all copyright and related or neighboring rights to this work.
