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

Published: 07 May 2022
on channel: 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


Watch video Three.js Shaders Tutorial (part 2/2) | GLSL Shaders with Uniforms and Varying online without registration, duration hours minute second in high quality. This video was added by user Suboptimal Engineer 07 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 11,971 once and liked it 446 people.