Outline Post-Process

[UNIT]

I have completed the outline post-process.

Outline Post Process video

By detecting and displaying the outline with the normal and depth map of the scene.

I created a new outline post-processing effect because ‘highlight layer,’ ‘render outline,’ and ‘edge rendering’ suffer from overlapping sides or imperfect rendering of rounded parts.

I think it’s pretty cool

If I have a chance, I will consider distributing it later.

[CrashMaster]

Awesome! I would be curious to see how you made the normal buffer for the scene, if you can share the code of course

[Deltakosh]

So cool! is that something you plan to share?

[UNIT]

Thanks

I get the scene normal by using this line.

var gBuffer = scene.enableGeometryBufferRenderer();

And you can get the normal with this line.

gBuffer.getGBuffer().textures[1]

In my case, I set the “normalSampler” with that in my post-process effect.

[UNIT]

I’d love to!

BabylonJS is designed to make development using 3D easy, so it was possible,
and I’m willing to share it gladly.

However, it seems that it’ll be after I first use this feature for my project. (It will take a few months)

I plan to modularize it into a package for my project, but will that be inconvenient for users?

If so, would it be better to submit a PR directly?

[sebavan]

cc @RaananW for the best way to share it

[ZGltYQ]

Personally i would prefer to use this wonderful feature directly from babylon )

[UNIT]

Then I’ll think about it

[RaananW]

The best (for everyone IMO) would be to rlease it as an npm package for both umd and es6, allowing people to decide whether or not they use it, and how.
I am planning on making a sample project that does exactly that, but I am nowhere near finding the time to do that. I will be happy to provide some guiding points, if you want.
However, if it fits in the core library, feel free to submit a PR! We love those . Due to back-compat, we will need to fully understand how it works, because it will have to be maintained.

[brightMoon]

Quick, fast, fast, I want to learn from it

[Panuchka]

Could you release a playground how to do this effect? Would be super cool to see that

[Adams]

I also want to see playground.

[noname0310]

Here’s an outline renderer that’s created with the comparable quality of the internal code of the Babylon.js engine. Use an implementation of the inverted hull outline method
mmdOutlineRenderer.ts

And here’s a simple PG that uses the outline renderer.

Babylon.js Playground

See if you need to outline render

[Tricotou]

By the way @UNIT your YT channel seems to be gold, too bad I don’t understand a word of Corean, but still, the visuals are cool

[oriongu]

Hey,

Tthis looks great! Thanks alot for sharing.

This is probablu a dumb question, but would this work on instances? I’ve been waiting for something like this to “turn up” so I can decently highlight characters/items/etc… on mouseover for my project

[UNIT]

I’m currently setting things up to contribute this feature.
While I can’t guarantee an exact timeline, I’ll work to complete it asap

[roland]

@oriongu

This is probablu a dumb question, but would this work on instances?

It’s working:

Babylon.js Playground

[oriongu]

Nice

It looks like it work, but not as I was expecting

[noname0310]

If you’re rendering as transparent, you might get this artifact

Try this to resolve:

material.forceDepthWrite = true;

And try scaling down the outline to the appropriate size

If you could upload the asset, I can see exactly what the problem is

[oriongu]

thanks, seems to work better if I reduce the outline width. so you know, I do have a 30 fps hit to performance whenever the outline is acive.