Three.js Shaders Tutorial (part 2/2) | GLSL Shaders with Uniforms and Varying

Опубликовано: 04 Октябрь 2024
на канале: Suboptimal Engineer
11,971
446

In this coding tutorial, we go over the basics of uniforms and varying variables in shaders. We start off by refactoring the GLSL code from the previous Three.js tutorial. Then we learn how to set up uniform variables. After that, we use the uniform variable to update our vertex + fragment shaders. Then we add a varying variable in our vertex shader and pass it to the fragment shader. We finish off by learning about how to use the varying variable in the fragment shader.

📖 Code - https://github.com/SuboptimalEng/thre...
🎥  YouTube -    / suboptimaleng  
🐦 Twitter -   / suboptimaleng  
📸  Instagram -   / suboptimaleng  
💻 GitHub - https://github.com/SuboptimalEng
🌎  Website - https://suboptimaleng.com

== [ Resources ] ==
Three.js - https://threejs.org
Three.js Tutorials - https://sbcode.net/threejs
Discover Three.js - https://discoverthreejs.com

== [ Timestamps ] ==
00:00 Intro to Three.js Shaders
00:29 Refactor GLSL Shader Code
01:17 Set up GLSL Uniforms
03:05 Vertex Shader with Uniform
04:35 Fragment Shader with Uniform
05:24 Varyings in Pixel Shader

== [ Tags ] ==
#suboptimal #threejs #shaders