[ Three.js / WebGL ] — Smooth visible outline

Jobs
, ,
1

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:

{ 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
image1386×944 516 KB

1 Like
4

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

5

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.

6

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

1 Like
7

Perhaps jumpflood algorithm? :

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..)

3 Likes
8

Thanks everyone, the solution has been found.

1 Like
9

@gkjohnson Just released this also :blush: Demo: Realtime SDF Effects with the Jump Flood Algorithm

10

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

11

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