Processing旋转3D对象覆盖UI，如何设置其始终在底层？

在Processing中实现3D地图旋转功能时，旋转后的地图会遮挡上层的UI元素，如何设置让3D地图始终处于底层，不遮挡UI？

附上相关代码：

void draw(){
//3Dmap
  scale = 1+scaleFactor;
  background(100);

  pushMatrix();
  translate(width/2+transX, height/2.5+transY, 0);
  rotateX(rotX);
  rotateY(-rotY);
  scale(scale);
  imageMode(CENTER);
  image(nyc_map, 0, 0, mapSize, mapSize);
  image(compass,0,0,100,100);

  popMatrix();

  //UI

  box.display();
  resetMap.update();
  resetMap.render();

  playButton.update();
  playButton.render();
}

//rotation part
void mouseDragged() {
  rotY  -= (mouseX-pmouseX) * 0.01;
  rotX -= (mouseY-pmouseY) * 0.01;
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  scaleFactor += e * 0.001;
}

现象说明：程序启动时UI正常显示，当对地图进行旋转操作后，地图元素会覆盖在UI组件（按钮、信息框等）上方，导致UI无法正常交互和显示。

最直接有效的方法是利用Processing的深度测试开关，让UI忽略3D深度排序，强制绘制在最上层：

修改后的draw()函数代码 #

void draw(){
  //3Dmap
  scale = 1+scaleFactor;
  background(100);

  pushMatrix();
  translate(width/2+transX, height/2.5+transY, 0);
  rotateX(rotX);
  rotateY(-rotY);
  scale(scale);
  imageMode(CENTER);
  image(nyc_map, 0, 0, mapSize, mapSize);
  image(compass,0,0,100,100);
  popMatrix();

  //UI - 先关闭深度测试，确保UI不受3D深度影响
  hint(DISABLE_DEPTH_TEST);
  box.display();
  resetMap.update();
  resetMap.render();

  playButton.update();
  playButton.render();
  hint(ENABLE_DEPTH_TEST); // 恢复深度测试，避免影响后续3D绘制逻辑
}

原理说明 #

Processing默认开启深度测试，会根据元素的Z轴坐标决定绘制层级。地图旋转后，部分区域的Z轴坐标会比UI的默认Z轴（0）更靠前，导致遮挡。关闭深度测试后，UI会直接绘制在所有已绘制的3D内容之上，完全忽略Z轴的深度排序，从而保证UI始终在最上层。

如果想保留深度测试逻辑，也可以给UI设置一个更高的Z轴位置（比如在绘制UI时执行translate(0, 0, 100)），让UI在3D空间里处于地图的“前方”，同样能避免被遮挡。

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