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

p5.js Coding Questions
1

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 , but it messes up the scale and stroke. Also, sorry if I wrote this wrong, I just joined this forum. Thanks!

2

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.

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);
}
1 Like
3

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