# \[ Three.js / WebGL \] — Smooth visible outline

**URL:** <https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848>\
**Category:** Jobs\
**Tags:** post-processing, geometry, shaders\
**Created:** [November 1, 2025, 3:34pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848 "2025-11-01T15:34:25Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![waiper](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waiper/32/64292_2.png) [@waiper](https://discourse.threejs.org/u/waiper)\
**Post date:** [November 1, 2025, 3:34pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/1 "2025-11-01T15:34:25Z")

</div>

### Hi everyone,

We’re looking for a developer experienced with **Three.js / WebGL** to help implement a **real-time smooth outline** of the _visible parts_ of 3D objects — essentially the camera-projection contour.

**Goal:**  
Render the visible geometry of multiple 3D meshes as **clean, anti-aliased contours** , centered on object borders. Each object should have its own parameters:

```javascript
{ width, color, opacity }

```

**Requirements:**

- Real-time rendering ( **30+ FPS on macOS** )

- Around **100+ unique objects** visible at once

- Outline must be **smooth** , not pixelated

- Preferably **vector (path-based)** result

- Implementation using **Three.js (r160+) / WebGL2 / GLSL shaders**

**What’s already tried:**  
Post-processing outline methods — quality poor or aliased; supersampling improves visuals but kills performance. We need a more efficient real-time approach.

**Payment:** Any digital method  
**Contact:** DM me or reply here

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/8/18c956c3ff3fff23792ebf86ab692e33e984a237.jpeg)

---

<div class="post-metadata">

**Author:** ![discourse\_ai\_spam](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@discourse\_ai\_spam](https://discourse.threejs.org/u/discourse_ai_spam)\
**Post date:** [November 1, 2025, 3:34pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/2 "2025-11-01T15:34:48Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c74c5243388bbfa21a39c3e824ddba702a623dec.png) [@system](https://discourse.threejs.org/u/system)\
**Post date:** [November 1, 2025, 3:35pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/3 "2025-11-01T15:35:35Z")

</div>



---

<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:** [November 2, 2025, 1:03am UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/4 "2025-11-02T01:03:39Z")

</div>

> **[GitHub - pailhead/three-line-outline](https://github.com/pailhead/three-line-outline)**
>
> Contribute to pailhead/three-line-outline development by creating an account on GitHub.

This might work out of the box. If not, I can be hired 🙂

---

<div class="post-metadata">

**Author:** ![waiper](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waiper/32/64292_2.png) [@waiper](https://discourse.threejs.org/u/waiper)\
**Post date:** [November 2, 2025, 12:35pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/5 "2025-11-02T12:35:10Z")

</div>

The library doesn’t work, and judging by the examples, I can see that it’s not what I need. Please send me a DM.

---

<div class="post-metadata">

**Author:** ![Adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@Adam](https://discourse.threejs.org/u/Adam)\
**Post date:** [November 3, 2025, 5:48pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/6 "2025-11-03T17:48:46Z")

</div>

this is my demo to implement your requirements.  
Please check video.

---

<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:** [November 3, 2025, 6:33pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/7 "2025-11-03T18:33:11Z")

</div>

Perhaps jumpflood algorithm? :

[https://manthrax.github.io/jumpflood/](https://manthrax.github.io/jumpflood/)

(Edit: I haven’t looked at my demo here in a while, and it’s kinda artifacty on mobile.. might be a numeric precision issue.. but it’s a cool algo nonetheless..)

---

<div class="post-metadata">

**Author:** ![waiper](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waiper/32/64292_2.png) [@waiper](https://discourse.threejs.org/u/waiper)\
**Post date:** [November 10, 2025, 1:16pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/8 "2025-11-10T13:16:57Z")

</div>

Thanks everyone, the solution has been found.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 10, 2025, 4:23pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/9 "2025-11-10T16:23:40Z")

</div>

@gkjohnson Just released this also 😊 [Demo: Realtime SDF Effects with the Jump Flood Algorithm](https://discourse.threejs.org/t/demo-realtime-sdf-effects-with-the-jump-flood-algorithm/88012)

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [November 12, 2025, 2:31am UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/10 "2025-11-12T02:31:50Z")

</div>

**Is this better in performance for post-processing edges than the official three.js site?**

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c74c5243388bbfa21a39c3e824ddba702a623dec.png) [@system](https://discourse.threejs.org/u/system)\
**Post date:** [December 1, 2025, 3:35pm UTC](https://discourse.threejs.org/t/three-js-webgl-smooth-visible-outline/87848/11 "2025-12-01T15:35:16Z")

</div>

This topic was automatically closed after 30 days. New replies are no longer allowed.