What three.js does not restore: a picture drawn once
The centre pixel is read from the canvas. Set REPAINT to false to see the blank result stay.
The GPU can take a canvas's WebGL context away while the page is open. three.js rebuilds its own objects when it comes back, but anything you drew once, or made with your own WebGL code, is empty until you rebuild it.
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.
Write the two handlers for a page whose render loop is loop: stop it when the context is lost, start it when restored.
A scene paints a static reflection into target once at load. Add the code that keeps it correct after a restore.
Explain it without notes
Which things does three.js bring back after webglcontextrestored, and which do you have to rebuild? Give two examples of each.
Why is calling event.preventDefault() in the lost handler important?
Console
Nothing logged yet.Expected console output
before the loss: centre pixel 255,106,42
THREE.WebGLRenderer: Context Lost.
THREE.WebGLRenderer: Context Restored.
restored, no work: centre pixel 0,0,0
after repainting: centre pixel 255,106,42