p5.js WEBGL模式下createGraphics分层与画布清除问题求助

问题1：植物模型始终显示在平面后方 #

WEBGL 中物体的前后优先级由Z轴坐标决定（默认相机看向Z轴负方向，Z值越小的物体离相机越近，会显示在前面），而非代码的绘制顺序。解决方式：

• 调整植物与平面的Z轴位置：确保植物的Z坐标比平面更小（比如植物设为z = -50，平面设为z = 0）
• 确认未关闭深度测试：如果调用过noDepthTest()，会导致深度逻辑失效，需移除该函数
• 代码示例调整：

function draw() {
  background(255);
  
  // 绘制植物（Z=-50，更靠近相机）
  push();
  translate(0, 0, -50);
  drawPlant(); // 你的植物绘制函数
  pop();
  
  // 绘制平面（Z=0，位置更远）
  push();
  translate(0, 0, 0);
  plane(800, 600);
  pop();
}

问题2：保留植物绘制结果同时实现生长（不使用noLoop()） #

用createGraphics创建WEBGL模式的离屏画布存储历史绘制内容，每次draw时先渲染历史画布，再叠加新的生长元素：

1. 初始化WEBGL模式的离屏画布，设置初始背景
2. 主画布每次绘制时清空背景，再绘制离屏画布的内容
3. 在离屏画布上绘制新的生长部分（不清空离屏画布，实现叠加效果）

• 代码示例：

let plantCanvas;

function setup() {
  createCanvas(800, 600, WEBGL);
  // 创建WEBGL模式的离屏画布
  plantCanvas = createGraphics(800, 600, WEBGL);
  plantCanvas.background(255); // 初始化离屏画布背景
}

function draw() {
  // 主画布清空背景
  background(255);
  
  // 将离屏画布内容绘制到主画布（WEBGL原点在中心，需偏移坐标）
  image(plantCanvas, -width/2, -height/2);
  
  // 在离屏画布上绘制新的生长元素（叠加绘制）
  plantCanvas.push();
  // 此处替换为你的植物生长逻辑，比如每次draw添加一段枝条
  translate(random(-10,10), random(-10,10), 0);
  stroke(0, 150, 0);
  line(0,0,0, 0,-10,0);
  plantCanvas.pop();
}

注意：离屏画布采用WEBGL坐标系（原点在中心），绘制时需遵循该规则。

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