olange / learning-webgl

Learning using WebGL, Three.js and Babylon.js – articles, useful resources, courseware, personal notes

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
  • WebGL Fundamentals
  • WebGL How It Works
  • WebGL Shaders and GLSL
  • WebGL Image Processing
  • WebGL Image Processing Continued
  • WebGL - Less Code, More Fun
  • WebGL - Scene Graph
  • WebGL 3D Geometry - Lathe
  • WebGL Resizing the Canvas
  • WebGL and Alpha
  • WebGL - Rasterization vs 3D libraries
  • WebGL Anti-Patterns
  • 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.

learning-webgl's Issues

Workshop · Shader Programming Primer

Shader Programming Primer: Real-Time Animation and Effects with GLSL
Mapping Festival 2019 · 23.05.2019 · Leander Herzog · Fonderie Kugler, Genève

Actions

• Create folder and README for workshop DONE 23.05 OL

Experiment 01 · Three in a WebComponent

Experiment 00 · Project template with Three.js

Experiment 04 · Refactor WebComponents to extract generics

Extract the generics of setting up a 3D scene from the WebComponents and isolate them in Mixins and dedicated non-visible components:

• Create canvas in three-app
• Have three-app register the THREE library in window context
• Create scene in three-scene
• Create camera in three-camera
• Call update() method automatically (setup requestAnimationFrame() in a mixin)

Experiment 02 · Three in many WebComponents

Experiment 03 · Layers

See also: Three.js › Examples › Modifiers › TessellateModifier