p5.js WEBGL中如何设置3D对象层级让圆柱体显示在环面上层

现有两个p5.js WEBGL模式下的3D对象：环面（torus）、圆柱体（cylinder），需求为圆柱体始终显示在环面上层，不被环面遮挡。

初始复现代码 #

侧放圆柱体版本（层级问题更易观察） #

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  rotateX(30)
  // 绘制环面
  fill(241, 177, 102);
  torus(100, 40);
  // 绘制圆柱体
  fill(138, 78, 27);
  push();
  rotateX(90);
  cylinder(130, 10);
  pop();
}

平置圆柱体版本 #

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  // 绘制环面
  fill(241, 177, 102);
  torus(100, 40);
  // 绘制圆柱体
  fill(138, 78, 27);
  cylinder(130, 10);
}

已尝试的无效操作：

• 绕Z轴旋转圆柱体
• 调换两个对象的绘制顺序

WEBGL模式默认开启深度测试，会严格按照3D空间的实际坐标判断遮挡关系，调换绘制顺序无法强制修改显示层级。要让圆柱体固定显示在环面上层，绘制圆柱体前调用noDepth()临时关闭深度测试即可，绘制完成后可调用depth()恢复正常深度判断。

修正后代码 #

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  rotateX(30)
  // 绘制下层环面
  fill(241, 177, 102);
  torus(100, 40);
  
  // 绘制上层圆柱体
  push();
  noDepth(); // 关闭深度测试，后续内容强制显示在上层
  fill(138, 78, 27);
  rotateX(90);
  cylinder(130, 10);
  pop();
}

如果不需要强制置顶、只是想让圆柱体自然放置在环面上方位置，可以给圆柱体加Y轴位移，比如translate(0, -50, 0)将圆柱体向上移动到环面顶部，不需要关闭深度测试也能得到正确的遮挡关系。

内容的提问来源于stack exchange，提问作者Drone