Surface Lab Hands-on lesson covering textures, materials, and UV mapping on a hard-surface robot. Swap texture sets, tweak PBR parameters, and paint directly on the model.
Reset lab Field guide Sources Keyboard
LIVE MATERIAL PREVIEW
Studio light Warm light Cool light ATLAS—07 TRAINING UNIT / SHELL + FIXED TRIM
⋖ Inspect ✎ Paint
Drag to orbit · Scroll to zoom · Click to find a texel
— triangles Geometry stays the same
The 3D view needs WebGL. Open this page in a browser with graphics acceleration enabled.
Swap the character's texture set Full set · 4 maps Base color only
Close × Field guide Mesh = shape Vertices and triangles describe the surface. A texture swap leaves those positions intact.
UVs = addresses Each mesh corner has a 2D coordinate. The renderer interpolates it across a triangle to look up texture data.
Textures = stored data Images can hold color, directions, masks or other values—not just a photograph.
Material + shader = interpretation A material binds maps and settings; shader code uses them with lighting to produce the visible surface.
Game-asset workflow 01 Build a mesh and unwrap its UVs. Mark suitable seams, flatten the surface into UV islands, reduce stretching, then pack the islands with padding.
02 Author a compatible texture set. Paint base color and author normal, roughness and metalness maps against the same intended UV layout.
03 Connect the maps to their correct material inputs. Base-color RGB uses sRGB; normal, roughness and metalness are data, not sRGB color. Check normal-map Y convention.
04 Import, assign and test in the target engine. Verify scale, UV set, material slots, channel packing, transparency and texture compression.
05 Swap only what the new appearance needs. A recolor may change only base color. Wet or worn variants may also need new surface maps.
What a texture swap cannot do A painted buckle does not become protruding geometry. A normal map cannot extend the silhouette. A truly thicker coat or different hairstyle requires another mesh.
Troubleshooting Eyes appear on the torso The atlas layout or selected UV set does not match.
Paint looks like bare chrome Check the metalness mask, its channel, and any multiplier.
Dents look like bumps Check the tangent basis and normal-map Y/green convention.
Color is dark or washed out Check color-space conversion and lighting.
Edges show colored seams Inspect UV padding, texture filtering, mip levels.
Every character changes at once Check whether they share the same mutable material or texture.
Close × Sources & implementation The lesson follows the metallic–roughness workflow. The teaching model, texture art, shaders and interface were created for this lesson. Everything runs locally with no external libraries.
Real 3D, real texture lookups WebGL, or a CPU fallback, rasterizes actual rounded-box triangles. UVs address real generated image textures. Clicking uses ray–triangle intersections; painting updates the base-color image.
A deliberately simple atlas Four rows × six faces: head, body, arms, legs. Parts in the same row reuse UV space.
Lighting is a teaching approximation GGX-style direct lighting, metallic–roughness inputs and tangent-space normal mapping. Ambient/reflection is simplified.
Not a production pipeline No skeletal rig, displacement, normal baking, UV editing, seamless 3D brush, GLB import or model export.
References Three.js — MeshStandardMaterial Khronos — A Simple Texture Khronos — Materials Khronos — glTF 2.0 spec, Materials Blender Manual — UV Operators Blender Manual — Texture Paint Khronos — Skins Three.js — Cleanup Close × Controls On the focused 3D canvas: ← → orbit sideways; ↑ ↓ tilt; + − zoom; R reset camera; W toggle wireframe; P toggle paint.
Drag to orbit. Scroll or pinch to zoom. In Paint mode, drag to paint; hold Shift and drag to orbit instead.