A texture is data with a meaning and a budget

First, build a mental model

A material is a recipe for surface response. Texture channels are inputs to that recipe: visible color, roughness, metalness, normals or other data. Their meaning determines how values are decoded. Their dimensions and GPU format determine allocation; their compressed file size answers a separate network question.

1. A physically based material approximates how a surface responds to light. Roughness controls the spread of reflections; metalness changes the material model. These controls do not describe the mesh's polygon count, and a metallic surface needs something useful to reflect.
2. Color textures such as base color are commonly encoded in sRGB and need the corresponding color-space annotation. Data textures such as normal or roughness maps should not be treated as sRGB color. GLTFLoader configures many material conventions for you; independently loaded images require deliberate setup.
3. UV coordinates associate mesh locations with texture locations. A seam is a boundary in that mapping. Distortion, seams and texel density are asset-authoring concerns as well as renderer concerns; a larger file does not repair a wrong UV layout.
4. An uncompressed RGBA8 level stores four bytes per texel. Width × height × 4 gives the base allocation. A complete square power-of-two mip chain adds about one third more texels; small levels make the exact finite sum slightly smaller.
5. Network compression, image decode and GPU texture compression are distinct operations. A JPEG or PNG can transfer cheaply and still decode to a large uncompressed allocation. Supported GPU block-compressed formats can change that allocation, with device and quality trade-offs.

import * as THREE from "three";
const loader = new THREE.TextureLoader();
// Synthetic example paths: supply your own images before running this snippet.
const baseColor = await loader.loadAsync("/assets/demo-base-color.png");
baseColor.colorSpace = THREE.SRGBColorSpace;
const roughness = await loader.loadAsync("/assets/demo-roughness.png");
// Roughness remains non-color data; do not mark it as sRGB.
const material = new THREE.MeshStandardMaterial({
  map: baseColor, roughnessMap: roughness, roughness: 1, metalness: 0
});
const baseBytes = 1024 * 1024 * 4;
console.log(baseBytes / (1024 * 1024)); // 4 MiB, before mip levels
// The owner releases the material and each owned texture when unused.
// material.dispose() alone does not dispose its texture maps.

1. Transfer

   The browser downloads a compressed file. This byte count affects loading, but it is not a direct report of its eventual GPU allocation.

2. Interpret

   Base-color values are treated as color; roughness values are treated as numeric surface data. Assigning the wrong interpretation changes the rendered response.

3. Allocate

   A 1024-square uncompressed RGBA8 base level needs 4 MiB. Additional mip levels, extra maps and duplicated resources increase the total.