在p5.js的WEBGL模式下，如何在buildGeometry中修改描边颜色？

原因说明 #

在p5.js的WEBGL模式中，buildGeometry的设计逻辑是将传入函数内的所有图形合并为单个几何体对象。填充色（fill）会被绑定到每个图形的顶点数据中，所以不同图形可以有不同填充色；但描边（stroke）、描边宽度（strokeWeight）这类属性属于全局渲染状态，buildGeometry不会为每个图形单独保存这些状态，最终所有图形会共用最后一次设置的描边属性。这属于当前版本p5.js的设计限制，并非代码错误。

解决方案 #

1. 拆分多个几何体分别创建 #

为每个需要不同描边的图形单独调用buildGeometry，生成独立的几何体对象，在draw中分别渲染：

let coneShape;
let boxShape;

function setup() {
  createCanvas(100, 100, WEBGL);
  // 单独创建圆锥的几何体
  coneShape = buildGeometry(() => {
    strokeWeight(10);
    stroke("red");
    fill("green");
    cone();
  });
  // 单独创建立方体的几何体
  boxShape = buildGeometry(() => {
    strokeWeight(5);
    stroke("blue");
    fill("yellow");
    box();
  });
}

function draw() {
  background(200);
  orbitControl();
  model(coneShape);
  model(boxShape);
}

2. 直接在draw中绘制（适合简单场景） #

如果图形数量不多，不需要合并几何体优化性能，可以直接在draw循环里绘制每个图形，这样每个图形的描边属性都会生效：

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

function draw() {
  background(200);
  orbitControl();
  
  strokeWeight(10);
  stroke("red");
  fill("green");
  cone();
  
  strokeWeight(5);
  stroke("blue");
  fill("yellow");
  box();
}

3. 自定义着色器（进阶方案） #

如果需要合并几何体同时保留不同描边，可使用自定义WEBGL着色器，为每个几何体顶点添加颜色属性，在着色器中处理描边逻辑。不过这个方案需要熟悉p5.js的着色器API和WEBGL基础。

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