three.js透明纹理和着色器材质
安瓦卡
我正在使用圆形纹理渲染粒子：
圆圈具有透明像素。我正在使用，ShaderMaterial并BufferGeometry为每个节点提供自定义大小，颜色。但是我坚持正确的z-index渲染。在下图中：
白色颗粒离相机最近，0x00ffff第二个是青色（），右上角的芙蓉色（0xC3206F看起来是粉红色）最远。
如您所见，顺序不正确。理想情况下，白色圆圈应完全覆盖青色，并部分覆盖芙蓉。如果设置depthTest: true为ShaderMaterial，则纹理的透明区域将变为实心：
这是完整的源代码：http : //jsbin.com/mikimifipi/edit?js，输出
我可能会缺少一些混合功能，或者将着色器弄乱了。你能帮忙吗？
西兰吉
粒子按指定的顺序渲染
BufferGeometry。depthTest = true如您所言，如果，则该材料没有变成固体-它后面的粒子（并稍后渲染）根本就不会渲染。您可以通过设置来改善一些伪像
if ( tColor.a < 0.5 ) discard;。您可能不应该将片段着色器输出RGB预乘以alpha。在three.js中使用默认的alpha混合时，这不是正确的选择。这也是导致环出现在白色磁盘周围的原因。
three.js r.71
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Three.js：对象相交和着色器材质
- 2
three.js：在着色器材质中使用纹理添加到对象加载器加载的对象中
- 3
three.js r73着色器材质属性
- 4
WebGL / three.js片段着色器-用alpha透明色覆盖alpha透明纹理
- 5
WebGL / three.js片段着色器-用alpha透明色覆盖alpha透明纹理
- 6
Three.js，自定义着色器，填充png纹理并设置透明度？
- 7
着色器材质透明度
- 8
着色器中的Three.js纹理
- 9
着色器中的Three.js纹理
- 10
THREE.js着色器的颜色纹理
- 11
Threejs-在着色器材质上应用简单的纹理
- 12
Threejs-在着色器材质上应用简单的纹理
- 13
如何在着色器中为纹理添加雾（THREE.JS R76）
- 14
三种js着色器材质-透明度设置为true时的像素化毛刺
- 15
Three.js一些对象无法通过透明的点云材质纹理看到
- 16
THREEJS着色器材质被覆盖
- 17
Three.js透明模型纹理错误
- 18
在THREE.JS中组合着色器
- 19
Three.JS-不同对象的不同着色器
- 20
Three.js的累积着色器
- 21
three.js淡入/淡出后期处理着色器
- 22
在Three.js着色器中使用灯光
- 23
Three.js片段着色器颜色过渡
- 24
three.js如何运行着色器程序
- 25
Web着色器-three.js，需要修复吗？
- 26
Three.JS-不同对象的不同着色器
- 27
Three.js着色器pointLight位置
- 28
three.js-具有透明纹理的相交平面
- 29
three.js-使用纹理图像遮罩透明度
我来说两句