Same box, three pixel ratios
The first three lines come from throwaway renderers. The scene you see uses a ratio capped at 2. Look at the status bar: the pixel ratio is shown there.
A screen is a grid of coloured dots called pixels, and a web page draws 3D into a <canvas> element. The canvas has two sizes, the box it fills on the page and the grid of pixels it really draws, and when they disagree the picture is blurry.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A card on a web page is 320 × 180 CSS pixels. What buffer size does a ratio-2 renderer need, and how many pixels is that? Write the two lines of code.
Write the one line that gives the showroom a sharp but affordable picture on any device.
Explain it without notes
A friend says their 3D scene looks blurry only on their phone. Give two causes and how you would check each.
Why does setPixelRatio(3) slow a scene down even though nothing in the scene changed?
Console
Nothing logged yet.Expected console output
ratio 1: style 200px x 100px | buffer 200 x 100 = 20000 pixels
ratio 2: style 200px x 100px | buffer 400 x 200 = 80000 pixels
ratio 3: style 200px x 100px | buffer 600 x 300 = 180000 pixels