Jump to content

How to use mask in Babylon.js


Recommended Posts


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


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...

Link to comment
Share on other sites

8 hours ago, Deltakosh said:


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:


Link to comment
Share on other sites

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

It satisfied my requirement...


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?

Link to comment
Share on other sites

  • 4 weeks later...

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);


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;


Link to comment
Share on other sites

  • 9 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...