# Trying to get outlines on every object added to a HighlightLayer

**URL:** <https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424>\
**Category:** Questions\
**Created:** [July 23, 2022, 2:21pm UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424 "2022-07-23T14:21:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![JacobF](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacobf/32/36046_2.png) [@JacobF](https://forum.babylonjs.com/u/JacobF)\
**Post date:** [July 23, 2022, 2:21pm UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/1 "2022-07-23T14:21:44Z")

</div>

My scene has a ton of objects so I couldn’t take the approach of multiple HighlightLayers.

I’m also interested in other possible approaches. I tried using the SSAO post process to some success making outlines, but it didn’t quite capture the style I’m going for.

[Playground link](https://playground.babylonjs.com/#XDI3YS#13) - I don’t want the outline of the two objects to merge together

---

<div class="post-metadata">

**Author:** ![JacobF](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacobf/32/36046_2.png) [@JacobF](https://forum.babylonjs.com/u/JacobF)\
**Post date:** [July 24, 2022, 2:42am UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/2 "2022-07-24T02:42:50Z")

</div>

I got some results I’m pretty happy with from modifying the sharpen post process. 😃

 ![Screenshot from 2022-07-24 09-39-13](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/6/96febafdfa1a7f52f2c08805c4c55ab9bf9a8c55.jpeg)

Here’s the glsl code:

```auto
#ifdef GL_ES
precision highp float;
#endif

// Samplers
varying vec2 vUV;
uniform sampler2D textureSampler;
uniform sampler2D depthSampler;
uniform vec2 screenSize;
uniform vec4 sharpnessAmounts; // x = amount, y = offset, z = color threshold, w = depth threshold

void main(void)
{
  vec2 onePixel = vec2(1.0, 1.0) / screenSize * sharpnessAmounts.w;
  vec4 color = texture2D(textureSampler, vUV);
  vec4 depth = texture2D(depthSampler, vUV);
    
  vec4 edgeDetection =
    texture2D(textureSampler, vUV + onePixel * vec2(0, -1)) +
    texture2D(textureSampler, vUV + onePixel * vec2(-1, 0)) +
    texture2D(textureSampler, vUV + onePixel * vec2(1, 0)) +
    texture2D(textureSampler, vUV + onePixel * vec2(0, 1)) -
        color * 4.0;
        
  vec4 depthEdgeDetection =
    texture2D(depthSampler, vUV + onePixel * vec2(0, -1)) +
    texture2D(depthSampler, vUV + onePixel * vec2(-1, 0)) +
    texture2D(depthSampler, vUV + onePixel * vec2(1, 0)) +
    texture2D(depthSampler, vUV + onePixel * vec2(0, 1)) -
        depth * 4.0;

  float amount = dot(edgeDetection.rgb, vec3(1.)) / 3.;
  float amountDepth = depthEdgeDetection.r;
  vec4 edge = (amount > sharpnessAmounts.y || amountDepth > sharpnessAmounts.z) ? vec4(vec3(clamp(1. - amount - amountDepth, 0., 1.)) / sharpnessAmounts.x, 1.) : vec4(1.);
  gl_FragColor = color * edge;
}

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [July 24, 2022, 10:55am UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/3 "2022-07-24T10:55:24Z")

</div>

I believe your approach of choosing an alternative is good (although I do not know what result you wanted to achieve). Sadly, the highlight layer has multiple issues with the rendering order and is also heavily impacting performance. I hope some day we will be able to improve it but it doesn’t look like something easy.

---

<div class="post-metadata">

**Author:** ![JacobF](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jacobf/32/36046_2.png) [@JacobF](https://forum.babylonjs.com/u/JacobF)\
**Post date:** [July 24, 2022, 11:25am UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/4 "2022-07-24T11:25:14Z")

</div>

I haven’t looked into exactly how the HighlightLayer is working, however I recall seeing one method where each object is rendered with a different color before processing that achieved individually outlined objects.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [July 24, 2022, 11:31am UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/5 "2022-07-24T11:31:59Z")

</div>

Indeed, there are other methods such as i.e. the edge rendering

> **[Rendering Edges | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/mesh/edgeRenderer)**
>
> Learn all about the edge renderer in Babylon.js.

You can also achieve outline based on vertices, using shaders (such as the toons shader) and/or combined with a node material. It all depends on the type of design/fx you want to achieve.  
But none really have the same ‘glowing’ fx as the highlight layer. So I believe an improved highlightLayer would certainly be welcomed.

---

<div class="post-metadata">

**Author:** ![zb\_sj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zb_sj/32/28923_2.png) [@zb\_sj](https://forum.babylonjs.com/u/zb_sj)\
**Post date:** [August 20, 2024, 2:37am UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/6 "2024-08-20T02:37:05Z")

</div>

Here is [PG](https://playground.babylonjs.com/#39WY44#1) of OP’s shader if anyone’s interested.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/d/7dbf130071d83e4cdb6a73ed8322b329794602b3.jpeg)

and here’s [edge for normal](https://playground.babylonjs.com/#39WY44#2) instead of color

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/8/486eafeaa4432c85403d1bacfd61b1ec88b37f30.jpeg)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 20, 2024, 4:47pm UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/7 "2024-08-20T16:47:51Z")

</div>

Cooool !!!

---

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [October 3, 2024, 8:28pm UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/8 "2024-10-03T20:28:14Z")

</div>

Hi all sorry for necrobumping this thread!

I’ve been trying to create a post process with the NME using this shader. This is as far as I am right now, but I think I’m not understanding some aspects of it, or how to translate the raw shader code into the NME. Can you guys help a bit or can you see what is blatantly wrong?  
[Babylon.js Node Material Editor (babylonjs.com)](https://nme.babylonjs.com/#BG86RX#10)  
Simple PG with this:  
[Custom postprocess demo | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#DAC1WM#392)

EDIT: Updated NME

---

<div class="post-metadata">

**Author:** ![zb\_sj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zb_sj/32/28923_2.png) [@zb\_sj](https://forum.babylonjs.com/u/zb_sj)\
**Post date:** [October 17, 2024, 9:43am UTC](https://forum.babylonjs.com/t/trying-to-get-outlines-on-every-object-added-to-a-highlightlayer/32424/9 "2024-10-17T09:43:49Z")

</div>

Sorry for late response.

I don’t think normal buffer is straight forwardly available in NME.

here’s my take on color edge detection

> **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#BG86RX%2315)**
>
> Babylon.js Node material editor - shader-based materials editor for Babylon.js

> **[Babylon.js Playground](https://playground.babylonjs.com/#DAC1WM%23425)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes