Babylon Highlight layer

Recommended Posts

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


Share this post

Link to post
Share on other sites

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


Share this post

Link to post
Share on other sites

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?  :)

Share this post

Link to post
Share on other sites

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(
    alpha -= .1;

Then later, in the renderLoop...

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

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.