React Three Fiber & Three.js - Textures Explained

textures images that you wrap around the surface of your geometry to give it extra detail if you are creating a 3d object like for example a sphere then you probably want to give it a texture instead of only a single color now you might think a texture is just an image that gives the sphere different colors but textures can also be used for opacity light reflections shadows and even for moving vertices combining multiple textures can make an object look very realistic and it can give a completely different result let's download a few different textures from polyhaven which we are going to use in our project let's change the download type to zip and if you want lower the quality to 1k of course the higher the quality the longer your browser will need to load all the textures i chose to download the arm diffuse displacement and the normal textures from this aerial rocks 2 acid this will contain textures for the color the displacement the normals the ambient occlusion the roughness and the metalness which is completely black in this case because this acid does not contain any metal later on in this video we will also discuss the alpha texture which is not included in the acid because it isn't needed but we will add it ourselves and tweak it for demoing purposes at the end of this video you will understand the meaning of each of those textures once you downloaded the textures from polyhaven you will notice we don't contain all of the ones that i just mentioned that is because of the arm texture we downloaded which is a combination of multiple textures this is possible because some of the previously shown textures are gray scales in grey skills the r g and b values will have the same value between 0 and 255 because of that you actually only need a single value of those three so if you want to increase performance you can decide to combine up to three gray scale textures into one rgb texture the arm texture in this case stands for ambient occlusion roughness and metalness texture the red value of the texture will be used for the ambient occlusion the green value for the roughness and the blue value for the metalness since our asset doesn't have any metallic surface you won't see any blue values let's start using textures in our 3d scene by copying them to a textures folder inside the public folder in the root of our project and by the way the starting code for this project is available in my github which is linked in the description let's start by changing some values so that we have the correct lights and camera position for the scene i also added a light helper by using the use helper hook provided by react3 to show where the light is positioned let's add a terrain function with a default plane where we will apply all our textures on increase the size a bit by passing the width and height as the first two arguments to apply a texture on this plane we first need to load one which you can do with the used texture hook provided by reactory dray pause the path relative to the public folder and add the return value to the map property of the material be aware that we need to use a mesh standard material in this case to support all different textures for this video so the texture is now visible on the plane but in poly haven the result was not flat let's add the displacement texture for that which is a grayscale image which moves the vertices into the direction that they are facing the wider the value the more the vertex will be moved to add this texture we could add it separately but there are easier ways to retrieve multiple textures you can for example pass an array as argument in the use texture hoop which will give you an array of textures in return or in our case it's even more efficient to pass an object with the property names that we are using for the mesh standard material and spread the return value in the material so now the displacement texture also gets applied on a material using the displacement map property but somehow the plane is still flat and this is because of the amount of width and height segments that the plane has there's currently no way to see this so let me explain this by adding some extra code that i'll remove after explaining again i'm adding an extra plane with the same properties but in this case we only show the wireframe and set the color to white instead of the color of the texture let's put the second plane slightly above the first one so that it flies on it the plane is currently just two triangles placed against each other but except for the corners there are no points where the plane could bend and that is where width and height segments come into play you can pass those as 3rd and 4th arguments in the constructor by changing this value to 4 you can already see that the wireframe isn't flat anymore because it has more points where it can bend on the higher the amount of width and height segment is the more detailed the displacement will be but be aware that increasing the amount of width and height segment is bad for performance so you will need to find an amount that is detailed enough for your scene but also performs well now that works let's remove the demo code and apply the width and height segments on the original plane this will displace the terrain as we expected but unfortunately the shadows and reflection are still not as how they seem in the polyhaven website let's improve our terrain by adding the arm texture the ambient occlusion texture is being used to add fake shadows to the mesh for a better contrast where the darker areas of the texture get extra shadow the roughness texture is added to determine how rough the surface must look like where black means it's a smooth surface and white means it's a rough surface and the metalness texture is added to decide which parts of the mesh are made of a metallic material usually this value is either 0 or 1 but not often somewhere in between but an exception to this could be a rusty surface in our acid there is no metallic surface but later on we will edit the metalness texture to demo the results to apply those three textures we have the ao map roughness map and a metalness map available this will give our terrain better shadows and more reflection maybe it's a bit too much for now but we can tweak that later on if you want to research more about textures then those map properties and many more are available in the 3gs documentation page about the mesh standard material now to make full use of the lights in our scene we should add a normal texture this texture will determine the angle that a surface is pointing at which will affect the light reflections we can apply this texture by adding the normal map but to get the desired normals for our terrain we will also need to set the normal map encoding to linear encoding now you can see some more shadows on places that are pointed away from the light and the last texture that we are going to add is the alpha texture which determines the opacity of the mesh because this is a terrain it needs to be completely opaque but i created an alpha texture with some gray and black squares to demo the results we can add it to the terrain by passing the alpha map property but somehow the terrain is still fully opaque though this is because transparent materials require the transparent property once this is added you can see that the darker the area the less visible the mesh will be now those were all the textures that we had available but you might not have seen the effect of all textures in detail and for that i changed each texture a bit to see what it looks like with some extreme values i added a white and black square to the displacement map which will change the position of some of the vertices in the corner either up or down for the arm texture i created three separate textures for the ambient occlusion with a red square the roughness with a green square on a more red surface to make it better visible and for the metalness with a blue square and as last the normal texture includes some of the colors from a normal color palette to show how lighting will be affected differently with different colors so let's change all the textures we've been using with the edited ones if you want to try this yourself i also added the textures in github now the result will be a terrain with of course some weird behavior on the corners but before we dive deeper into this let's add some tweakable properties with liva if you don't know about this package yet then i recommend you to watch one of my previous videos about debugging with liva let's start by adding the displacement scale this will determine how much effect the displacement map has on the terrain this value can be negative or positive and it can also be zero which means that there won't be any displacement at all now let's debug the ambient occlusion with the ao map intensity property which determines how intense the shadow should look on darker areas because we added the red square which means that the ambient occlusion should add no additional shadow you would expect the corner of this texture to keep the original color but somehow it didn't and this is because the ao map requires an additional set of uvs which will be further explained in a future video about materials let's add the second set of uvs by setting the uv2 attribute to the value of the original uv attribute now you can see that the corner isn't affected by the ambient occlusion intensity this value is usually somewhere between 0 and 1 so increasing this value up to 10 is only meant to show the clear difference in color the next weakable property that we will add is the roughness this property does not contain the name skill or intensity but as the description mentions it can still be combined with the roughness map in case both are supplied then they will get multiplied this means that by tweaking the roughness value you can see that the green square on the rock is rougher compared to the rest because of the higher green value now let's finally test the metalness as well by passing a metalness property and use the texture with the blue square close to the top right corner by increasing the metalness you will see that the square gets a more metallic look you don't necessarily need a texture for all properties by the way in this case we could also remove the metalness map which means the metallic value will be applied to the entire surface and the last property that we will test in combination with the texture is the normal scale property this multiplies the current normal direction by the x and y value this property expects a vector 2 so we will have to convert the tweakable x and y properties to a vector 2. by changing for example the x value to a negative value you will see that the shadow comes from a different side while we didn't move any lights and that's everything for this video about textures fully understanding textures might take some time so if you have any questions then please feel free to ask them in the comments please like the video if you did and subscribe for more related content ciao

Channel: Threeveloper

Views: 8,334

Keywords: three.js, react-three-fiber, r3f, @react-three/fiber, @react-three/drei, 3D, 3D website, tutorial, React, TypeScript, TailwindCSS, Vite, unique website, teaching, 3D experience, three js, react three fiber, threejs, texture, normal, diffuse, color texture, roughness, metalness, ambient occlusion, ao, meshStandardMaterial, 3D textures, grayscale

Id: J5Pd9vy9hOw

Length: 10min 36sec (636 seconds)

Published: Mon May 02 2022