🗓️ 10052025 2145
📎
textures_3js
Images that will cover the surface of your geometries
types
| type | description | |
|---|---|---|
| color (albedo) | takes pixel of texture and apply them to the geometry |  |
| alpha | grayscale image where white is visible and black is not |  |
| height | grayscale image that will move vertices to create some relief (requires subdivision to be seen) |  |
| normal | for luring light into thinking face is oriented differently (performant way of adding details) |  |
| ambient occlusion | grayscale shadow for faking shadow |  |
| metalness | grayscale image for specifying metalness (white is metallic, non-metallic is black) |  |
| roughness | grayscale image that comes with metalness (white - rough, smooth -black) |  |
metalness and roughness follows physically_based_rendering principles
Take into account the color space of your texture
components
| component | description |
|---|---|
| TextureLoader | Loads textures |
| LoadingManager | For managing texture load events |
The LoadingManager is useful for managing the progress of loading Texture assets
Can uess it to manager a loading bar
Texture format and optimisation
Elements to keep in mind when preparing textures
The weight
Important because textures have to be downloaded
.jpg()- lossy compression
- usually lighter
.png()- lossless compression
- usually heavier
- Try to apply the usual methods to get an acceptable image but as light as possible
- Use compression websites like TinyPNG (also works with jpg) or any software.
The size
- Each pixel of the textures you are using will have to be stored on the GPU regardless of the image's weight
- GPU has storage limitations
- Automatically generated mipmapping increases the number of pixels that have to be stored
-
Texture width and height must be a power of 2
-
That is mandatory so that Three.js can divide the size of the texture by 2
The data
jpgfiles don't have an alpha channel- can use alpha map
If you are using a normal texture (the purple one), you will probably want to have the exact values for each pixel's red, green, and blue channels, or you might end up with visual glitches. For that, you'll need to use a png because its lossless compression will preserve the values.
Where to find textures
- Sources
- Create your own
- PhotoShop
- Substance Designer
Always make sure that you have the right to use the texture if it's not for personal usage.