Sebavan

Babylon Highlight layer

Recommended Posts

Hello,

As it seems there were quite a few discussion around highlighting meshes you can find below the solution integrated in standard in bjs:

var hl = new BABYLON.HighlightLayer("hg", scene);
hl.pushMesh(box, BABYLON.Color3.Green());

Please be aware, the stencil needs to be able in your canvas:

var engine = new BABYLON.Engine(canvas, true, { stencil: true });

You can take a look at the result here:

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

Best Regards,

Share this post


Link to post
Share on other sites

I'm going with @Klaas !

I have a simple scene, a sky during the night:
-There is a first skybox, that represent clouds, the skybox is alpha-blended with visibility=0.3, and alphaMode = BABYLON.Engine.ALPHA_ADD.
-Behind this first skybox is the moon, a simple sphere with texture material on it. I'd like this mesh to be Highlighted.
-Behind everything else is another opaque skybox.

I can see the the first skybox, the one that renders in front of everything else, despite being very "transparent", makes the highlight layer invisible.
Is there any way I could make the highlight be visible behind transparent mesh ?

Thx !

Share this post


Link to post
Share on other sites

Hello,

I have a strange effect using the outline on my meshes.

Seems like some stencil issue, any idea ?

EDIT : the demo is working fine, and canvas has stencil buffer activated (and no warning/errors in the console).

The code :

        var mesh = BABYLON.Mesh.CreateBox("object", 30, scene);
        mesh.material = new BABYLON.StandardMaterial("mat", scene);
        mesh.material.diffuseColor = new BABYLON.Color3(1.0, 0.0, 0.0);

        var hl = new BABYLON.HighlightLayer("hg", scene);
        hl.addMesh(mesh, BABYLON.Color3.Green());

Cheers,

 

Capture.JPG

Share this post


Link to post
Share on other sites

Hello,

It really seems that the stencil is off, we can see the render target used to create the highlight. Could you share your sample ?

About transparency, only alpha tested mesh are discarded. Maybe an exclusion list would work in your case.

So I could easily add an exclusion list to help dealing with this. Basically, all the excluded meshes would not be considered as occlusion for the highlight. Any thoughts ? Transparency order can always be annoying so I prefer to give more control than trying to be smart. I would easily fail here :-) 

Thx

Share this post


Link to post
Share on other sites

I tested ; if not add { stencil: true } scene not loadin in browser ( im using babylon.js prev. release version )

hv material.alpha = 0 meshes blocking highlihts, if must be ( isVisible = false ) not blocking.

transparencies workin very well :)

Trully good workin Sebavan congratz...

i will share my first web page and Babylon scene soon ,still workin on that

Thanks again you and Babylon Community.

Share this post


Link to post
Share on other sites

@Sebavan Your work is already very good, and maybe I'm not using the Highlight feature for what is was meant to be ;-)
An exclusion list would resolve my problem for sure, and I think it would be a useful feature !
Transparency order would be even better but since I don't even know how to help you I can't beg anything lol

Can't wait to read the documentation either, very nice work here, very simple to use and result is beautiful !

Thx for all !

Share this post


Link to post
Share on other sites

@sebavan, found my bug.

You were right the canvas didn't have a stencil buffer, but failed silently.

Indeed, i used getContext("webgl") (without stencil) once to test if WebGL was available, then Babylon's call to getContext somehow reuses the context already fetched, even though you give it { stencil : true }.

Sneaky bug ;)

Thanks !

Share this post


Link to post
Share on other sites

Hi !

I've tried to use the excludedMeshes function, it sorta works because the highlight layer is visible again, but the highlighted meshes become invisible :/
Is it me or a bug ???

Here's a PG displaying the problem :
http://playground.babylonjs.com/#2FFOYQ#2

There are 3 skyboxes with transparency and different sizes, and a row of highlighted meshes. In this example, the first skybox is excluded from the list, which makes the highlight effectively visible, but the highlighted meshes have disappeared :/

Hope I was clear about the explanation ! Is there a way to fix this ?

Thx a lot !

Share this post


Link to post
Share on other sites

Upon making these screenshots I noticed something, the Highlight Layer has a different look depending on canvas resolution :
Look at the highlight around the moon,
First image is full resolution with retina display,
Second image is when the canvas res is lowered with this bit of code : 

canvas.style.width = "50%"; canvas.style.height =  "50%";

var engine = new BABYLON.Engine(canvas, true, { stencil: true });

canvas.style.width = '100%'; canvas.style.height = '100%';

The highlight doesn't behave the same depending on canvas size, handling pixel ratio is always complicated...

full.jpg

half.jpg

Share this post


Link to post
Share on other sites

I have just added an option to chose a fixed size render target for the highlights, this will prevent your issue to happen:

            var hl1 = new BABYLON.HighlightLayer("hl1", scene, { mainTextureFixedSize: 1024 });
            hl1.addMesh(sphere, BABYLON.Color3.Green());

The pr is here: https://github.com/BabylonJS/Babylon.js/pull/1462

This will be in PG tomorrow.

CU,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.