Forge Viewer自定义着色器报错求助：GL_INVALID_OPERATION

错误含义 #

GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs 表示WebGL上下文当前激活了多个绘制缓冲区（Forge Viewer内部用于实现拾取、阴影、后期处理等功能的多渲染目标机制），但你的自定义片段着色器只提供了单个输出（gl_FragColor），缺少其他缓冲区对应的输出变量，导致渲染操作无效——这就是网格不可见的原因。而拾取逻辑是Viewer单独处理的通道，所以模型仍能被选中。

修复方案 #

Forge Viewer的渲染管线并非原生Three.js环境，它依赖内置的多渲染目标（MRIT）机制，自定义着色器必须兼容这个逻辑。直接使用RawShaderMaterial或ShaderMaterial会跳过Viewer的材质适配流程，导致输出不匹配。推荐以下两种可靠方案：

方案1：基于Viewer内置材质扩展（推荐） #

复用Viewer的MeshPhongMaterial作为基础，通过onBeforeCompile方法替换着色器代码，这样能自动继承Viewer对多渲染目标的处理逻辑：

let customShaderMaterial = new THREE.MeshPhongMaterial({
    color: 0xFFFF00,
    side: THREE.DoubleSide,
    name: 'custom-shader-material'
});

customShaderMaterial.onBeforeCompile = function(shader) {
    // 替换顶点着色器，保留Viewer要求的uniform和属性
    shader.vertexShader = `
        attribute vec3 position;
        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;
        
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `;
    // 替换片段着色器，添加Viewer期望的多目标输出
    shader.fragmentShader = `
        // 主颜色输出（location 0）
        layout(location = 0) out vec4 gl_FragColor;
        // 拾取通道输出（location 1，Viewer用于模型选中检测）
        layout(location = 1) out vec4 fragColor1;
        
        void main() {
            gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
            // 拾取通道可输出默认值，或根据需求设置拾取ID
            fragColor1 = vec4(0.0);
        }
    `;
};

方案2：手动适配多渲染目标输出 #

如果必须使用RawShaderMaterial，需要在着色器中添加Viewer激活的所有绘制缓冲区对应的输出变量，并通过Viewer内置宏做条件兼容：

let VertexShader = `
    attribute vec3 position;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

let FragmentShader = `
    // 主颜色输出
    layout(location = 0) out vec4 gl_FragColor;
    // 兼容Viewer的多渲染目标宏
    #ifdef MRIT_ENABLED
    layout(location = 1) out vec4 fragColor1;
    #endif

    void main() {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
        #ifdef MRIT_ENABLED
        fragColor1 = vec4(0.0);
        #endif
    }
`;

let customShaderMaterial = new THREE.RawShaderMaterial({
    vertexShader: VertexShader,
    fragmentShader: FragmentShader,
    name: 'custom-shader-material',
    side: THREE.DoubleSide,
    // 必须添加Viewer的宏定义，确保着色器兼容
    defines: {
        'MRIT_ENABLED': ''
    }
});

调试技巧 #

1. 查看Viewer内置着色器：在浏览器控制台打印内置材质的着色器代码，参考其输出定义，比如：

   console.log(viewer.impl.matman()._materials[0].shader.fragmentShader);
   

2. WebGL调试工具：使用Chrome开发者工具的WebGL Inspector（在More tools中启用），查看当前激活的绘制缓冲区数量和位置，对应补充着色器输出。
3. 验证宏定义：确认Viewer是否启用了MRIT_ENABLED等宏，可通过viewer.impl.renderer.capabilities.isWebGL2判断WebGL版本，调整着色器逻辑。

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