🌳 Introduction to ThreeJS - Part 4

date

Jun 19, 2024

slug

Texture

status

Published

Intro :

It's texture day, and today we're bringing color into our lives 🌈. Placing 2d sheets on 3d objects like wallpaper. It's not all plain sailing, but as usual I'll do my best to show you the ins and outs of this magical technology.

UV MAP

What its UV MAP ?

When I first started learning about textures, the term "UV map" was perplexing. What do UV mean? It's actually quite simple: UV refers to the axes, similar to X and Y, but since X and Y are already used in 3D rendering, U and V were chosen to represent the two-dimensional plane for textures.

In essence, a UV map is a 2D representation where we design the textures for our 3D object. Imagine unwrapping a 3D model into a flat surface, much like unfolding a cardboard box. This flat surface allows us to paint or apply images that will wrap around the 3D model seamlessly. Here, I'll show you an image from Blender. It might not make much sense yet, but we'll get there. I need to give you an overview to introduce you to the concept.

Pay particular attention to the corners, which are composed of triangles.

How to Create a UV Map ?

Creating a UV map is simpler than it seems; it just needs to be done in the right order. You'll need a 3D editor like Blender to perform UV unwrapping. Essentially, this process involves taking your 3D shape and cutting it in a way that lays it flat in 2D. (As shown in this image from Wikipedia.)

This is a basic example, as you can have all sorts of shapes. However, I find it somewhat misleading because, in reality, you can cut specific areas without necessarily going around the entire object. A great example is this video by Entikai at 6:33, where you can see that the grids are sections and not the whole object.

(video image at 6:33)

Then, if you look closely, you'll see that it will draw on these parts of the grid and apply the drawing to the object, stretching if necessary to render it properly.

( ToDo a step resume )

BaseColor Map

As you can see, UV maps are simply 2D images that we draw onto objects. The base color map is the simplest of all. This map is just the image applied to the object, providing its basic colors. It is the foundation for rendering an object with its colors. As you progress, you'll stack multiple maps to achieve stunning visual effects on objects. Here is our base a 2d image of ice.

To start our overview, we will create an ice sphere with the base color texture applied:

From this base, we can build more complex and visually appealing textures by adding more maps. But as you can see, this is simply a flat sphere. So let's see how we can add detail.

Normals Map:

Remember the normal arrows that indicate the direction of the surface? Depending on the color, you know the direction! The normal map works on the same principle. Depending on the normal, you can tell whether light is reflecting off the surface or not. So you can create shadows on a flat object. It's amazing how you can create a 3D effect on a flat surface. I know it's crazy, if you only knew how many games use this technique to boost performance. Here's what’s a 2d normal texture looks like:

Thus, after stacking the base color and the normal map, we obtain this effect :

As you can see, the interstices are darker and give a shadow effect.

Displacement Maps :

The displacement map store informations about the surface's height variations and adjust the 3D model's geometry during rendering. This process affects the shading, making it more realistic, and alters the object's silhouette to reflect the height differences.

So here's what a displacement map looks like:

A displacement map is black and white. If a zone is black, it means that it will be depressed or lowered in the object's geometry. If a zone is white, it means it will be raised or lowered in the geometry. Shades of gray between black and white indicate intermediate levels of height.

Thus, after stacking the base color, normal map and the displacement map we obtain this effect :

As you can see, heights have been added.

Roughness map

A roughness map controls the roughness or smoothness of a surface in a 3D rendering. More precisely:

Whiter or lighter areas in a roughness map indicate a smooth, shiny surface, reflecting light more clearly.

Darker or blacker areas indicate a rough or matte surface, which diffuses light more diffusely and softly.

In this way, a roughness map enables you to make a surface more realistic by adjusting the way it reacts to light, directly affecting the appearance of the texture in the final rendering.

Thus, after stacking the base color, normal map, displacement map and the roughness map we obtain this effect :

You can see that the light is well reflected with this beautiful specular point.

Ambient Occlusion Map

An ambient occlusion (AO) map is used to simulate areas where light tends to be blocked or attenuated, creating soft shadows and more pronounced hollow and relief detail on surfaces. Here's how it works:

Light areas indicate where light can diffuse more freely, producing brighter, less accentuated areas of surface detail.

Dark areas in an ambient occlusion map represent places where light is less likely to penetrate or reflect, creating darker, deeper areas in hollows and corners.

By adding an ambient occlusion map to a texture, you can enhance realism by creating subtle shadow effects that accentuate the contours and details of objects in 3D renderings.

Thus, after stacking all of the map we saw, we obtain this effect :

Conclusion :

In conclusion, maps are 2D images applied to 3D objects, each with specific effects that influence the light, edges or colors of surfaces. There are a variety of textures that can be used, although some are not available in Three.js. Here's a brief overview of some interesting textures: http://wiki.polycount.com/wiki/Texture_types

If you'd like to explore the different spheres I've presented, you can follow this link https://three-js-texture.vercel.app/.

🌳 Introduction to ThreeJS - Part 4 - Textures