0:00 Intro
1:24 What is a shader?
3:37 Setting up shaders in P5js
5:58 GLSL data types
7:00 Vectors
8:58 Attributes, Uniforms and Varying
10:19 Barebones fragment shader
11:00 Vertex shader
14:57 Fragment shader revisited
15:30 Gradients
16:45 FragCoord tangent
18:28 Mix function
21:22 Setting uniforms
22:43 Uniform images (sampler2D)
24:58
25:12 Uniform arrays
27:05 Circles and SDFs
31:47 Boolean logic
33:25 Debugging shaders
34:13 Conclusion
Resources:
Inigo Quilez YouTube: @InigoQuilez
Inigo Quilez shader:
Kishimisu YouTube: @Kishimisu
Kishimisu shader:
Types of shaders:
GLSL Data Types: (GLSL)
All available p5js shader attributes and uniforms:
gl_FragCoord:
mix function:
Library:
2D SDFs:
Examples:
All examples:
Vertex shader example:
Fragment shader gradient example:
Fragment shader position example:
Fragment shader image example:
Fragment shader array example:
Fragment shader SDF example:
Fragment shader logic example:
Shaders are an incredibly useful programming tool to have under your belt, especially for creative coding and generative art. They unlock a whole heap of potential, but they’re a bit quirky to learn!
This video covers a lot of the fundamentals and will hopefully set you up well for using shaders in the future!
This is a bit of a long/dense video so be sure to take a break if you need, and you can always watch it more than once to help it all sink in!
This video and its examples use P5js in WEBGL mode, however the concepts are transferable to pretty much any environment that you can use shaders in (some syntax may vary, especially in the CPU code).
Follow me:
Support the channel: @BarneyCodes/join
Twitter:
Reddit:
#shaders #graphics #creativecoding
1 view
111
35
6 months ago 00:00:55 2
Planet Crafter 1.0 OUT NOW - What’s new?
6 months ago 00:04:31 1
3 choses que vous ne saviez pas que votre CLÉ USB pouvait faire
6 months ago 00:05:17 1
The Best Paprika Tomato Chicken Ever Made - One Pan
6 months ago 01:27:50 1
Who Really Runs the World? | The Secret Behind Secret Societies
6 months ago 00:10:01 1
How To Find Winning Products For Dropshipping In 2024 (Full Guide)
6 months ago 02:12:05 1
Learning Blender - A step by step beginner Tutorial for 3D Artists
6 months ago 03:33:33 1
888Hz Place your brain in the frequency of wealth, prosperity & abundanceㅣAbundance Frequency