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 p5.filterShader
25:12 Uniform arrays
27:05 Circles and SDFs
31:47 Boolean logic
33:25 Debugging shaders
34:13 Conclusion

Resources:
Inigo Quilez YouTube: [ Ссылка ]
Inigo Quilez shader: [ Ссылка ]

Kishimisu YouTube: [ Ссылка ]
Kishimisu shader: [ Ссылка ]

Types of shaders: [ Ссылка ]
GLSL Data Types: [ Ссылка ]
All available p5js shader attributes and uniforms: [ Ссылка ]
gl_FragCoord: [ Ссылка ]
mix function: [ Ссылка ]
p5.filterShader 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: [ Ссылка ]
Twitter: [ Ссылка ]
Reddit: [ Ссылка ]

#shaders #graphics #creativecoding

свернуть