Render a custom mask

Questions
1

So iam newbie in three.js and i dont know if there is a way to solve that what i want.
I need a mask of an object, that is behind of other objects, to fill it with html content.

Lets say i have a cube and a simple sprite behind like this:

1
… after that, i need a mask for the sprite like this:

2
All other objects should be black, only the sprite is white in that mask.
After that i want to render only the cube in a canvas (not the original sprite, thats only used for the mask)

In the white area of the mask should be the html content, what got the 2d position of the 3d sprite.
Maybe there are other ways, i dont know. The target is, to show html content in a mask on the screenspace position. Anyone can help or maybe know an easier way to do that?

2

I’m not sure I fully understand your intended result. But in WebGL masking is normally achieved via the stencil buffer or via alpha testing (e.g. alpha maps). There is actually a nice post-processing example demonstrating the usage of MaskPass which is based on the stencil buffer. However, you can’t use both information in context of HTML. Meaning technically the HTML and the WebGL content are decoupled. You can of course sync the transformation of HTML objects to 3D objects like CSS3DRenderer does but it’s not possible to access masking information.

I suggest you try to avoid the usage HTML in this use case and render your scene with pure WebGL.

3

Ah okay, i understand. Yah, i will take a look at the examples, thanks :slight_smile: