Stencil with Gradient?

Questions
1

Is there a way to make a stencil use a gradient in three.js? Like a fade off using a gradient at the edges.

I thought the only way I can do this currently is by ensuring the background of the scene is a solid colour, then having a gradient texture that matches that colour tied to the edges of the stencil but rendering in front of it, creating a sort of vignette effect for a fake gradient.

But what if I wanted geometry to render in that gradient or other objects that are behind the stencil where a gradient/fadeoff would show?

2

@ROBYER1 ā€“

As far as I know (but Iā€™m not an expert) you cannot use gradients with stencil buffers ā€¦ or at least, gradient values in the stencil buffer do not correspond to different level of opacity. Stencils are binary filters ā€“ a pixel either passes or does not pass.

Maybe alpha masks can do what you want. For example, a top layer of background colour and gradient opacity which hides the underlying objects ā€¦ gradiently (sic).

The alternative is to use a post-processing vignette effect.

ā€“ Pavel

1 Like