Three.js Shaders (GLSL) Crash Course For Absolute Beginners

Three.js shaders crash course showing you 95% of what you'll ever need to know about shaders.
We'll discuss things like how shaders work, GLSL language, vertex shader, fragment shader, dot product, useful GLSL functions, how to draw stuff and more...

Links Mentioned In The Video:

Extending Threejs Materials:
   • Customize ThreeJS Materials With Shaders  

Git Branches :
https://github.com/visionary-3d/shade...
https://github.com/visionary-3d/shade...
https://github.com/visionary-3d/shade...

Model View Projection (MVP) Article:
https://jsantell.com/model-view-proje...

Perlin Noise Implementation In GLSL :
https://github.com/visionary-3d/noise...

Beginner Three.js Crash Course:
   • Three.js Crash Course For Beginners |...  

Basic Data Types ( for example in C ):
   • #3: Data Types in C Programming | C P...  

Ducky 3D Tutorial:
   • Node-based Organic Animation in Blend...  

Final Project's Source Code:
https://github.com/visionary-3d/shade...

Chapters:
00:00 - Course Overview
00:25 - Shader Explanation
03:48 - Shader Setup
09:36 - GLSL Basics
33:15 - Attributes And Uniforms
45:51 - Model View Projection
49:25 - UVs And Normals
52:35 - Varyings
1:08:48 - Mindset
1:10:45 - Useful GLSL Functions
1:34:37 - Dot Product
1:37:39 - The Fresnel Effect
1:44:40 - Drawing Patterns
1:58:21 - Importing Textures
2:00:48 - Cool Desaturation Effect
2:03:19 - Final Project
2:56:12 - Outro

---------------------

Visionary 3D:

Contact me at Discord: (username):
visionary3d

Follow me:
https://x.com/visionary_3_d