Turning Depth Buffer into a PGraphics element

Processing Coding Questions
1

I want to create 2d outlines for objects on 3d space, to simulate some sort of “technical illustration” or Ikea instructions style rendering, similar to what SolidWorks Composer is doing
(notice how external stroke is heavier than internal stroke):

image
image.jpg1024×662 82 KB

I’m thinking about the right approach for this.
I was thinking about using Depth Buffer / Depth Map and then use Detect Edges on that image.
Any idea how to I get the Depth Buffer in a way I can use it to detect edges and create this type of outline?

Also, other ideas on how to approach this would be wonderful

1 Like
2

Have you taken a look at the PDE shader examples? Sounds like the EdgeFilter shader would be just the right thing.

1 Like
3

Seems like it can help with detecting edges on a 2D image (which may be useful once I understand how can I use the Depth Buffer as an image).

4

The EdgeFilter shader isn’t for 2D images. It requires 3D data. You might be thinking of the EdgeDetection example (which operates on 2D images).

1 Like
5

YES! you’re right!
Can it be applied to p5JS?

6

I haven’t used p5js so I’m not 100% sure, but it’s just applying a shader, so I am at least 98% sure.

7

Wait, is this a p5.js question, and should it be moved to that channel? Or do you want it to work in both Java mode and p5.js?

8

You may also be interested in this recent thread on stencil shaders.

970×998 27.1 KB

3 Likes
9

It’s pretty cool, but I think it only works with simple primitives, right? more complex shape will have a weird changing outline width