Learning WebGL, GLSL and Three.js

Articles, useful resources, courseware, personal notes

Workshops

• Shader Programming Primer: Real-Time Animation and Effects with GLSL
  Mapping Festival 2019 / Workshop 6 · 23.05.2019 10h–19h
  by Leander Herzog · Fonderie Kugler, Genève

Codelabs

• Texturing a video with a moire pattern · ShaderToy by Olivier Lange, Leander Herzog & Nicola Papale
• First steps with WebGL and Three.js first steps and experiments, inspired by the slides
  of David Lyons (see tutorials hereafter)

Experiments

• 01 · Three and Web Components Three.js animation in a web component
• 02 · Three and embedded Web Components Three.js animations in embedded web components
• 03 · Three and plane layers Three.js animation of plane layers, with holes, rotating over each other

Tutorials

• The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe
• OpenGL Introduction by Alexander Overvoorde
• WebGL Fundamentals (Greggman, 2012–2018 ongoing) comprehensive collection of articles about WebGL, explained step by step
  • [x] WebGL Fundamentals
  • [x] WebGL How It Works
  • [x] WebGL Shaders and GLSL
  • [x] WebGL Image Processing
  • [x] WebGL Image Processing Continued
  • [x] WebGL - Less Code, More Fun
  • [x] WebGL - Scene Graph
  • [x] WebGL 3D Geometry - Lathe
  • [x] WebGL Resizing the Canvas
  • [x] WebGL and Alpha
  • [x] WebGL - Rasterization vs 3D libraries
  • [x] WebGL Anti-Patterns
  • [x] TWGL, A tiny WebGL helper library › Examples
• WebGL2 Fundamentals (Greggman, 2012–2018 ongoing) the same recipe as WebGL Fundamental: comprehensive, high-quality articles, well explained, learning step by step
• Intro to WebGL with Three.js (David Lyons, 10-11.2014)
  slides | vidéo 10.2014 18mn. | vidéo 11.2014 43mn. | sources

Books

• Programming 3D Applications with HTML5 and WebGL — 3D Animation and Visualization for Web Pages by Tony Parisi, O'Reilly, 2014

Articles

• ECMAScript modules in browsers (Jake Archibald, 02.05.2017)
• A Primer on Bézier Curves A free, online book for when you really need to know how to do Bézier things
• Nvidia Developer › GPU Gems 3 › Chapter 25. Rendering Vector Art on the GPU (Charles Loop & Jim Blinn, Microsoft Research) Presents a method for accelerating the rendering of vector representations on the GPU
• Wikipedia › Octree An octree is a tree data structure in which each internal node has exactly eight children. Octrees are most often used to partition a three-dimensional space by recursively subdividing it into eight octants. […]

Useful resources

• Shadertoy A curated collection of shaders from all around the world – source, textures, editor and preview
  (and a vintage version 0.4?)
• The Book of Shaders Editor An online GLSL editor, similar to ShaderToy

Interesting examples

• Three examples › CSS3D › Periodic table (Source) Three.js coupled to a CSS 3D renderer
• Tendrils - epok | Trust - Max Cooper Forms in motion, interact spontaneously, knitting emergent interconnections; interactive music visuals for Max Cooper's Emergence project.