How to do "Sprite/Mesh fades at edge of mask"?

Questions
1

(Posted this on Discord moments ago, but unsure if Discord or Forum is preferred for help requests)

Hey all, I’m new here, barely started learning BabylonJS! Came from 15 years of “visual game dev” software (Clickteam’s KnP, TGF, Multimedia Fusion 2, then onto Scirra’s Construct CC C2 C3). Learned lots of JS in C3!

One thing I wanted to “interpret from C3 to BabylonJS” is “Layer Blend Modes”.

Here’s a clip from C3 to demonstrate:

In C3, you could setup some layers to place your sprites onto. You could make layers into “sublayers” and such, and mark a layer as “force own texture”, set layer blend modes such as “additive, destination out, source atop”.

Lets say you made 3 layers like “RootLayer” which has “Force own texture” enabled, and this RootLayer has 2 child layers - you could set a child layer to “source in” , another layer with a “mask image” which might be a plain white texture with faded edges, then place some sprites on the other child layer - BOOM, you can have your sprites appear when on top of the mask, but if the sprite reaches the edge, you see it fade away, and then become completely invisible when positioned off the mask. All of this, does NOT interfere with other layers above or below - e.g. this could be used for UI scrolling lists with a nice fade at the edges, whilst not cutting a gnarly hole into the window or anything.

SOOOO YEA… BABYLONJS!

What is the equivilent to what I am talking about, here?

Is it possible with both “Sprites” OR “plane meshes in the world”?

I am EAGER to learn about this. Thank you!

2

Welcome to the community !!! let me add @PatrickRyan to the thread to see if he can help with the request.

3

@MidnightSnack, welcome to the community! Unfortunately, the sprite layer blending you are showing here isn’t something we support out of the box in Babylon as we’ve never had a request for this kind of feature. Since the masking is done between two different sprite cards, to make a custom implementation of this, it would be a combination of render layers, dynamic textures, and custom sprite shaders to make this work. I can assume that you would use this in multiple places as well within a single scene, so this would need to act at the full screen level so that you aren’t needing to do this process every frame on every asset you use this layer masking on. So it would go something like place all masking sprites on one render layer rendered just as their alpha channel. Then in your render loop you would render a dynamic texture of just that render layer so you have a texture of all masks in one texture. After that would be one of two methods. First one would be to render all of your sprites to be masked into one dynamic texture and use that texture masked by the original masked texture on a full screen quad to render all of them at once. This would be simple due to the shader being just a texture masked with alpha, but would come with a lot of overdraw and potential sorting issues if you need to insert an element between two masked sprites. The other would be to render the sprites to be masked individually in the scene, but pass the full screen mask texture for each one and use screen coordinates to align your sprite to be masked with the full screen mask. Not as much overdraw and still just one masking texture per frame. However, this is just off the top of my head so I don’t know what complications may arise in these paths. I can talk with @sebavan to see if there’s a way we would want do add a feature like this to the engine. It all comes down to resources to build and maintain.