Making Art With Your Graphics Card
Intro
Hi!
- I'm Oren
- 1st year grad student at ITP NYU
- Started teaching myself about shader programming about 4 months ago
- I did daily creative coding sketches with shaders for 100 days
What we'll cover today
- Why learn shaders?
- How does programming for the GPU differ from other kinds of programming?
- How to read and write simple GLSL shaders
Caveats
- We don't have a lot of time
- Shaders are challenging, and it'll take a while to close the gap between what you want to make and what you're able to do
- Hopefully this workshop will make shaders feel a little more approachable so that you can keep learning on your own
Motivation
Inspiration
Where can you use shaders?
- Creative coding
- Processing
- openFrameworks
- p5.js
- Game development
- Unity
- Three.js
- Live video performance
- Max/MSP/Jitter
- VDMX
The GPU
CPU vs. GPU
- CPU: a few powerful cores, can run several threads
- GPU: 100s or 1000s of small processors, 1000s of threads
- CPU executes code sequentially
- GPU executes code in parallel
Why compute in parallel?
- My Macbook screen is made up of 2560 x 1600 = 4,096,000 pixels
- Re-drawing the screen at 60 fps requires 245,760,000 calculations a second
- Calculating the color for each pixel one-at-a-time is slow
- Computing all pixels at once is fast
CPU vs. GPU
What's a shader?
What's a shader?
- Shaders are programs that run on the GPU
- Fragment shaders set the RGBA color for every pixel on the screen
- They're like functions that take an XY pixel coordinate and return a color
Why are shaders difficult?
- Same program has to run independently for each pixel
- Can't keep track of state over time
- Different way of thinking about code
GLSL
- OpenGL Shading Language
- Programming language for writing shaders
- Syntax is based on the C programming language
OpenGL and WebGL
- OpenGL (Open Graphics Library) is an API that you use to send data from the CPU to the GPU
- OpenGL is used for desktop programs
- WebGL is a JavaScript implementation of OpenGL that runs in the browser
GLSL Examples
Using shaders in your code
Conclusion
Next Steps
- Read the Book of Shaders
- Try using a shader in your creative coding environment of choice
- Do the Fragment Foundry exercises
- Work through Shader School
- Find a cool shader on Shadertoy and try to understand how it works
Further topics for study
- Matrices and transformations
- Tiling and patterns
- Randomness and Perlin noise
- Textures and image/video processing
- Raymarching with signed distance functions for 3D geometry
- Lighting models
- Vertex shaders
Credits & References
- Patricio Gonzalez Vivo's The Book of Shaders
- Craig Pickard's Intro to Shaders Workshop
- Taeyoon Choi's Teaching as Art course