P5.js旋转时被2D背景覆盖的WebGL 3D图形

我想用P5显示两个东西，一个是2D背景，另一个是3D WebGL前景，两者都是由P5生成的。我注意到的是，即使我在draw()函数中绘制2D背景之前绘制3D内容，当rotateX()或rotateY()被调用时，3D内容仍然会被背景部分覆盖。它看起来像这样：

我怀疑发生的情况是2D和3D都在同一个Z平面上，因此当前景旋转时，其中一些会被背景覆盖，与覆盖的部分相比，背景现在位于前面。

所以我的问题是，我如何才能将背景完全保留在后面(即，无论旋转与否，都不覆盖前景)？

下面是我当前的实现，2D背景是在屏幕外的画布中生成的，然后使用image()放到主画布上，在主画布上生成3D内容，但我将采用任何其他方法。

let bg;
p.setup = () => {
    p.createCanvas(width,height,p.WEBGL);
    bg = p.createGraphics(width,height);
}

p.draw = () => {
    ... // draw background bg
    p.image(bg,x,y); // draw background on canvas

    ... // draw foreground
    p.rotateX(degrees);//rotate
}

WebGL

完成此操作的最佳方法是清除推荐答案深度缓冲区。此缓冲区存储到目前为止绘制的每个像素的深度，以便在绘制后续三角形时，如果它们中的一些或全部位于先前在该位置绘制的任何内容的后面，则可以对其进行剪裁。此缓冲区在调用p5.js中的draw()之间自动清除，但您也可以在帧中调用它：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

let bg;
let zSlider;
let glContext;

function setup() {
  let c = createCanvas(200, 200, WEBGL);
  glContext = c.GL;

  bg = createGraphics(width, height);
  bg.background('red');
  for (let y = 0; y < height; y += 20) {
    for (let x = 0; x < width; x += 20) {
      if ((x / 20 + y / 20) % 2 === 0) {
        bg.fill('black');
      } else {
        bg.fill(
          map(x + y, 0, width + height, 0, 360),
          map(y, 0, height, 50, 100),
          map(x, 0, width, 50, 100)
        );
      }

      bg.square(x, y, 20)
    }
  }

  zSlider = createSlider(0, width * 2, width);
  zSlider.position(10, 10);
}

function draw() {
  image(bg, -width / 2, -height / 2, width, height);
  // Clear the z-buffer, subsequent drawing commands will not clip, even if they
  // intersect with or are behind previously drawn elements (like our background
  // image)
  glContext.clear(glContext.DEPTH_BUFFER_BIT);

  push();
  translate(0, 0, (zSlider.value() - width) * 2);
  rotateX(millis() / 1000 * PI / 4);
  rotateY(millis() / 1000 * PI / 8);
  box(100);
  pop();
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

也有一个笨拙的解决方案，不依赖于调用WebGL内部，但我只能让它在方形画布上工作：

1. 在绘制背景图像之前切换到正交相机模式。
2. 在不超出&q；远剪裁平面的情况下，尽可能沿负Z方向平移。
3. 绘制背景图像。
4. 将状态弹回普通透视相机。

这使用正交投影来允许您在场景的其余部分后面绘制背景图像，而不会因透视而减小大小。然而，我还没有想出一个可靠的方法来确定完美的平移值是什么，也没有想出如何可靠地设置拼写项目来控制剪裁平面的位置。

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

let bg;
let zSlider;

function setup() {
  createCanvas(200, 200, WEBGL);
  bg = createGraphics(width, height);
  bg.background('red');
  for (let y = 0; y < height; y += 20) {
    for (let x = 0; x < width; x += 20) {
      if ((x / 20 + y / 20) % 2 === 0) {
        bg.fill('black');
      } else {
        bg.fill(
          map(x + y, 0, width + height, 0, 360),
          map(y, 0, height, 50, 100),
          map(x, 0, width, 50, 100)
        );
      }

      bg.square(x, y, 20)
    }
  }

  zSlider = createSlider(0, width * 2, width);
  zSlider.position(10, 10);
}

function draw() {
  push();
  ortho();
  translate(0, 0, min(width, height) * -0.13);
  image(bg, -width / 2, -height / 2, width, height);
  pop();

  push();
  translate(0, 0, (zSlider.value() - width) * 2);
  rotateX(millis() / 1000 * PI / 4);
  rotateY(millis() / 1000 * PI / 8);
  box(100);
  pop();
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>