class-08.md

Class 8

🛠️ Shaders

Platforms & tools

• The Book of Shaders (+ Editor)
  • A comprehensive guide to shaders, highly recommended
  • Github contributions
• ISF (Interactive Shader Format)
  • ISF Editor
  • Intro to ISF
  • ISF files for VJ apps
• glslsandbox.com
  • Livecodeable intro to shaders
• Shadertoy
  • The motherlode of shaders. Both awesome and educational
  • Getting started
• Vertex Shader Art
• shaderpark.com
• Shader Doodle
  • Examples
• cables.gl (intro)
  • A comprehensive (and free!) tool for building WebGL experiences with a node-based interface, similar to TouchDesigner
• TouchDesigner
  • Integrates GLSL shaders in a node-based environment (requires Desktop app)
• vvvv
• KodeLife
• F3 App
  • Fragment shader live coding app
• GraphToy
  • Amazing tool by Inigo Quilez, the master of shaders

Using GLSL shaders in p5js

• Built-in p5js shader support
  • p5js Shaders
  • createShader()
  • createFilterShader()
  • shader()
    • Example: applying a shader to a shape
  • filter()
• p5.buildGeometry()
  • Buffer geometry basic example
  • Cache your WEBGL drawing calls to be (sometimes drastically) more efficient
• p5.framebuffer()
  • Example: feedback effect
  • Offscreen rendering for compositing effects

Educational resources

• The Little Grasshopper (Tutorial series)
• Three.js & Shaders
• thndl: WebGL from Scratch - Interactive Intro to Graphics Programming
• WebGL2 Fundamentals
• WebGL + Shaders tutorials
• Learning shaders in three.js
• Paul Malin - Shadertoy demos & tutorials
• GPU Optimization for GameDev
• WebGL Fluid Simulation
  • Single-file WebGL 2 rewrite
• Codrops: Fun with WebGL2.0
• Shaderific - iOS Shader Editor
• Learning Modern 3D Graphics Programming

Advanced shader resources

• Raymarching Toolkit for Unity
• Inigo Quilez Classics
• Learn OpenGL
• Real-Time Rendering Resources
• 3D Game Shaders For Beginners

Demoscene

• Pouet
  • Fermi paradox - 64KB, by Mercury
• Demoscene - The Art of the Algorithms
• Memories of Fractal Landscapes

📝 Homework:

Read:

• What is a particle system?
• Signed Distance Field Resources
• A trip through the Graphics Pipeline
• Casual Introduction to Low-Level Graphics Programming
• Computational complexity of GPGPU

Watch:

• Shader Coding Introduction
• An introduction to Shader Art Coding
• Shaders and Textures with p5.js and WebGL
• Edan Kwan - Building Engaging WebGL Experiences

Build something with shaders

• Recommended starter project:
  • Recreate this animated gradient from Justin's 2020-10-12 lecture
    • Video recording - see 1:02:00 mark
• Other ideas
  • Build an interactive or animated shader to use as a background for one of your previous sketches
  • Use the webcam as a texture and create an effect with the ISF Editor
  • Use ilter() or createFilterShader() in p5js to make post-processing effects
  • Build your own particle system
  • Remix a shader that you find interesting on Shadertoy

📋 Review code

• Present your audio sketches