three.js 透明纹理和着色器 material
three.js transparent texture and shader material
我正在使用圆形纹理来渲染粒子：
圆形有透明像素。我正在使用 ShaderMaterial 和 BufferGeometry 为每个节点提供自定义大小和颜色。但是我坚持使用正确的 z-index 渲染。在下图中：
白色粒子离相机最近，青色(0x00ffff)次之，右上角的芙蓉色(0xC3206F看起来有点粉红色)最远。
如您所见，顺序不正确。理想情况下，白色圆圈应完全覆盖青色，并部分覆盖木槿花。如果我将 depthTest: true 设置为 ShaderMaterial，纹理的透明区域变为实心：
这里是完整的源代码：http://jsbin.com/mikimifipi/edit?js,output
我可能在混合时遗漏了一些东西，或者弄乱了着色器。你能帮忙吗？
粒子按照BufferGeometry指定的顺序渲染。
如果 depthTest = true，material 并没有像您声称的那样变成固体 - 它背后的粒子（以及稍后渲染的）根本就没有被渲染。
您可以通过设置 if ( tColor.a < 0.5 ) discard;.
您可能不应该将片段着色器输出 RGB 预乘 alpha。在 three.js 中使用默认的 alpha 混合时，这不是正确的做法。这也是导致圆环出现在白色圆盘周围的原因。
three.js r.71
我正在使用圆形纹理来渲染粒子：
圆形有透明像素。我正在使用 ShaderMaterial 和 BufferGeometry 为每个节点提供自定义大小和颜色。但是我坚持使用正确的 z-index 渲染。在下图中：
白色粒子离相机最近，青色(0x00ffff)次之，右上角的芙蓉色(0xC3206F看起来有点粉红色)最远。
如您所见，顺序不正确。理想情况下，白色圆圈应完全覆盖青色，并部分覆盖木槿花。如果我将 depthTest: true 设置为 ShaderMaterial，纹理的透明区域变为实心：
这里是完整的源代码：http://jsbin.com/mikimifipi/edit?js,output
我可能在混合时遗漏了一些东西，或者弄乱了着色器。你能帮忙吗？
粒子按照
BufferGeometry指定的顺序渲染。如果
depthTest = true，material 并没有像您声称的那样变成固体 - 它背后的粒子（以及稍后渲染的）根本就没有被渲染。您可以通过设置
if ( tColor.a < 0.5 ) discard;. 来改善一些瑕疵
您可能不应该将片段着色器输出 RGB 预乘 alpha。在 three.js 中使用默认的 alpha 混合时，这不是正确的做法。这也是导致圆环出现在白色圆盘周围的原因。
three.js r.71