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

p5.js Coding Questions
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