Chrome GL_INVALID_OPERATION 上的 Three.js 自定义着色器错误：活动绘制缓冲区缺少片段着色器输出答案

【问题标题】：Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputsChrome GL_INVALID_OPERATION 上的 Three.js 自定义着色器错误：活动绘制缓冲区缺少片段着色器输出
【发布时间】：2019-08-18 16:34:06
【问题描述】：

我想构建一个不会被渲染的自定义着色器。我的意思是我想告诉片段着色器不要写任何东西。所以，在片段着色器上我没有设置 gl_FragColor。

该程序在 Firefox 和 Edge 上运行良好，但不适用于 Chrome。在 Chrome 上有警告：“GL_INVALID_OPERATION：活动绘制缓冲区缺少片段着色器输出。”

您能帮我解决 Chrome 上的这个问题吗？是否有任何设置可以接受不带片段的着色器？

顶点着色器：

  void main() 
  {
    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewPosition;
  }

片段着色器：

  void main() {
    return;
  }

【问题讨论】：

为什么需要一个不写任何东西的片段着色器？这对我来说似乎不是有效的设置。顺便说一句：我用您的着色器代码 (jsfiddle.net/4fe9x1zk/1) 创建了一个实时示例。但是，我在 Chrome（在 macOS 上）收到不同的错误消息： GL ERROR :GL_INVALID_OPERATION : glDrawElements: buffer format and fragment output variable type incompatible
@Mugen87 有效。如果您只想生成深度图（例如光照图），则片段着色器可以为空。在这种情况下，帧缓冲区由深度缓冲区组成，但没有颜色缓冲区。深度是自动写入的，与片段着色器完全无关。
感谢您的澄清。我想我现在找到了解决这个问题的方法。如果您将Material.colorWrite 设置为false，则上述警告将消失。更新小提琴：jsfiddle.net/4g2ok9na。让我将其发布为答案。

标签： javascript google-chrome three.js shader

【解决方案1】：

您似乎可以通过将Material.colorWrite 设置为false 来避免此警告。这将告诉 WebGL 在使用自定义着色器材质进行渲染时禁用所有颜色组件。

three.js R107

【讨论】：

您好 Mugen，非常感谢您。你的建议正是我所需要的。
太棒了！如果对您有用，请接受/支持答案。