Stencil Mask Example

[cmhhelgeson]

EDITED 4/3/24

A simple masking example leveraging the stencil buffer. Masks can be positioned with the mouse, resized with the scroll wheel, and inverted.

The example is intended to demonstrate how users can modify existing code with minimal adjustments to create masks with the stencil, render into different scenes, and leverage the capabilities of the render pipeline to directly modify the stencil buffer across one or more passes by disabling the pipeline's color and depth write functionality.

[cmhhelgeson]

Linking to relevant issue #150. Perhaps the reflective floor demo could also be added.

[cmhhelgeson]

Hi, I just wanted to check in and see if there was anything more I could do here, of if a different kind of sample would be preferred (reflective floor, orbit around a portal, etc.)

[greggman]

Sorry, I looked at this a month ago and it seemed not finished so I assumed you were planning to post more? The code references fullscreenQuad.wgsl but no such file exists. It also references positionQuad.vert.wgsl but no such file exists. It also claims to move the mask with the mouse but that doesn't seem to happen.

Personally, I'm not sure it's a good example of what to use a stencil for. Blending between two images is more generally done with alpha channels since you can choose the level of blending per pixel. Rendering to the stencil with an SDF also seems unusual. Of course just seeing a stencil mask work is a probably a good example. I was just thinking it would be nice to see a practical example vs a contrived example. Unfortunately I couldn't think of one.

At the very least, what do you think about making the 2 scenes more varied? As it is, 4x4 grid of blue cubes vs a 4x4 rainbow cubes makes it seems like the effect is changing the cubes vs masking one rendering vs another. In other words, maybe one scene is 4x4 cubes and the other scene is a rotating spiral of spheres. (or something?) just throwing out ideas. for example

Another idea would be to look at some common uses for the canvas 2d mask

[cmhhelgeson]

Sorry, I looked at this a month ago and it seemed not finished so I assumed you were planning to post more? The code references fullscreenQuad.wgsl but no such file exists. It also references positionQuad.vert.wgsl but no such file exists. It also claims to move the mask with the mouse but that doesn't seem to happen.

Personally, I'm not sure it's a good example of what to use a stencil for. Blending between two images is more generally done with alpha channels since you can choose the level of blending per pixel. Rendering to the stencil with an SDF also seems unusual. Of course just seeing a stencil mask work is a probably a good example. I was just thinking it would be nice to see a practical example vs a contrived example. Unfortunately I couldn't think of one.

At the very least, what do you think about making the 2 scenes more varied? As it is, 4x4 grid of blue cubes vs a 4x4 rainbow cubes makes it seems like the effect is changing the cubes vs masking one rendering vs another. In other words, maybe one scene is 4x4 cubes and the other scene is a rotating spiral of spheres. (or something?) just throwing out ideas. for example

Another idea would be to look at some common uses for the canvas 2d mask

Wouldn't it just make more sense to port that existing sample over to webgpu-samples?