# Is there a way to draw rectangles in WebGL mode without it being affected by the camera?

**URL:** <https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814>\
**Category:** Coding Questions\
**Created:** [March 24, 2021, 11:44pm UTC](https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814 "2021-03-24T23:44:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![graph100](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/graph100/32/12557_2.png) [@graph100](https://discourse.processing.org/u/graph100)\
**Post date:** [March 24, 2021, 11:44pm UTC](https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814/1 "2021-03-24T23:44:39Z")

</div>

Hi, I’ve been wondering for some time if there is a way to draw rectangles (or any 2d shape for that matter) in WebGL mode without it being affected by the camera angle. I’d like to make some kind of GUI system where the user can click on things but can also see a 3d view. I’ve tried drawing things relative to the camera but it just seems really inefficient and like there is a better way to about this. Of course I could write my own 3d engine but that seems like it would be much more of a hassle than doing it within WebGL mode. I’ve kinda gotten it to work here: [p5.js Web Editor](https://editor.p5js.org/graph100/sketches/i1PD6j1Nd) , but it messes up the scale and stroke. Also, sorry if I wrote this wrong, I just joined this forum. Thanks!

---

<div class="post-metadata">

**Author:** ![rbrauer](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rbrauer](https://discourse.processing.org/u/rbrauer)\
**Post date:** [March 25, 2021, 2:52pm UTC](https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814/2 "2021-03-25T14:52:42Z")

</div>

You can use `camera()` with no arguments to reset the camera matrix. See the thread linked below for how to turn off depth testing so that the UI is drawn on top of the 3D scene.

```javascript
let gl;

function setup() {
  createCanvas(400, 400, WEBGL);
  gl = document.getElementById('defaultCanvas0').getContext('webgl');
}

function draw() {
  background(220);
  
  camera(
    cos(frameCount * 0.01) * 200, 0, 
    sin(frameCount * 0.01) * 200, 
    0, 0, 0, 
    0, 1, 0
  );
  box(50);

  camera();
  gl.disable(gl.DEPTH_TEST);
  rect(0, 0, 200, 200);
  gl.enable(gl.DEPTH_TEST);
}

```

> [@hint(DISABLE\_DEPTH\_TEST) in P5](https://discourse.processing.org/t/hint-disable-depth-test-in-p5/5595/):
>
> Hey everybody, do you know how to get the same functionality of the hint function in P5? Cannot seem to find it anywhere. Thank you!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 25, 2021, 4:19pm UTC](https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814/3 "2021-03-25T16:19:22Z")

</div>

just to add, you can also do `gl = drawingContext;` instead. And if you want to make 2d and 3d together, perhaps working with p5.Graphics would be more intuitive and clean  
[https://p5js.org/examples/structure-create-graphics.html](https://p5js.org/examples/structure-create-graphics.html)