# Drawing 2D GUI over a 3D sketch

**URL:** <https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819>\
**Category:** Coding Questions\
**Created:** [July 24, 2020, 2:33pm UTC](https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819 "2020-07-24T14:33:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shwaa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shwaa/32/9696_2.png) [@Shwaa](https://discourse.processing.org/u/Shwaa)\
**Post date:** [July 24, 2020, 2:33pm UTC](https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819/1 "2020-07-24T14:33:02Z")

</div>

I’m making a 3D game, and a problem I ran into was drawing a 2D GUI over top of the main 3D sketch.  
The solution I found is pretty simple, but it works really well:

```auto
  //IMPORTANT: make sure to use textMode(SHAPE) before using this!! Otherwise text will be drawn as black boxes.
  //GUI
  hint(DISABLE_DEPTH_TEST); //draws on top of whatever is drawn on screen
  camera(); //reset camera to default position, which conveniently lines up with the screen exactly
  ortho(); //orthographic projection removes any need for the z axis
  //start drawing whatever!
  fill(0);
  textSize(50);
  text("Test", 11, 110);
  hint(ENABLE_DEPTH_TEST); //re-enable depth test so the rest of the scene can be drawn normally
  //you can reset the camera to perspective now, or at the beginning of draw()

```

**Make sure that this code runs last in `draw()`, because disabling the depth test will make any geometry drawn after the GUI ignore the depth of all geometry drawn before the GUI, resulting in weirdness.**  
The default camera position is the perfect position for a 2D canvas within a 3D scene since it automatically positions the (0, 0) and (width, height) coordinates at opposite corners of the screen, just like a regular 2D sketch. An orthographic projection is preferred over perspective to remove any possible z-axis or FOV influence. Also, the default parameters for the ortho() projection sets the clipping bounds to exactly surround (0, 0) and (width, height). It works out so nicely; it only requires 5 lines of code and you don’t even have to type a single number to set it up.

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [July 24, 2020, 3:06pm UTC](https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819/2 "2020-07-24T15:06:37Z")

</div>

Great that you are sharing this @Shwaa!

I have been using something like this also:

```auto
pushMatrix();
resetMatrix();
// 2D stuff here
popMatrix();

```

And when I’m using wonderful **PeasyCam** orbit library ([http://mrfeinberg.com/peasycam/](http://mrfeinberg.com/peasycam/)):

```auto
camera.beginHUD();
// now draw things that you want 
camera.endHUD(); //

```

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [August 17, 2026, 9:14am UTC](https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819/3 "2026-08-17T09:14:18Z")

</div>

For some reason outlines are always drawn on top of other things.  
Also when using `camera.beginHUD();` in peasycam.

```java  
fill(255, 255, 0);  
stroke(30);  
rect(10, 10, 100, 100);

text(“why can I always see the outline of the above rectangle?”, 10, 10);

fill(0, 255, 0);  
rect(0, 0, 400, 400);  
```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 18, 2026, 1:49am UTC](https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819/4 "2026-08-18T01:49:38Z")

</div>

> [@clankill3r](#):
>
> For some reason outlines are always drawn on top of other things.

[hint() / Reference / Processing.org](https://processing.org/reference/hint_.html) \< See _DISABLE\_OPTIMIZED\_STROKE_