V E C 4 - CREATIVE CODING / WEBGL / GLSL

Official repository for https://www.facebook.com/groups/vec4glsl/

This is a curated list about WebGL / GLSL.

Contents

• Maths
• Frameworks
• Libraries
• Tools
• WebGL
• WebGL2
• GLSL editors
• Raymarching
• Text And Fonts
• Books
• References
• Bug Reporting
• Selected Case Studies

Maths

• http://immersivemath.com/ila/index.html - immersive linear algebra course

Frameworks

Relevant frameworks dealing with WebGL

Complete

• ThreeJS - THE WebGl Framework. A cross-browser JavaScript library and Application Programming Interface (API) used to create and display animated 3D computer graphics in a web
  • VedaJS - Framework ThreeJS-based, shader-art oriented
  • Whitestorm - Framework ThreeJS-based
• Babylon - Complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR, WebXR and Web Audio
• Playcanvas - Game engine with online editor (free for public projects)

• RegGL - declarative and stateless webgl

Low-level, more vanilla approach

• TwglJS - using the WebGL API less verbose
• nanoGL - low-level WebGL library
• Phenomenon- low-level WebGL library, particles-addicted

Here some comparisons:

• ThreeJS vs BabylonJS
• ThreeJS vs WhiteStorm

Libraries

Specific libraries

• CurtainsJS - WebGL transitions-focused library.
• glMatrix - Javascript matrix and vector library for high performance WebGL apps.
• Sylvester - Sylvester is a vector, matrix and geometry library for JavaScript.

Tools

Tools for development and debugging WebGL

• Shaping Signals Functions - When writing shader or during any procedural creation process (texturing, modeling, shading, lighting, animating...) you often find yourself modifying signals in different ways so they behave the way you want.
• Graph Toy - Useful toy for shaping functions
• Detect GPU - Classify GPU's based on their benchmark score in order to provide an adaptive experience.
• GLSL Shader Editor Extension - 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 - Chrome extension WebGL debugging toolkit providing a variety of capabilities.
• Khronos Dev Tools - 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.

Chrome Specific Tools/Debugger

• GLSL Shader Editor Extension - 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 - Chrome extension WebGL debugging toolkit providing a variety of capabilities.

Firefox Specific Tools/Debugger

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

WebGL

Resources for learning WebGL / GLSL and relateds

Learning

• The Book of Shaders - Mandatory entry-point for GLSL, by Patricio Gonzalez Vivo
• WebGL Fundamentals - Must-have WebGL journey, by Greggman
• A Beginners Guide - Beginner guide for coding shaders.
• https://www.scratchapixel.com/ - Learn Computer Graphics From Scratch!
• https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/ - Introduction to shaders.
• http://www.webglacademy.com/ - Learn WebGL and 3D algorithmic for free.
• https://www.tutorialspoint.com/webgl/index.htm - For all those readers who want to learn the basics of WebGL programming.
• Into Vertex Shaders - High-level overview of some key aspects of the 3D graphics pipeline, @zadvorsky
• GLSL Shader Tutorial - interactive fragment-shader tutorial
• Webgl Antipatterns tips - WebGL Antipatterns, by Greggman
• Context Loss & Preloading - How to manage WebGL when you run into the dreaded context lost, by Matt DesLauriers *Handling Context Loss & Restore - Another resource about context lost&&restore.
• https://www.youtube.com/watch?v=wHdK1Mtuhm8&list=PLMlvA2UVVK3n26u5O7KFs1RbSV6dAHB0g - Video introduction to some Three.js concepts (ITA)

Advanced (tips and optimizations)

• https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
• http://www.iquilezles.org/www/index.htm - Rendering techniques, useful maths, coding hacks.
• https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/
• https://blog.demofox.org/
• GLSL Lighting Walktrough - provides an overview of the various steps involved in lighting a mesh with a custom GLSL shader.
• WebGL & Mask composition by @zadvorsky
• Simple Post Processing in ThreeJS - ThreeJS post-processing sample, by @luruke
• GLSL Optimizations - GLSL tips from Khronos
• ShaderToy Unofficial - lots of valuable tips, by FabriceN
  • https://shadertoyunofficial.wordpress.com/2018/04/16/readings-shaders-maths-3d/
  • https://shadertoyunofficial.wordpress.com/2019/01/26/classical-corner-cases/
  • https://shadertoyunofficial.wordpress.com/2019/01/15/case-study-making-dot-pattern-loopless/
• Best Practices from Apple's guide
• https://www.khronos.org/registry/OpenGL-Refpages/
• https://www.ronja-tutorials.com/ - Unity Related articles
• https://alastaira.wordpress.com/2015/08/07/unity-shadertoys-a-k-a-converting-glsl-shaders-to-cghlsl/ - Unity Related articles

GLSL editors

resources / tools/ editors for GLSL prototyping

NOTE: WebGL must conform to The OpenGL ES Shading Language, Version 1.00

Official Specs for GLSL Version 1.00 Official Specs for Open ES Version 2.0.25

• http://www.shadertoy.com From IQ ( Inigo Quilez ) THE place for Shader
• http://glslsandbox.com/ just like ShaderToy, live shader editor
• https://www.vertexshaderart.com/ - like ShaderToy, but dedicated to vertex shader computations, by Greggman
• http://www.interactiveshaderformat.com/ - Originally created by VDMX VJ software, it is a interactive version of GLSL.
• http://www.cdglabs.org/Shadershop/ - From Toby Schachman, interesting approach of visualizing math and glsl functions.
• glslEditor - another GLSL shader editor, by Patricio Gonzalez Vivo
• http://shdr.bkcore.com/ From Thibaut Despoulain - simple live shader editor.
• https://godotengine.org/article/visual-shader-editor-back
• http://syntopia.github.io/Fragmentarium/
• https://www.gsn-lib.org/docs/nodes/ShaderPluginNode.php
• https://hexler.net/software/kodelifes
• https://shadergif.com/
• https://cables.gl/home

WebGL2

resources about WebGL2

• WebGL1 to WebGL2 - WebGL1 to WebGL2 migration.
• WebGL Examples - WebGL2 examples.
• PicoGL.js - Minimal WebGL 2-only rendering library, by Tarek Sherif

Ray Marching

about raymarching

• http://www.michaelwalczyk.com/blog/2017/5/25/ray-marching - Quick tutorial on setting up a basic ray marching shader.
• http://mercury.sexy/hg_sdf/ - A GLSL library for building signed distance functions (SDF), from Mercury demoscene group.

Text And Fonts

how-to/infos about text and fonts rendering in WebGL

• https://webglfundamentals.org/webgl/lessons/webgl-text-html.html
• https://webglfundamentals.org/webgl/lessons/webgl-text-canvas2d.html
• https://webglfundamentals.org/webgl/lessons/webgl-text-texture.html
• https://medium.com/@calebfaith/implementing-msdf-font-in-opengl-ea09a9ab7e00
• https://delphic.me.uk/tutorials/webgl-text
• https://github.com/Jam3/three-bmfont-text/blob/master/docs/sdf.md
• https://stackoverflow.com/questions/25956272/better-quality-text-in-webgl
• https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817
• http://pixelscommander.com/polygon/pixi-sdf-text/demo/
• https://github.com/donmccurdy/msdf-bmfont-web
• https://github.com/Chlumsky/msdfgen

References

WebGL references

• Google Project ANGLE - Default WebGL backend for both Google Chrome and Mozilla Firefox on Windows platforms.
• Khronos Official Wiki - The official wiki for WebGL.

Bug Reporting

Reporting bugs helps everyone in long run

• Chrome Bug Report - Chrome related bugs
• Khronos Github Issue Page - Spec or Conformance related bugs
• Mozilla BugZilla - Firefox related bugs
• WebKit Bugzilla - Safari related bugs

Books

Popular books about WebGL

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

Case Studies

• Curated case-study collection by @luruke