# Turning Depth Buffer into a PGraphics element

**URL:** <https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184>\
**Category:** Coding Questions\
**Created:** [September 24, 2019, 9:32pm UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184 "2019-09-24T21:32:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dehyde](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dehyde/32/5153_2.png) [@dehyde](https://discourse.processing.org/u/dehyde)\
**Post date:** [September 24, 2019, 9:32pm UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/1 "2019-09-24T21:32:59Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dda327dc1dfcdc3b60453f949b53299347356c8e.jpeg)

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

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 25, 2019, 3:59am UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/2 "2019-09-25T03:59:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dehyde](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dehyde/32/5153_2.png) [@dehyde](https://discourse.processing.org/u/dehyde)\
**Post date:** [September 25, 2019, 6:12am UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/3 "2019-09-25T06:12:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 25, 2019, 6:17am UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/4 "2019-09-25T06:17:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dehyde](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dehyde/32/5153_2.png) [@dehyde](https://discourse.processing.org/u/dehyde)\
**Post date:** [September 25, 2019, 6:22am UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/5 "2019-09-25T06:22:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 25, 2019, 6:26am UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/6 "2019-09-25T06:26:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 25, 2019, 10:33pm UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/7 "2019-09-25T22:33:06Z")

</div>

> [@dehyde](#):
>
> Can it be applied to p5JS?

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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 25, 2019, 10:39pm UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/8 "2019-09-25T22:39:26Z")

</div>

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

> [@Using stencils in P2D / P3D](https://discourse.processing.org/t/using-stencils-in-p2d-p3d/13207):
>
> I asked Andres Colubri if he could help me out with getting stencils to work in processing. Here it is, and it’s freaking awesome. // Adapted from https://learnopengl.com/Advanced-OpenGL/Stencil-testing void setup() { size(600, 600, P3D); noStroke(); } void draw() { PGL pgl = beginPGL(); pgl.enable(PGL.STENCIL\_TEST); pgl.stencilOp(PGL.KEEP, PGL.KEEP, PGL.REPLACE); background(100); lights(); pgl.stencilMask(0); fill(128); drawFloor(); flush(); pgl.stenc…

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7ece26a7a95c1d53de5a6f7cd7d6fd6760d8872b.png)

---

<div class="post-metadata">

**Author:** ![dehyde](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dehyde/32/5153_2.png) [@dehyde](https://discourse.processing.org/u/dehyde)\
**Post date:** [October 25, 2019, 11:10am UTC](https://discourse.processing.org/t/turning-depth-buffer-into-a-pgraphics-element/14184/9 "2019-10-25T11:10:04Z")

</div>

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