Join Engin Arslan for an in-depth discussion in this video Texture maps, part of Learning 3D Graphics on the Web with Three.js.
- [Instructor] Texture maps are 2D images that can be mapped on a material for the purpose of providing surface detail. So far, we were only getting solid colors on the surfaces, but using a texture map, we can map any image we would like on a surface. Texture maps are not only used to manipulate the color informational surfaces, but they can also be used to manipulate other qualities of the surface, like reflectiveness, shininess, roughness. Textures can be derived from photographic sources or can also be painted from scratch as well.
For a texture to be useful in a 3D context it should be captured in a certain manner. Images that have reflections or shadows in them or images where the perspective is too distorted wouldn't make great texture maps. I have already downloaded the free to use texture and included it inside the SS textures folder under the name concrete.JPG. Let's apply this texture as a color map on the plane material surface. To be able to do that, we first need to instantiate a three.js texture loader object.
Here under this command I will be creating a variable called loader and I will be instantiating it texture loader object. I will use the plane material's map property, which is for color mapping and load in a texture that I already have downloaded and included under the SS textures folder under the name concrete.JPG.
Let's check out our scene. As you can see, the texture looks a bit blurry right now. If the plane that we are mapping was smaller, then the texture would look sharper as we would get more pixels per area. But we don't necessarily need to change the plane size to get a sharper texture. Another thing we can do is to make the texture mapping on the surface repetitive. Let's first capture the map property of the plane material inside the variable. Here, I will save this property inside the variable called texture and I will change the wrap s and wrap t properties and assign repeat wrapping object to them.
Here, under wrapping x, which is designated by the letter s in the texture space. I will be applying the value three repeat wrapping and for the direction y, which is designated by the letter t, I will again be applying repeat wrapping as well. I will be using the repeat methods on the texture object to set the repetition to something other than one.
Something like, 1.5. Let's check out our scene. Now, it seems like we are getting more resolution from the texture. The wrap s and wrap t properties determine how the texture is wrapped on the surface. We are making it repeat itself and set repetition frequency to 1.5. If we are to set this to higher we can see the resolution getting more finer, but the problem with that is, since the texture that we are using right now is not seamless, we can see edges of the image as the file repeats.
Let's check that out actually. I will set the repetition to something like 4. Let's check out our scene. Now, we can see issues arising as this texture is not seamless. It's not properly cleaned up as well so that we can see texts occurring at this edge of the texture as well. We can use an image processing program like Photoshop to make a texture seamless or some of the texture websites which already provide seamless textures. Let's revert back to using 1.5 for the repetition value.
As I mentioned earlier, textures are not only used to define the color of the surfaces but to define other qualities of the surface as well. One other way that textures can be used is our bump maps. When I use as a bump map it brightens value of the textures simulates a height effect. Here, I will be loading in a bump map by using the same texture. Here, again using the plane material with the bump map property, I will load in the same texture for this property.
Bump map should also be using the same repetition configuration as the color map. I will create a loop to save myself from writing the same code twice. Here, I will create an array called maps, which will have the property names map and bump map inside it and I will create a for each loop for the maps array which is going to make use of the map name here inside this property.
Instead of hard coding map here I can be making use of the variable name map name. Let's check out our scene. With a bump map, brighter the value of a pixel, higher the corresponding the surface would look. But a bump map doesn't actually change the surface it just manipulates how the light interacts with the surface to create an illusion of uneven topology. You can verify this by looking at the profile of the plane. It's still a flat plane.
The bump amount looks a bit too much right now. Bump maps work best when they are used in subtle amounts, so let's change the bump scale parameter to something lower for a more subtle effect. Let's go back to our codes and here on the plane material bump scale property, I will set it to 0.01. Let's save our code. Notice how this texture made a huge difference in appearance. The reflections are not perfect anymore but nicely broken up as they would be in real life.
You might notice that we are receiving warnings regarding the textures not being square. You can ignore these warnings as three.js does an automatic resizing to fix the issue.
- Building a simple scene
- Creating three.js 3D objects
- Adding light and shadows
- Animating with Tween.js
- Working with materials and textures
- Editing and importing geometries
- Creating a particle system
- Post-processing with effects and shaders