Texture Overview
Textures are one of the most commonly used resources in 3D rendering. Through textures, we can set the color values for each fragment of a model, thereby achieving richer artistic effects. The main functions include:
- Material Properties: Textures can be used to define the material properties of objects, such as base color and patterns, glossiness, metallic feel, and roughness.
- Environmental Effects: Realizing effects like skyboxes and environmental reflections.
The Galacean engine supports all WebGL standard textures. Textures can originate from images, canvas, raw data, videos, and more.
Types
| Type | Description |
|---|---|
| 2D Texture | The most commonly used artistic resource, sampled using 2D UV coordinates |
| Cube Texture | Composed of 6 2D textures, used for effects like skyboxes and environmental reflections |
| 2D Texture Array | Occupies only one texture unit, ideal for implementing texture atlas switching needs |
Properties
sRGB
Determines whether the texture data is in the sRGB color space. The default is true. If the data is linear, like normal textures, this should be turned off. More details can be found in the Color Space documentation.
mipmap
The engine enables mipmap by default, which improves performance and precision when sampling high-resolution textures on low-resolution screens. WebGL 2.0 supports textures of any resolution, but in the WebGL 1.0 environment, you need to upload power-of-two textures (such as 1024x512), or mipmaps will be automatically disabled.
Filter Mode
Texture pixels and screen pixels often do not correspond exactly. The filter mode can control the sampling method when magnifying (Mag) or minifying (Min):
| Sampling Filter Mode | Description |
|---|---|
| Point | Uses the texel closest to the sampling point |
| Bilinear | Uses the average value of the nearest 2*2 texel matrix |
| Trilinear | In addition to bilinear filtering, averages across mipmap levels |
Wrap Mode
The range of texture sampling is [0,1]. When UV coordinates exceed the range, wrap mode can control the sampling method:
| Sampling Wrap Mode | Description |
|---|---|
| Clamp | Samples edge texel if out of range |
| Repeat | Resamples from [0,1] if out of range |
| Mirror | Mirrors sampling from [1,0] if out of range |
Anisotropic Filtering Level
Anisotropic filtering makes textures appear clearer when viewed at an angle. Levels range from 1 to 16, depending on device support.
Color Dilation
To address the issue of black edges appearing at sudden changes in alpha values in images with transparent pixels, the editor has a built-in color dilation feature. This function removes black edges by rewriting the RGB values of all transparent pixels in the image to match the RGB values of their nearest non-fully transparent pixels.
Texture Compression
Compressed textures can effectively reduce memory usage and improve image decoding speed. For more details, see Compressed Textures.