Babylon Highlight layer

[meteoritool]

Awesome ! That'll make your work more consistent across devices, but also more "creative" approach with different texture sizes ;-) Can't wait to try it !

Here's another one for you : Would there be a possibility to make the HighlightLayer visible in the WaterMaterial ??? So far, water doesn't reflect the layer ... (haven't try mirror or other targets...) ... Anyway, thanks a lot in the name of the community for your work :-) It is much more power efficient than volumetricLight and very good looking =)

 

[Sebavan]

And here is the doc:

http://doc.babylonjs.com/tutorials/Highlight_Layer

For the water I would recommend using a second camera to generate the texture. I do not plan to integrate directly in the render target so far.

Best Regards,

[jerome]

tip top !

[meteoritool]

Hi !

@Sebavan Is there a way to implement highlightLayer.setEnabled(false) or something similar ?

[Sebavan]

Yep, I ll do at the weekend on a per layer basis, basically, removing it frfom the scene and re adding it should do :-)

I could also add a global flag to stop them all in one shot ?

[meteoritool]

Right now I use :
hl.innerGlow = false; hl.outerGlow = false;

setEnabled and isEnabled functions would be just for the whole BJS consistency I guess 

Is there a way to implement Color4 instead of Color3 ???

[Sebavan]

isEnabled has been added to the highlightlayer here and should be soon in the PG: https://github.com/BabylonJS/Babylon.js/pull/1514

 

[greenlig]

This is a really useful addition. Is there a way to control the line more?

For example, if I want a thin but sharp glow around an object, how would I achieve this? Have a look at this reference image: 

 

It has a well defined outline that fades quickly. I'm finding it hard to replicate that with the highlight layers. The closest I can get is:

using this code:

 // Create Highlight layer and tweak settings
    h1 = new BABYLON.HighlightLayer("hg", scene, { alphaBlendingMode: 6, blurTextureSizeRatio : 0.5});
    h1.innerGlow = false;
    h1.outerGlow = true;
    h1.blurHorizontalSize = 0.2;
    h1.blurVerticalSize = 0.2;

It's not optimal, the blur is quite messy.

Any help is greatly appreciated

greenlig

[DigiHz Data]

Highlight layer looks very strange in the PG's.

Looked ok 1 or 2 days ago.

Some resent update that was made wrong?

[GameMonetize]

should be good now

[Sebavan]

@DigiHz Data Pg has been fixed (Stencil has been disabled through the PG Migration)

 

@greenlig Could you create a PG ? I guess you would need to define a bigger texture res through the options like http://playground.babylonjs.com/#150IU7

[DigiHz Data]

@Sebavan

It is working again now.

FYI i will make a PG for highlightlayer with the dat.GUI.

I announce here when i am done with it.

[DigiHz Data]

A little PG for you all to test Highlight layer with.

http://www.babylonjs-playground.com/#2HRRUQ#0

[greenlig]

On 11/23/2016 at 12:12 PM, Sebavan said:

 

@greenlig Could you create a PG ? I guess you would need to define a bigger texture res through the options like http://playground.babylonjs.com/#150IU7

Ah, that did it. Thanks!

[Koroldev]

Hello all. Someone, tell me please why if I write:

new BABYLON.HighlightLayer("hl1", this.scene);

then I get error:

[Sebavan]

I guess the version you are using is a bit old, try using the latest released 2.5 or 2.6 preview.

[Myjestic]

Hi all,

is there any possibility to apply the hl only to the outer borders. Behaviour with alpha materials is not as suspected.

http://www.babylonjs-playground.com/#2HRRUQ#1

[Arte]

39 minutes ago, Myjestic said:

Hi all,

is there any possibility to apply the hl only to the outer borders. Behaviour with alpha materials is not as suspected.

http://www.babylonjs-playground.com/#2HRRUQ#1

Hi @Myjestic

Line 41. http://www.babylonjs-playground.com/#2HRRUQ#2

Is this what you were looking for?

[Myjestic]

@Arte

Unfortunately not. I want to highlight the border of the transparent sphere. I want to see through it but the border should glow green.

[Myjestic]

Hi @Sebavan and other Babylonists,

anyone an idea on how to make a glowing border on a transparent mesh?

Have a look at this http://www.babylonjs-playground.com/#2HRRUQ#3.

[Sebavan]

this is unfortunately not supported.

[Wingnut]

Myjestic... a "weird way" would be to use THAT mesh as a particleSystem emitter.  Set the ps.emitbox and dir1/2 so that particles emit from all mesh surface.  Set a smoke-like texture, set maxLifetime real real low, and emit like hell.    This will cause the mesh to have a fuzzy surface, but it will be seen/experienced TOWARD cam and on mesh back-side. 

So it's not a 2d border around the mesh... it's a 3D border/surface.  This will likely "diminish" the look-of-transparency... of the mesh (because particles spraying short distance in all directions from mesh... will give it a solid-looking surface, again.)

This is a strange method of "highlighting" or "selecting" a mesh, but, sometimes... who knows? 

[Myjestic]

@Wingnut

This i a nice approach. I have many meshes I want to highlight. So I am concerning about performance. I will give it a try. Thank you.

[Wingnut]

Hi again, M.  In another project...  we first made a func... called colorPulser()

var alpha = .5;
var colorPulser = function(mesh) {
    mesh.material.emissiveColor = new BABYLON.Color3(
        Math.sin(alpha)/15, 
        Math.sin(alpha)/15, 
        Math.sin(alpha)/15
    );
    alpha -= .1;
};

Then later, in the renderLoop...

if (myPickedMesh) {
    colorPulser(myPickedMesh);
}

I think this method could work on an entire array of selectedMesh... and not slow things down.  And, it's a pretty nice effect... works fine with textured objects... might even work fine with semi-transparent mesh.  It's just another thing to try... to indicate that something is selected.  Off-topic for this thread, sorry readers.  Be well, gang.