Outline Post Process

[mannitou]

Hi,

I am looking for someone who can create an outline post process effect whose thickness can be freely adjusted.

Best

[Antonio]

Are you aware of this? You can modulate ‘thickness’ by adjusting ‘edgeStrength’ value

[mannitou]

I am aware of this. But the parameters are very limited and you cannot increase the thickness a lot.

[Antonio]

Oh I see. You can overcome some limitations by using / combining a sobel filter and signed distance field. What is your expected result and/or use case? Maybe I can be helpfull on this, feel free to send me a dm for further discussion

[manthrax]

@mannitou
@Antonio

The Quest for Very Wide Outlines

[dubois]

Here’s an implementation of a mesh outline. I’m looking into how to make these overlap.
https://codesandbox.io/p/sandbox/three-playground-cd2lzf?file=%2Fsrc%2Findex.ts%3A98%2C1

[mannitou]

Very interesting!

The article states that brute forcing is more about the quality of the outlines but Gaussian blur could also create such thick ones.

I am fine that the outlines are not like in photoshop but can the OutlinePass be adapted to have way thicker outlines?

[manthrax]

There’s a hardcoded constant in the OutlinePass.js MAX_RADIUS which is set to 4, so that limits how big a blur radius… i don’t know if its as easy as copying that file and changing the constant to smth like 16 to get a larger blur radius. It uses a 2 pass gaussian blur internally i think.

[mannitou]

I created a sandbox that shows the jump flood outlines in action: https://codesandbox.io/p/sandbox/jf-outlines-hx8msz

Unfortunately the code is only working for <=0.137.0.

Any idea why it breaks for later versions?: https://codesandbox.io/p/sandbox/jf-outlines-forked-6dxq4w

[manthrax]

Looks like the sandbox is private?

[mannitou]

Oh, you’re right. I made them public!

[manthrax]

in jfaOutline.js, near the end, it is passing a rendertarget directly into the texture uniform instead of the renderTarget.texture… this used to be allowed, but it involved an additional check and was janky, so now it’s explicit. It was throwing a warning in 137 and by 138. the check was removed entirely and they just let it break.

Those outlines are awesome btw. pretty cool.
It works with latest threejs now:

https://codesandbox.io/p/sandbox/jf-outlines-forked-364wz9?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clt3q7w8n0006356hw9lts6tf%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clt3q7w8m0002356hgfqsroj1%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clt3q7w8n0003356hvvja582v%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clt3q7w8n0005356hlq1ck8ht%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B48.1903620661363%252C51.8096379338637%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clt3q7w8m0002356hgfqsroj1%2522%253A%257B%2522id%2522%253A%2522clt3q7w8m0002356hgfqsroj1%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clt3q7w8n0005356hlq1ck8ht%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clt3q7w8n0004356h23wx33zq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clt3q7w8n0005356hlq1ck8ht%2522%252C%2522activeTabId%2522%253A%2522clt3q7w8n0004356h23wx33zq%2522%257D%252C%2522clt3q7w8n0003356hvvja582v%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clt3q7w8n0003356hvvja582v%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[manthrax]

Here’s what I changed/added:

[manthrax]

I cleaned up that JFA outline code some and spruced up the interface… now alpha works and I added a glow mode… check it out!:

Glitch Code Editor ･ﾟ✧

[mannitou]

Nice, this is awesome! Thank you very much! Even though we don’t have depth as OutlinePass to render hidden lines with another color this outline gives us many opportunities.

One thing I noticed. Are we able to antialias the outline?

[manthrax]

You can add:
samples:16
to the rendertarget constructor at line 75 of JFAOutline.js
But the algorithm is already doing a long of pixel pushing so maybe experiment with as small a value as you can afford…

If you need hidden surface, you could maybe do it in 2 pasess front/back… by toggling the depthFunc on the objects materials …

[mannitou]

This is way better. Thanks for your help!

[mannitou]

I just noticed that it’s not working on mobile. Or at least on iOS. Do you know what’s the problem?

[manthrax]

I have some ideas.

[manthrax]

I tried switching to HalfFloatType and it helped it run on my pixel. maybe its ok on ios now?