Tips on how to create something like three postprocessing_outline in babylon js

Questions
1

Hi All,

I am new to babylon js and I was looking into creating something like highlight the pointed mess by mouse event something similar to three.js webgl - post processing - Outline Pass (threejs.org)

Any tips, how to would really get me started.

Thank you in advance.

1 Like
2

Hello and welcome to the Babylon community! :smiley:

We have a lot of tools that make that pretty easy, like Rendering Edges | Babylon.js Documentation (babylonjs.com), and Highlighting Meshes | Babylon.js Documentation (babylonjs.com) :slight_smile:

1 Like
3

Thank you very much :smiley: , I will take a look into those

1 Like
4

Hi @carolhmj

I tried edge rendering, but for sphere is does not work correctly

image
image553×518 17 KB

does it support only some geometry types?

What I am trying to do is, lets say I have complex geometry and I want to highlight the complete edge of geometry that is pick by pointermove. Geometry could be anything.

Thank in advance

5

Can you provide us with a example on the Playground? Babylon.js Playground (babylonjs.com)

6

Hi @carolhmj

Here is the playground I am working with: SamplePlaygroudUP | Babylon.js Playground (babylonjs.com)

Some of the issues are:

It highlights only visible part of the geometry

image
image695×524 28.1 KB

I would like to have full geometry highlighted.
Also, it should be robust to work with different geometry/shapes

Something like this:

image

7

My favourite solution for this case is @Blake 's :slight_smile: Highlight occluded - #16 by Blake

2 Likes
8

No, if you look at the Edges Renderer documentation Rendering Edges | Babylon.js Documentation (babylonjs.com), there’s the explanation for which edges are drawn:

image
image1849×738 66.5 KB

So you just need to change the epsilon parameter to suit your needs :slight_smile: Parametric extrusion edges | Babylon.js Playground (babylonjs.com)

2 Likes
9

Hi @carolhmj

I have done something similar to the three js here: SamplePlaygroudUP_Selection | Babylon.js Playground (babylonjs.com)

But I want to somehow link those all to multipass render to texture and get final result.

Can you please take a look and suggest some ways?

Thank you very much, you have been supporting a lot to understand how the babylon js works

10

Hello, take a look at this Render Target Texture With Multiple Passes | Babylon.js Documentation (babylonjs.com) :smiley:

1 Like