# Outline Post Process

**URL:** <https://discourse.threejs.org/t/outline-post-process/61911>\
**Category:** Jobs\
**Created:** [February 25, 2024, 12:14pm UTC](https://discourse.threejs.org/t/outline-post-process/61911 "2024-02-25T12:14:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 25, 2024, 12:14pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/1 "2024-02-25T12:14:00Z")

</div>

Hi,

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

Best

---

<div class="post-metadata">

**Author:** ![Antonio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio/32/27527_2.png) [@Antonio](https://discourse.threejs.org/u/Antonio)\
**Post date:** [February 25, 2024, 6:19pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/2 "2024-02-25T18:19:01Z")

</div>

Are you aware of [this](https://threejs.org/examples/?q=outline#webgl_postprocessing_outline)? You can modulate ‘thickness’ by adjusting ‘edgeStrength’ value

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 25, 2024, 6:28pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/3 "2024-02-25T18:28:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Antonio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio/32/27527_2.png) [@Antonio](https://discourse.threejs.org/u/Antonio)\
**Post date:** [February 25, 2024, 7:20pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/4 "2024-02-25T19:20:03Z")

</div>

Oh I see. You can overcome some limitations by using / combining a sobel filter and [signed distance field](http://contourtextures.wikidot.com/). 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

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 26, 2024, 2:54am UTC](https://discourse.threejs.org/t/outline-post-process/61911/5 "2024-02-26T02:54:02Z")

</div>

@mannitou  
@Antonio

> **[The Quest for Very Wide Outlines](https://bgolus.medium.com/the-quest-for-very-wide-outlines-ba82ed442cd9)**
>
> An Exploration of GPU Silhouette Rendering

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [February 26, 2024, 5:06am UTC](https://discourse.threejs.org/t/outline-post-process/61911/6 "2024-02-26T05:06:04Z")

</div>

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](https://codesandbox.io/p/sandbox/three-playground-cd2lzf?file=%2Fsrc%2Findex.ts%3A98%2C1)

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 26, 2024, 7:52am UTC](https://discourse.threejs.org/t/outline-post-process/61911/7 "2024-02-26T07:52:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 26, 2024, 10:06am UTC](https://discourse.threejs.org/t/outline-post-process/61911/8 "2024-02-26T10:06:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 26, 2024, 1:40pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/9 "2024-02-26T13:40:59Z")

</div>

I created a sandbox that shows the jump flood outlines in action: [https://codesandbox.io/p/sandbox/jf-outlines-hx8msz](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](https://codesandbox.io/p/sandbox/jf-outlines-forked-6dxq4w)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 26, 2024, 6:07pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/10 "2024-02-26T18:07:59Z")

</div>

Looks like the sandbox is private?

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 26, 2024, 6:57pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/12 "2024-02-26T18:57:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 27, 2024, 2:27am UTC](https://discourse.threejs.org/t/outline-post-process/61911/13 "2024-02-27T02:27:41Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/0/701d9d7f5d9b32c915b4fadba4980e642ee08df7.png)

[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](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)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 27, 2024, 2:30am UTC](https://discourse.threejs.org/t/outline-post-process/61911/14 "2024-02-27T02:30:31Z")

</div>

Here’s what I changed/added:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/574610207b0d6b31b3d803dfe06cb1dd60d1c6c3.png)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 27, 2024, 8:50am UTC](https://discourse.threejs.org/t/outline-post-process/61911/15 "2024-02-27T08:50:31Z")

</div>

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 ･ﾟ✧](https://glitch.com/edit/#!/smooth-road-nerine)**
>
> Simple, powerful, free tools to create and use millions of apps.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/a/bafa9d7c034442b2b49f9a71d000a2814cc1fef5.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ff1d94adb1fb0ec49f238148da09306e87fa45d5.jpeg)

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 27, 2024, 11:57am UTC](https://discourse.threejs.org/t/outline-post-process/61911/16 "2024-02-27T11:57:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 27, 2024, 12:05pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/17 "2024-02-27T12:05:16Z")

</div>

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 …

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 27, 2024, 1:38pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/18 "2024-02-27T13:38:16Z")

</div>

This is way better. Thanks for your help!

---

<div class="post-metadata">

**Author:** ![mannitou](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mannitou](https://discourse.threejs.org/u/mannitou)\
**Post date:** [February 27, 2024, 8:01pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/19 "2024-02-27T20:01:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 27, 2024, 10:54pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/20 "2024-02-27T22:54:36Z")

</div>

I have some ideas.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 28, 2024, 2:12pm UTC](https://discourse.threejs.org/t/outline-post-process/61911/21 "2024-02-28T14:12:39Z")

</div>

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

[Next page](https://discourse.threejs.org/t/outline-post-process/61911.md?page=2)