Feat/cursor control

[yashrajbharti]

Description

[I have added #534 that does the same directly in the stencil example, so the same with the best developer experience can be considered]
This example shows interactive stencil masking in WebGPU using a single 2D plane that follows the cursor to create a dynamic cutout. A rotating torus is revealed only within this masked area, while a sphere remains visible outside it. The effect uses multi-pass rendering and stencil buffer logic to control visibility based on cursor interaction.

fixes #527

Screen.Recording.2025-07-17.at.1.39.31.PM.mov

[beaufortfrancois]

Looking at the diff between sample/cursorControl/main.ts and sample/stencilMask/main.ts, I wonder if we shoud "simply" add cursor control support to the stencilMask sample as there's not much difference. WDYT?

[yashrajbharti]

Thanks for the suggestion. I’m open to moving in that direction! I’m slightly more inclined to keep this a basic, standalone example where the mouse interaction is more prominent and easier to follow.

The existing stencilMask sample already does quite a bit with the six faces cube and various stencil values, making it more graphics-technique focused. In contrast, this cursor cutout sample leans toward demonstrating WebGPU’s interaction with DOM events, highlighting how a web platform cursor can influence 3D content in a minimal, less noisy setup.

That said, I’m happy to hear thoughts on pros/cons of both approaches and align with what feels most valuable for the examples!

Edit: Can also add controls for number of shapes and cursor input similar to this.

Lemme know!

[yashrajbharti]

Removing as its a duplicate effort since #534 is merged!