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

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.