Sample Wanted: Cursor-Responsive Shader Interaction

[yashrajbharti]

I’d like to propose a cursor-interaction WebGPU sample that demonstrates fragment shader logic reacting to cursor input in a visual way.

Core idea (Basic sample):

A single 3D model where the fragment shader changes texture/material under the mouse cursor. This would teach:

• Uniforms or buffers for passing cursor position
• Simple fragment logic for region-based effects
• UI-to-shader pipeline interaction

Optional advanced extension

This may be too much for a sample but we can -
Stack two models and use the same shader logic to "reveal" one under the other, like a square-cut mask beneath the cursor.

Example / Inspiration

apple.mp4

(Credits: Amin Ankward)

But we can keep this separate unless it’s of interest.

Why?

There aren’t many visual WebGPU samples showing real-time interaction with shaders. This could make fragment shaders feel more intuitive for beginners, while giving room for deeper exploration such as this reveal effect advanced use case.

UPDATE: We now have two options to choose from #530 and #534 (happy to move forward with the one team aligns with! 😄)

[greggman]

You can make a sample and try to post it here. If you want lots of scrutiny you can put the source in this repo. If you'd like more freedom can link it externally like several of the samples do

As for your specifc reference, the stencil example stacks models and uses other "models" to cut a hole. If you moved the models cutting the holes with the mouse then you'd effectively get the effect similar to the one above. So..., you could just add mouse input to that example.

[yashrajbharti]

I went on to create the mouse interaction example and looking forward to any scrutiny!, I have tested it on Chrome and Canary and it takes the idea from the stencil example that you mentioned!

For the advanced version, I’m planning to use a 3D Dino model and apply masking in a more dynamic way, something like this (very rough idea) could be great for showcasing WebGPU in interactive demos:

I’d keep that as an external example for ease of development and iterate on it later.

[yashrajbharti]

We now have two options to choose from #530 and #534 (happy to move forward with the one team aligns with! 😄)