三.js 透明纹理和着色器材质 [英] three.js transparent texture and shader material

问题描述

我使用圆形纹理来渲染粒子:

I'm using a circle texture to render particles:

圆形具有透明像素.我正在使用 ShaderMaterial 和 BufferGeometry 为每个节点提供自定义大小和颜色.但是我坚持使用正确的 z-index 渲染.如下图:

The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However I'm stuck with proper z-index rendering. In the image below:

白色粒子离相机最近，青色(0x00ffff)是第二个，右上角的芙蓉色(0xC3206F看起来偏粉红色)是最远.

The white particle is the nearest to the camera, the cyan (0x00ffff) is the second, and hibiscus color on the top right (0xC3206F looks pinkish) is the farthest.

如您所见，顺序不正确.理想情况下，白色圆圈应完全覆盖青色，并部分覆盖芙蓉.如果我为 ShaderMaterial 设置了 depthTest: true，纹理的透明区域会变成实心:

As you can see the order is not correct. Ideally white circle should fully override cyan, and partially cover hibiscus. If I set depthTest: true for ShaderMaterial, the transparent regions of the texture become solid:

这里是完整的源代码:http://jsbin.com/mikimifipi/edit?js，输出

Here is the full source code: http://jsbin.com/mikimifipi/edit?js,output

我可能在混合时遗漏了一些东西或弄乱了着色器.你能帮忙吗?

I'm probably missing something with blending or messed up with the shaders. Can you please help?

推荐答案

1. 粒子按照BufferGeometry指定的顺序渲染.

如果 depthTest = true，则材料不会像您声称的那样变成实体——它背后的粒子(以及稍后渲染)根本没有被渲染.

If depthTest = true, the material is not becoming solid, as you claim -- the particles behind it (and rendered later) are simply not being rendered at all.

您可以通过设置 if ( tColor.a < 0.5 ) discard; 来改善一些工件.

You can improve some artifacts by setting if ( tColor.a < 0.5 ) discard;.

您可能不应该将片段着色器输出的 RGB 预乘以 alpha.在three.js 中使用默认的alpha 混合时，这不是正确的做法.这也是导致白色圆盘周围出现环的原因.

You likely should not be premultiplying your fragment shader output RGB by alpha. That is not the correct thing to do when using the default alpha-blending in three.js. It is also is what is causing the ring to appear around the white disk.

three.js r.71

three.js r.71

这篇关于三.js 透明纹理和着色器材质的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！