Babylon Highlight layer

[Sebavan]

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,

[jerome]

beautiful 

[NasimiAsl]

# pushmesh => converted to Add Mesh 

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

[Klaas]

very nice ... would be even nicer if the outline could also be rendered in front of obstructing geometry

[meteoritool]

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 !

[Feldspar]

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,

 

[GameMonetize]

Ping @Sebavan

[Kemal UÇAR]

Very nice Thanks Sebevan

[Sebavan]

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

[Kemal UÇAR]

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.

[meteoritool]

@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 !

[Feldspar]

@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 !

[GameMonetize]

We all can't wait for the documentation

[Sebavan]

excludedMesh in PR https://github.com/BabylonJS/Babylon.js/pull/1405

@deltakosh, I may have time for the documentation this Week End ;-)

 

 

[GameMonetize]

lol..I said nothing for once

[meteoritool]

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 !

[Sebavan]

I am on it ! talk to you soon. It is definitely a bug.

[Sebavan]

PR is in for the fix: https://github.com/BabylonJS/Babylon.js/pull/1413

 

But you will need to change your code to use layer.addExcludedMesh(mesh) I needed more code to make it work. It is still in preview so breaking changes are allowed :-)

[Sebavan]

Here it is:

http://playground.babylonjs.com/#2FFOYQ#5

[meteoritool]

Awesome work, thank you ;-)

 

[jerome]

simply beautiful

[meteoritool]

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

[Sebavan]

Yep, agree it is not ideal :-) I will check what I can do but I was really hoping that nobody would notice it...

[Sebavan]

I ll fix it this week end due to a busy work week... sorry for the delay, do not hesitate to shout if you need it earlier.

[Sebavan]

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,