three.js使用点和自定义着色和混合渲染意外的颜色值

我有一个相对简单的设置，带有自定义着色器和自定义混合模式：

shaderMaterial.blending =      THREE.CustomBlending;
shaderMaterial.blendSrc =      THREE.OneFactor;
shaderMaterial.blendDst =      THREE.OneFactor;
shaderMaterial.blendEquation = THREE.AddEquation;

场景和透视照相机 二十面体几何 带有自定义着色器的自定义新THREE.ShaderMaterial 一些新的三点，二十面体和自定义着色器材质 我的着色器材质具有自定义混合模式：

shaderMaterial.blending =      THREE.CustomBlending;
shaderMaterial.blendSrc =      THREE.OneFactor;
shaderMaterial.blendDst =      THREE.OneFactor;
shaderMaterial.blendEquation = THREE.AddEquation;

我的片段着色器当前仅执行以下操作：

gl_FragColor=vec40.0,0.1,0.0,0.0

由于我正在渲染到一个全黑色画布中，考虑到混合模式，绘制点的预期颜色应为：

 SRC                     DST
r = 0                   r = 0                 r = 0
g = 0.1   *   1.0   +   g = 0   *   1.0   =   g = 0.1
b = 0                   b = 0                 b = 0

然而，我得到了一个完全不同的结果：

渲染的点比预期的0.1亮得多。使用 gl_FragColor=vec40.0,0.2,0.0,0.0； 这些点完全饱和，g=255

这是什么原因？我有一些想法，希望能把我推向正确的方向

也许three.js会在我的片段着色器中添加一些代码，修改gl_FragColor？ 也许我没有意识到three.js所做的一些额外的渲染/后处理步骤？ 也许我误解了关于混合模式的数学？ 也许three.js中存在一些实现错误？ 也许这是一个浏览器/画布/颜色空间的东西？但是，我无法想象在任何颜色空间变换中，任何导致绿色值0.2完全饱和的变换！ 任何帮助都将不胜感激。

---

谢谢

问题是每个点都要绘制5次，因为二十面体几何体是为绘制三角形而设计的。每个顶点由5个三角形共享。我们可以通过增加数组来测试这一点

运行下面的代码，我们看到它要求抽取60分，尽管从视觉上看只有12分。下面的代码没有抽取任何可见的内容，它只是为了检查抽取调用

WebGLRenderingContext.prototype.drawArrays=functionorigFn{ 返回函数…args{ log'drawArrays'，…args； origFn.callthis，…args； }; }WebGLRenderingContext.prototype.drawArrays； 主要功能{ const canvas=document.querySelector'c'； const renderer=new THREE.WebGLRenderer{canvas}； 常量摄影机=新的三个摄影机； const scene=新的三个场景； const geo=新的三个二十面体缓冲几何体1； const material=新的三网格基本材质； scene.addnew三点geo，material； renderer.renderscene，摄影机； } 主要的

---

是打开还是关闭？预乘alpha未设置为默认值=false，但据我所知，这两种方式都不重要，因为它是一个自定义着色器。我也测试过它：无论是真是假，它似乎都不会改变结果。默认值为真！这很重要。请看，我不知道three.js实现的细节，但是，如果它所做的只是获取二十面体BufferGeometry的点和索引，并传递gl.points而不是gl.TRIANGLES，那么每个点将被绘制5次，因为每个点都被5个三角形使用。@rabbi76 Aha！我以为你指的是材质的Premultipledalpha属性，它默认为false，我相信，不应该影响不实现它们的CustomShader。。。我将查看此资源并向您报告，谢谢！非常感谢，这就是问题所在！