GPU picking against the raycaster
The canvas is a fixed 300 × 150, so the picked ids are the same on every screen.
Design a 3D view of a lot of data, such as 100,000 bike rentals on a city map: draw them in one call (points or instancing), pick with the GPU or a spatial index, label only what matters, stream tiles, and know when a 2D map is the better answer.
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.
Colour each rental by its hour of the day in the instanced version, without adding draw calls.
Hide every rental outside a time range chosen on a slider, without rebuilding any buffer.
Explain it without notes
How would you draw and pick 100,000 items in a browser?
When would you advise against a 3D data view?
Console
Nothing logged yet.Expected console output
at 50% across, 50% down: GPU says 5150, raycaster says 5150
at 30% across, 70% down: GPU says 7421, raycaster says 7421
at 65% across, 60% down: GPU says 6375, raycaster says 6375
at 2% across, 5% down: GPU says nothing, raycaster says nothing