p5.js中为3D球体编写基础着色器遇到的问题

问题根源 #

你写的自定义顶点着色器完全绕过了p5.js的内置顶点处理逻辑：

• 用了自定义的a_position（vec2类型），但p5.js的3D形状（比如sphere）的顶点是三维vec3数据，无法匹配；
• 没有使用p5内置的uModelViewMatrix和uProjectionMatrix做顶点变换，导致顶点位置计算错误，最终显示纯白；
• 没有传递UV坐标的逻辑，片元着色器自然拿不到UV值。

解决方案：使用p5.js内置的着色器变量 #

要让p5自动传递3D形状的顶点和UV数据，顶点着色器必须遵循p5的规范，使用它提供的内置attribute和uniform变量，同时通过varying把UV传递给片元着色器。

完整代码示例

let theShader;

function preload() {
  // 加载自定义着色器
  theShader = createShader(
    // 顶点着色器：遵循p5规范，传递UV到片元
    `attribute vec3 aPosition;
     attribute vec2 aTexCoord;
     varying vec2 vTexCoord;
     uniform mat4 uModelViewMatrix;
     uniform mat4 uProjectionMatrix;

     void main() {
       vTexCoord = aTexCoord; // 把UV传递给片元着色器
       gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
     }`,
    // 片元着色器：接收UV并基于它返回颜色
    `precision mediump float;
     varying vec2 vTexCoord;

     void main() {
       // 基于UV坐标生成颜色（比如U通道控制红色，V通道控制绿色）
       gl_FragColor = vec4(vTexCoord.x, vTexCoord.y, 0.0, 1.0);
     }`
  );
}

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

function draw() {
  background(200);
  shader(theShader); // 启用自定义着色器
  rotateY(frameCount * 0.01); // 旋转球体方便观察UV分布
  sphere(380);
  // rect(-width/2, -height/2, width, height); // 矩形也能正常获取UV
}

关键说明 #

1. 顶点着色器必须用p5的内置变量：

   • aPosition：p5自动传递的三维顶点坐标（对应3D形状的顶点）；
   • aTexCoord：p5自动传递的UV坐标（0-1范围，3D形状比如sphere的UV是默认生成的）；
   • uModelViewMatrix和uProjectionMatrix：p5自动管理的视图和投影矩阵，确保3D顶点正确显示在画布上；
   • varying vec2 vTexCoord：把顶点的UV插值后传递给片元着色器，片元着色器就能拿到每个像素对应的UV值。

2. 为什么之前的方法无效：

   • 你自己写的顶点着色器用了vec2 a_position，但p5的3D顶点是vec3，导致顶点数据无法正确读取；
   • 没有应用矩阵变换，顶点位置被缩放到很小的范围（a_position * 0.2），可能超出了画布可视区域，所以显示纯白；
   • 没有传递UV的逻辑，片元着色器自然无法获取UV值。

3. 无需额外纹理对象：
   你之前尝试的shaderTexture方案是把着色器渲染到纹理再贴回去，这是绕远路。直接给3D形状启用着色器，就能让p5自动传递所有必要的顶点和UV数据。

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