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

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 - github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Three.js - threejs.org
Three.js Tutorials - sbcode.net/threejs
Discover Three.js - 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

[@supremebeme]

omg youtube algorithm came through clutch here... glad I found you!

[@SuboptimalEng]

Thanks Paul! Now I gotta hope it comes through on all my other videos 😂

[@ffffffffffy]

Best tutorial for shaders hands down! You make it very digestible

[@SuboptimalEng]

Thanks Sharad 🙌🏾

[@prodbyryshy]

i appreciate you spending time on the vertex shader, most tutorials focus on the fragment shader, the vertex shader is also very interesting to me!

[@SuboptimalEng]

Thanks!

[@blokche_dev]

Nice! Thanks for sharing. Short and clear.

[@user-uu9qu9ju2h]

This was a very nice introduction, would love some more parts, thank you

[@SuboptimalEng]

I do have a lot more videos on fragment shaders. You can see my more recent videos!

[@25314354]

Greta tutorial! hope there will be more advanced shader tutorials coming

[@SuboptimalEng]

I already have some on my channel like the audio waveform visualizer!

[@sherrywang8748]

Thank you so much! It's really helpful for my assignment.

[@dvoraklovelace2801]

Really nice tutorials, thanks a lot!

[@Jeff-ze6td]

Best tutorial for shaders😆

[@faridul.hassan]

Just Awesome tutorial

[@HuynhLuong227]

GLSL of your is pro, thanks for sharing

[@RoniStudio]

Nice tutorial, Can you make tutorial to apply texture from screen space to uv of a mesh?

[@saubockmcgiver9743]

This really helped me thank you! Might be kind of a silly question, but can you tell me the name of your vscode color scheme?

[@lucasa8710]

this is very nice

[@nskvJaguarzz]

Very cool video! Would you be able to use varying to pass the mouse position into shader and make it interactive?

[@SuboptimalEng]

You should be able to pass in mouse coordinates as uniform variables because they come from the web application. Once you do that, they will be available in both vertex and fragment shaders.

[@sandeepGupta-ud2ns]

amazing

[@yufengxiao9796]

谢谢！

[@SuboptimalEng]

Thanks Yufeng!

[@ahmadsaerozi6688]

Hi, are you know how to make shader material can receive shadow?

[@roddlez]

If your goal is to move towards being able to build a metaverse client, I suggest that you attempt to make a data-driven 3D engine. Currently, these demos have hard-coded scenes where the 3D meshes, shaders, etc are programmed directly into the app.
I suggest that your next step should be choosing (or creating) either a data format or high-level language and then generating the scene from that (this is truly the big step from "I can make 3D appear on screen" to "this is a graphics engine.")
Adding support for shaders to that will also be nice; for a minimally viable product, you could just have a diffuse shader that samples from an image file, and later on add support for something like PBR (physics-based rendering catches a fairly good chunk of the materials that skilled artists will use).
The next step is providing support for interactivity to those 3D elements (with javascript), and later on down, support for a user's avatar (user presence within the scene and interaction), and then the harder work comes with network support (separation of client and server) plus object synchronization.
If you can tackle all that, pat yourself on the back, you have a minimally viable metaverse engine.

[@SuboptimalEng]

Haha, at this point I might as well just use Unity and export to WebGL.