如何在p5.js的WEBGL模式下添加2D元素制作游戏菜单

WEBGL模式下不需要切回2D渲染上下文就能直接绘制固定在屏幕上的2D菜单，常用有三种实现方式，根据自己的需求选就行。

方案1：同上下文直接绘制（性能最优，90%场景首选） #

核心逻辑是画完所有3D内容后，临时把投影矩阵切为2D正交视角，关闭深度检测和3D渲染状态，画完2D菜单再恢复3D状态，全程在同一个WEBGL上下文里完成，没有额外性能开销。
操作步骤：

• 每帧先完成所有3D场景（沙盒地形、角色、物体）的渲染
• 调用push()保存当前3D的渲染状态（相机、矩阵、光照、材质参数）
• 重置投影为正交投影，关闭光照、纹理、深度测试，将坐标原点对齐屏幕左上角，和普通2D模式的坐标逻辑保持一致
• 按普通2D模式的写法绘制所有菜单元素（背景、文字、按钮）
• 调用pop()恢复3D渲染状态，不影响下一帧的3D绘制

示例代码：

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  pixelDensity(2); // 适配高分辨率屏幕，避免文字模糊
}

function draw() {
  // ========== 先绘制3D游戏内容 ==========
  background(30);
  orbitControl(); // 3D视角控制
  lights(); // 开3D光照
  rotateY(frameCount * 0.005);
  box(120); // 替换成你自己的沙盒游戏渲染逻辑

  // ========== 再绘制2D菜单 ==========
  push();
  // 重置为2D正交投影
  ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 2000);
  // 清空3D状态，避免影响2D绘制
  noLights();
  noTexture();
  noStroke();
  depthTest(false); // 关闭深度测试，保证2D元素永远显示在最上层
  // 把坐标原点移到左上角，和p5 2D模式坐标完全一致
  translate(-width / 2, -height / 2);

  // 下面的写法和普通2D模式没有区别
  // 半透明菜单背景
  fill(0, 190);
  rect(24, 24, 220, 360, 8);
  // 菜单标题
  fill(255);
  textSize(26);
  text('沙盒游戏菜单', 48, 72);
  // 功能按钮
  fill(70, 160, 255);
  rect(48, 120, 172, 48, 6);
  fill(255);
  textSize(18);
  text('开始游戏', 102, 150);

  pop();
}

踩坑提醒：如果忘记关深度测试，2D元素可能会被3D物体遮挡；如果忘记重置光照和纹理，2D图形会出现颜色错乱、贴图异常的问题。

按钮交互直接用mouseX、mouseY做2D坐标范围判断即可，不需要做3D坐标转换。

方案2：叠加独立2D画布（适合复杂UI场景） #

如果菜单包含输入框、滚动列表、大量动态UI元素，可以单独创建一个透明的2D画布，叠加在WEBGL主画布上层，两个画布独立渲染，逻辑完全解耦。
示例代码：

let main3DCanvas, uiCanvas;
function setup() {
  // 主画布：WEBGL模式渲染3D游戏
  main3DCanvas = createCanvas(windowWidth, windowHeight, WEBGL);
  main3DCanvas.position(0, 0);
  // UI画布：2D模式渲染菜单，叠加在主画布上方
  uiCanvas = createCanvas(windowWidth, windowHeight);
  uiCanvas.position(0, 0);
  uiCanvas.style('pointer-events', 'none'); // 默认让鼠标事件穿透到3D画布，不影响视角操作
}

function draw() {
  // 渲染3D内容
  main3DCanvas.background(30);
  // ... 你的3D沙盒渲染逻辑

  // 渲染2D菜单
  uiCanvas.clear(); // 用clear清空，保留透明背景，不要用background()
  uiCanvas.fill(255);
  uiCanvas.textSize(20);
  uiCanvas.text('叠加层菜单', 30, 40);
}

需要点击UI按钮的时候，把UI画布的pointer-events设为auto即可，不需要交互的时候改回none，避免挡住3D场景的鼠标操作。

方案3：DOM+CSS实现菜单（开发成本最低） #

简单的静态菜单、设置面板完全可以直接写HTML元素，用CSS固定定位在画布上层，不需要用p5绘制，开发效率最高。
操作逻辑：

• 在HTML文件里写好菜单的DOM结构，用CSS设置position: fixed固定在屏幕对应位置，设置z-index: 10保证层级在画布上方
• 菜单显示/隐藏直接通过JS控制DOM的display属性即可
• 按钮点击、输入框交互直接用原生JS绑定事件，不需要走p5的事件系统

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