A normal map that looks inside-out
Same picture, same light. Left: normalScale (1, 1). Right: (1, -1): the light and shadow sides of every diamond swap, so the bumps read as dents. Flip the sign for a map made for DirectX.
A material's numbers (colour, roughness, metalness) can each be replaced by a picture. Each map is a different kind of data: colour in sRGB, everything else in plain numbers. A normal map changes how light bounces without changing the shape.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A downloaded normal map makes your bumps look like dents. Write the one line that fixes it, and name the cause.
Write the code to load a colour map and a normal map for one material with the right colour spaces.
Explain it without notes
A bike part's metalness map does nothing. What do you check first?
Why is a normal map not enough to make a smooth tyre look like it has a real tread silhouette?
Console
Nothing logged yet.Expected console output
normalScale (1, 1) | normalScale: 1, 1
normalScale (1, -1) | normalScale: 1, -1