Lose the GPU context and get it back
The loss is simulated with WEBGL_lose_context. A real loss fires the same two events.
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
1. drawing: centre pixel 255,107,44 | lost: false
THREE.WebGLRenderer: Context Lost.
2. context lost: lost: true | render() while lost: no error
THREE.WebGLRenderer: Context Restored.
3. restored: lost: false | centre pixel 255,107,44