Materials, textures & lighting

How surfaces and light work in any modern renderer: the PBR metal/roughness model and sane values, texture maps and their color spaces, normal maps, packing and baking, light types and units, image-based and three-point lighting, shadows and global illumination, tone mapping, and cameras. Geometry basics are in Core 3D concepts; doing it in Blender is in Materials & UVs and Lighting & rendering.

PBR: the metal/roughness model

PBR (physically based rendering) describes a surface by measurable properties instead of hand-tuned "shininess", so one material looks right under any light. glTF, three.js, Godot and Blender's Principled BSDF all share the metal/roughness model.

glTF core covers base color, metallic, roughness, normal, occlusion, emission and alpha; the rest travel as KHR_materials_* extensions that Blender exports and three.js reads. Godot's StandardMaterial3D covers most of them natively.

Typical values

Values from Physically Based (opens in a new tab), as linear RGB (the number you type in a color field set to linear; image textures store the brighter-looking sRGB equivalent).

Texture maps & color spaces

A texture map is an image the material samples through the mesh's UVs. Some maps hold colors, others hold data (numbers stored in pixels). They need different color spaces:

• sRGB: the image's values are gamma-encoded for human eyes; the renderer decodes them to linear before lighting. Right for anything you'd call a color.
• Non-Color / linear: the numbers are used as-is. Right for anything that is a measurement.

This is the most common beginner bug. The symptoms:

Also set the output: three.js renderer.outputColorSpace is SRGBColorSpace by default; leave it.

Normal, bump & displacement maps

Tangent-space normal maps (the light blue-purple ones; flat = RGB 128, 128, 255) store directions relative to the surface, so they survive deformation and reuse. They need tangents on the mesh; the standard is MikkTSpace, which Blender bakes with and glTF expects.

OpenGL vs DirectX: the green channel means "up" in OpenGL style (Y+) and "down" in DirectX style (Y−).

Wrong convention: bumps look like dents, lit from the opposite side. Fix by inverting the green channel (or download the "GL" version).

Resolution, power of two & compression

• The PNG/JPEG file size is not the memory cost: every image is decompressed to the table above on the GPU. Ten 4K maps are ~850 MB of VRAM, which crashes phones.
• Power-of-two sizes (256, 512, 1024, 2048) are safest: mipmaps and GPU block compression want them (or at least multiples of 4). WebGL2 accepts other sizes, but some pipelines don't.
• Mipmaps are pre-shrunk copies used at distance; they stop shimmering and cost +33% memory.
• GPU compression (KTX2 / Basis Universal on the web, BCn on desktop, ASTC/ETC on mobile) stays compressed in VRAM, about 4–8× smaller; see three.js compression decoders.

Channel packing (ORM)

Grayscale maps use one channel each, so engines pack three into one RGB image: one file, one texture fetch, a third of the memory.

glTF's metallicRoughnessTexture reads G = roughness, B = metallic; occlusionTexture reads R, and the two may point at the same image. Blender's glTF exporter packs them for you when the maps are wired separately. Godot has ORMMaterial3D for this layout. Other engines pack differently (Unity HDRP's mask map is metallic, AO, detail, smoothness), so check before reusing a texture set.

Procedural textures & baking

Baking renders something expensive into an image the engine can sample cheaply:

Games bake because runtime cost matters more than flexibility. Blender bakes with Cycles; the steps are in Blender materials & UVs.

Lights and their units

Units differ, so brightness rarely survives export:

• Blender: point, spot and area power in watts of radiant power (not a bulb's electrical watts); sun strength in W/m² (the manual gives ~1000 for a clear sky; lower it with exposure, since eyes adapt and renders don't).
• glTF: point and spot in candela, directional in lux. Blender's exporter converts with its Lighting Mode (Standard = physical units, or Unitless).
• three.js: GLTFLoader passes those values straight to its lights; PointLight and SpotLight intensity is documented in candela.
• Godot: unitless energy by default; physical units (lumens, lux) are an opt-in project setting.

Plan to re-balance lights in the engine, or bake the lighting.

Lighting a scene

Image-based lighting (IBL): an HDRI (a 360° high-dynamic-range photo, .hdr / .exr) wraps the scene, lights it from every direction and gives shiny surfaces something to reflect. Fastest route to a believable look; Poly Haven (opens in a new tab) has free CC0 ones. Blender: World > Environment Texture. three.js: scene.environment. Godot: WorldEnvironment with a panorama sky. glTF doesn't carry it, so set it up again in the engine.

Three-point lighting is the classic setup for a character or product:

Shadows & global illumination

Direct light travels from a light straight to a surface. Global illumination (GI) adds light that bounces: the red glow a red wall throws on a white floor, light filling a room from a window.

Common hybrid: bake static lighting, add one real-time light for moving characters, and use probes for reflections. three.js has no built-in GI, so web scenes bake or rely on an HDRI.

Exposure & tone mapping

Rendered light values range from near 0 to thousands (high dynamic range); screens show 0–1. Exposure scales the scene (one "stop" = twice or half as bright), then tone mapping squeezes the range into the display without harsh clipping.

Use the same tone mapper in Blender and the engine, or the export will look different from the render. Texture maps and baked colors should be authored and baked without tone mapping in them.

Cameras

Converting a Blender focal length to an engine FOV: $\text{FOV} = 2 \arctan\left(\frac{\text{sensor}}{2 f}\right)$. A 50 mm lens on a 36 mm sensor gives ≈ 39.6° across the sensor's fitted side; use the sensor height (or Blender's Sensor Fit: Vertical) when the engine wants vertical FOV.

Recipes

Debug a black or pink material

Work down the list; the first match is usually it.

Wire a texture set correctly

Use for any downloaded or generated set (base color, normal, roughness, metallic, AO).

• Base color → Base Color, sRGB
• Normal → Normal Map node (Tangent Space) → Normal, Non-Color; check GL vs DX
• Roughness, metallic, AO → Non-Color; ORM split with a Separate Color node (R, G, B)
• Alpha → Alpha, and set the material to clip or blend
• All maps share the same UV map and resolution
• Preview under an HDRI, not just the default light

Make a material survive export

Use before exporting to glTF, three.js or Godot.

• One Principled BSDF per material, fed only by Image Texture, Normal Map and Separate Color nodes
• Procedural, mix and custom nodes baked to images
• Texture sizes power of two, ≤ 2K for web
• Emission strength and alpha mode set deliberately
• Few materials per object (each is a draw call)
• Re-check in the target engine with its own lights and tone mapper

Light a hero shot fast

Use for a product, prop or character render or a web viewer.

1. HDRI for ambient light and reflections; rotate it until the highlight falls where you want.
2. Add a key light ~45° to the side and above; the HDRI now acts as fill.
3. Add a rim light behind to separate the subject from the background.
4. Tone mapping: AgX (or Khronos PBR Neutral for exact product colors); set exposure so whites aren't clipped.
5. Soft shadows: make the key light larger (Blender radius / size).

Pick a texture resolution

Use when choosing how big each map should be.

1. Choose a texel density for the project (e.g. 512 px/m for third-person, 1024 px/m for first-person).
2. Longest side of the UV area in meters × density = pixels needed: a 2 m wall at 512 px/m → 1024.
3. Round up to the next power of two, cap by target (2K on phones).
4. Reuse tiling textures and trim sheets for big surfaces instead of one huge unique texture.

Match a Blender camera in the engine

Use when a web or game view must match a Blender render.

1. Note Blender's focal length, sensor size, Sensor Fit, and the render resolution.
2. Convert to vertical FOV with the formula above (use sensor height = sensor width × height ÷ width for a horizontal fit).
3. Export the camera with glTF (it stores vertical FOV) or set fov by hand in three.js / Godot.
4. Match near/far clip and the tone mapper.

References

• MDN: Explaining basic 3D theory (opens in a new tab): materials, lighting and the fragment stage in plain words
• Blender Manual: Principled BSDF (opens in a new tab), Image Texture node (opens in a new tab), color management (opens in a new tab), light objects and units (opens in a new tab), cameras (opens in a new tab), baking (opens in a new tab)
• Blender Manual: glTF 2.0 add-on (opens in a new tab): which material setups export, ORM packing, lighting modes
• Khronos glTF 2.0 specification (opens in a new tab): the metallic-roughness model, texture channels, color spaces; KHR_lights_punctual (opens in a new tab): light units
• three.js manual: color management (opens in a new tab): colorSpace, output and tone mapping
• Godot docs: Standard Material 3D (opens in a new tab), lights and shadows (opens in a new tab), physical light units (opens in a new tab), GI introduction (opens in a new tab), environment and post-processing (opens in a new tab)
• Physically Based (opens in a new tab): measured base color, IOR and light values
• LearnOpenGL: PBR theory (opens in a new tab): the math behind metal/roughness, Fresnel and energy conservation
• Poly Haven HDRIs (opens in a new tab): free CC0 environment maps