How to use mask in Babylon.js

[MasterK]

like this. i want add some sprites in this area,  and i only want sprites displayed in the (alpha==1) pixels...

what should i do? 

[Dad72]

A transparent png image and the sprite takes into account the transparency without that there is to do anything.

[GameMonetize]

I think you can use a foreground Babylon.Layer with this texture

[MasterK]

@Dad72

yeah, i know it's the method. but dont know how to realize it...

@Deltakosh

not just this mask picture. it's a mask, and i want add more sprites and they can only display in the mask(aplha=1) place.

i think i should use blend_func thing, to make a render buffer make sprites and mask together. then render the buffer to screen. and i dont know how...

[GameMonetize]

Perhaps you can try to build a playground so I can better understand what you want to achieve  

[MasterK]

@Deltakosh

yeah, like this. now u understand?

[GameMonetize]

So in this case why my technique with layer does not work?

http://www.babylonjs-playground.com/#UCFKM

(Ok actually they are displayed only if alpha = 0 but is this a problem?)

[MasterK]

http://www.goodboydigital.com/pixijs/examples/14/

mask mean things should be limited by the shape of mask...

for example, i designed a rectangle, and there is a sprite in the rectangle,  when move sprite to edge of rectangle, outside sprite not display.

[GameMonetize]

Then use a texture with alpha = 0 where you want to display your sprites and alpha = 1 outside and my technique works

[GameMonetize]

Like this: http://www.babylonjs-playground.com/#UCFKM#1

[MasterK]

8 hours ago, Deltakosh said:

Like this: http://www.babylonjs-playground.com/#UCFKM#1

aaaaaamazing......

you made a excellent trick. almost cheated me...

i know there is always way to use pictures to cover pictures to finish the mask thing...

Layer always in the front, can't do everything...i have lots of words but speak slow, very anxious, u know...

 

But the clip/stencil/mask things is useful and i want to make something to avoid use "cover layer" method.

 

i think this is the basic method to do:

http://stackoverflow.com/questions/24687437/how-to-use-stenciling-to-create-a-2d-clipping-mask-in-webgl

[GameMonetize]

But what is the difference between the stencil and my technique?

[MasterK]

you're killing me...

how to realize this by your  technique ?

[GameMonetize]

Like this? (rotate the camera to see it)

http://www.babylonjs-playground.com/#UCFKM#2

[MasterK]

two scenes, nice, i haven't thought it.

 

so i should improve my question.

you cant take bg as mask, because it's acting/animation/has lots of elements...(example, background has particles, and the mask should cover particle)

 

[GameMonetize]

Viewport?

http://www.babylonjs-playground.com/#UCFKM#3

[MasterK]

hmmmmmmmmmmmmmm..... you got it.... you are my hero!

It satisfied my requirement...

but...

when the viewport is not a regular rectangle, but a circle? or other strange shape. your technique also can't resolve the problem.

Did you confess it?

[GameMonetize]

For a circle or strange shape I guess I can still find a way with a texture mask

[MasterK]

try it. send the topic to the end.

i have no idea how can you do it.

[GameMonetize]

I have to admit this one was a little bit more challenging (I had to update the layer to support alpha testing :))

http://www.babylonjs-playground.com/#UCFKM#6

[SQ]

Hi, I have a related question: 

If I use a foreground layer with alpha, is there a way to see the objects behind it? Say I have a sphere and want to add a decorative border to my scene, like this:

var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
var layer = new BABYLON.Layer("top", "textures/mask.png", scene, false);

http://www.babylonjs-playground.com/#13PUAK

I can see the border as white, and the center, that should be transparent, is grey. What is the best way to get the center to be transparent?

----

Ah I already found the answer:

layer.alphaTest = true;

 

[mojojojo]

Hi guys, one more on the topic - can I use 2d mask like this 

http://www.babylonjs-playground.com/#TEIFS

but prevent the higher ground from rendering above the mask?