How to create animated shaders with three.js

do you know rocket League this was one of my all-time favorite games but I decided to stop to stay mentally healthy but that's not the point of today you can customize your car using the calls there are even animated ones and it's exactly what we are going to try to reproduce [Music] [Music] hello in this video we will discover the scary word of shaders to be able to create very Advanced and cool effects we will learn the followings what is a Shader how to create a custom Shader material with 3js and how to use the lever to debug and change parameters on the Fly what is a Shader a Shader is a program that runs on the GPU we will discover two types of them the vertex shutter its role is to position each vertex of a geometry and the fragment Shader to define the color of each pixel of that geometry let's take a plane it contains four vertices for each vertex and the fragment Shader will be called with many inputs the mesh position rotation scale same for the camera with additional information such as the field of view and the lighting then the program outputs in the final position of this 3D information into a 2d screen this information is then passed on onto the fragment shatter that will be called for each pixel inside that geometry for example you have the X and Y coordinates of the vertices if you take this pixel the fragment Shader will be called with x equals 0.5 and Y equals zero if you take this one the fragment Shader will be called with x equal 1 and y equal 1 and based on those data the fragment Shader will output the color of this very pixel don't worry we will only work with the fragment Shader today before creating our own Shader let me show you when you want to think about using a custom Shader water cell shading like in Zelda Wind Waker the shrinking Zone in fortnite or any Battle Royale game wall hack in kunter strike and of course rocket League decals shaders are everywhere I'm sorry because now you will see the word differently once you clone the repository run the yarn and yarn depth we have a scene already set up with the Cyber truck model ready to be modified and as seen animation I won't cover how to build this scene because if you follow the other react re fiber tutorials I made you already have all the required pieces of knowledge to achieve the same I got the model from hash Camu on sketchfab I reworked it a bit I duplicated the body to create a slightly bigger mesh on top of it to show you how to work with the Shader transparency let's create a Shader we have already been using shaders without knowing it when we use different types of materials a basic material only displayed the mesh form without lighting you can see the car had the same red everywhere while the standard material is more three-dimensional if we add an opacity and that our basic material to transparent we colorize our car while keeping the lighting and Reflections from the real car material below now let's create our Shader material let's copy the default implementation from reactory dry documentation rename it and remove the input parameters for the moment the 3js documentation can help us understand the parameters the first one is an object containing the uniforms data we can pass to the Shader the second is the vertex Shader string and the third is the fragment Shader string let's simplify the fragment Shader code we will get back to it later the x10 method allows us to use the material declaratively using camel case syntax like the other 3js Primitives and let's set our test Shader material instead of the basic one now if we reload we can see it's going from Blue to purple let's have a look at what our fragment does it set the fragment color rgba to a vector 4. it contains the red green blue and opacity information the guv is the data we got from the vertex Shader to make it simpler let's switch to black and white for the moment let's declare a float named strength equals to the y-coordinate create a vector 3 composed of the strands what it does is it sets all values of the vector to the trends we now have Shades from black to white as r g and B are always equal we can use the X instead of the Y on the trends it will change orientation of array gradient instead of coding our shaders inside the Javascript file let's create a shaders folder inside we create a stripes.fragment.glsl and stripes.vertex.glsl this is the file extension for opengl shading language the language used to compile shaders let's copy our existing code into them to have the syntax coloration search for Shader language support in your Visual Studio extension now we import the Shader files rename the Shader to Stripes Shader material replace the strings with the Imports and use the striped shutter material our material now used as the Shader files if you are not using the starter pack you need to install vid plug-in glsl and add the plugin in your vidconfiguration file to build our stripes we will need to apply some functions to our UV coordinates let's start by adding step 0.5 on the Y parameter what it does is if the Y value is below 0.5 strength will be equal to zero and if it's over it will be equal to 1. we don't have a gradient anymore but instead we have the left completely White and the right part completely black to make Stripes from it we need to repeat this effect over the car let's multiply our UV coordinates by 10 to make it 10 times but because we want values between 0 and 1 we use mod for modulo of 1. we now have stripes we can switch to the y-axis and set the multiplier to 42 for a better look we are losing the metallic reflection because we don't handle it and our material cover entirely the real one the last parameter is the transparency let's use mean strength and 0.5 that way we will only have values between 0 when it's black so entirely transparent and 0.5 when it's white so half transparent it doesn't work we need to add the transparent prop on our material now we can see our Shader and the reflection of the material below instead of our hard-coded Alpha and multiplier let's pass parameter to our shaders it's called uniforms that's why it's good to prefix them with a u in the Shader declare U multiplier and U Alpha float uniforms and replace our values it's still working correctly to change them on the fly instead of building a complex UI we can add level Library adding it globally next to our app we can now use everywhere use controls if the first parameter is a string it will create a folder let's name it Stripes inside add Alpha and the multiplier to pass the values to our material we can just add them as props it's now easier to adjust values let's add colors to our stripes we create uniforms with three colors we add color A and B to level it can automatically detect when it's a color and display a Color Picker and let's pass it to our material a color is a vect3 of red green and blue value we declare our uniforms and we create a mix color for our fragment the mix functions return a value between the first and second parameters based on the third parameter as we only display either a color or transparency we can only see our yellow color let's use our multiplied y-coordinate instead of the strength we now have a gradient from the yellow to the red let's use tap and mode to have one stripe on two of each color now we want to animate our Stripes to do so we add a new uniform named u-time we create a reference to our material and in the use frame function we set the uniform to our material with the elapsed time from our scene in the Shader we can divide it into a float uniform let's increase our y-coordinates with the time and use modulo to keep values between 0 and 1. our stripes are now moving correctly we can simplify the color formula as our Stripes move to build another effect perfect let's build a second Shader named disk Shader material we command the stripe Shader for now we create the glsl files and let's only keep the multiplier formula for now I found an interesting pattern to use in another tutorial I will give you the rest sources to learn how to create yours at the end of the video it's just mathematical formulas and a lot of fun most of the time you will find ready to use shaders but it's good to understand how they work and how to create them yourself let's add the time to animate it we can add this in function to make the animation go back and forth we can fine tune the parameters to make it looks bigger and even animate the color of its shape over time excellent now let's render one Shader or the other based on the one we will select using lever by default we won't have one so let's add a condition we have a reference before assigning the time uniform and let's add the Shader options to Leva it renders a drop down we can also add a button to restart the opening animation of our experience voila you're getting started Shader journey is now over wrapping up I simplified some aspects and we didn't cover the vertex Shader I highly recommend you those resources to understand better and to practice the book of shaders it's the Bible to understand it in depth 3js Journey there is a whole chapter with Five Lessons about it and it's a very well explained the study of shaders with reactory fiber article from Maxim Heckle of course you can find the links in the description below thank you for watching I hope you enjoyed this video if you did please hit the like button as it really had this content be visible to more fellow developers tell me in the comments what you are trying to build with 3js and I will build the tutorials to help you but you need to subscribe to know when they are released oh and if you want to learn more and sharpen your react 3 fiber skills watch this video tutorial

Channel: Wawa Sensei

Views: 9,519

Keywords: webgl, threejs, three js tutorial, threejs tutorial, three js tutorial for beginners, react three fiber, react three fiber tutorial, three js journey, three js react, r3f tutorial, three js, shader material three js, shader material react three fiber, shaders tutorial, shaders tutorial threejs

Id: e2ntx-fyXaE

Length: 11min 27sec (687 seconds)

Published: Fri Feb 24 2023