如何修复A-Frame中自定义GLSL着色器转平面为球体时的空白输出？

你遇到的空白问题主要有三个原因：

1. 缺失片元着色器：A-Frame自定义着色器必须同时提供顶点和片元着色器，否则片元阶段无法完成颜色渲染，导致画面空白。
2. 顶点坐标范围错误：A-Frame默认平面的顶点xy坐标范围是[-0.5, 0.5]，但你的代码假设坐标是[-1,1]，导致UV计算偏差，生成的球面顶点位置异常。
3. 未传递必要的变量到片元着色器：默认片元着色器依赖顶点着色器输出的varying变量，你的代码未提供，导致着色器编译或运行出错。

修正后的完整代码 #

AFRAME.registerShader("customShader", {
  schema: {
    color: { type: "color", is: "uniform", default: "red" },
    opacity: { type: "number", is: "uniform", default: 1.0 },
  },

  vertexShader: `
    varying vec3 vPosition;

    void main() {
      float PI = 3.14159265359;

      // 修正坐标范围：先把A-Plane的[-0.5,0.5]转成[-1,1]，再转[0,1]的UV
      vec2 uv = position.xy * 2.0;
      uv = uv * 0.5 + 0.5;

      // 球面坐标转换
      float theta = 2.0 * PI * uv.x;
      float phi = PI * uv.y;

      // 生成球面顶点位置
      vec3 newPosition = vec3(
        sin(phi) * cos(theta),
        cos(phi),
        sin(phi) * sin(theta)
      );

      vPosition = newPosition;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    }
  `,

  fragmentShader: `
    precision mediump float;
    uniform vec3 color;
    uniform float opacity;
    varying vec3 vPosition;

    void main() {
      // 使用uniform定义的颜色和透明度渲染
      gl_FragColor = vec4(color, opacity);
    }
  `,
});

额外优化建议 #

• 给平面增加分段数：默认平面只有1x1个分段，生成的球面是四面体，添加segments-width="32" segments-height="32"属性可以得到更平滑的球面，比如：

  <a-plane shader="customShader" segments-width="32" segments-height="32" position="0 1.6 -3"></a-plane>
  

• 可以基于vPosition实现球面渐变着色，比如替换片元着色器的内容：

  gl_FragColor = vec4(vPosition * 0.5 + 0.5, opacity);
  

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