Firefox 添加不透明立方体时，使用着色器材质的具有透明度的Three.js点云将消失

这种行为只发生在firefox上。（我使用开发版）

我有一些点云需要使用透明度激活的着色器

当我在没有透明度的情况下向场景添加立方体测量时，它会使点云消失

我还注意到，将点云与PointMaterial一起使用可以正常工作，但在我的程序中，我需要使用着色器

如果在本部分代码中对多维数据集使用shaderMaterial：

 mesh = new THREE.Mesh(geometry, material);
 //mesh = new THREE.Mesh(geometry, shaderMaterial);

云也可以正确显示，但是我当然需要一个非透明的立方体，其中包含云的着色器以外的其他材质

我使用的是three.js r74

谢谢你的帮助

var$=document.querySelector.bind（文档）；
摄像机、场景、渲染器、几何体、材质、网格；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=500；
场景。添加（摄影机）；
var pointMaterial=新的三个.PointsMaterial（）；
var vShader=$（“#vertexshader”）；
var fShader=$（“#fragmentshader”）；
var shaderMaterial=
新三点材质({
vertexShader:vShader.text，
fragmentShader:fShader.text
});
shaderMaterial.transparent=true；
shaderMaterial.VertexColor=三个.VertexColor；
shaderMaterial.depthrite=true；
几何体=新的三个。几何体（）；
粒子计数=20000；
对于（i=0；i

void main（）
{
gl_PointSize=5.0；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
高精度浮点；
void main（）
{
gl_FragColor=vec4（1.0,0.0,1.0,1.0）；
}

不清楚你想要达到什么效果

是否要查看立方体内部的点

您的着色器正在返回不透明紫色

 gl_FragColor = vec4(1.0,0.0,1.0,1.0);

因此，无论材质上的

transparent

设置如何，粒子都不会透明

您的立方体是不透明的，因此立方体内的点当然会消失。这就是不透明的定义

将多维数据集设置为透明也无法解决此问题。处理透明度问题很难。你通常需要把东西前后画。要做到这一点，three.js需要每个对象都能够单独绘制，这样它可以先绘制立方体后面的所有粒子，然后绘制立方体后面的粒子，然后绘制立方体内部的粒子，然后绘制立方体前面的粒子，然后绘制立方体前面的粒子

为此，需要将立方体拆分为6个平面，并将每个粒子放入其自己的场景对象中

---

有很多方法可以伪造它。关闭depthTest有时可以作为一种替代方法，但它并不完全正确。

不清楚您想要达到什么效果

是否要查看立方体内部的点

您的着色器正在返回不透明紫色

 gl_FragColor = vec4(1.0,0.0,1.0,1.0);

因此，无论材质上的

transparent

设置如何，粒子都不会透明

您的立方体是不透明的，因此立方体内的点当然会消失。这就是不透明的定义

将多维数据集设置为透明也无法解决此问题。处理透明度问题很难。你通常需要把东西前后画。要做到这一点，three.js需要每个对象都能够单独绘制，这样它可以先绘制立方体后面的所有粒子，然后绘制立方体后面的粒子，然后绘制立方体内部的粒子，然后绘制立方体前面的粒子，然后绘制立方体前面的粒子

为此，需要将立方体拆分为6个平面，并将每个粒子放入其自己的场景对象中

---

有很多方法可以伪造它。关闭depthTest有时可以作为替代，但这并不完全正确。

在firefox上，我们根本看不到立方体外部或内部的点云。基本上，我只看到没有点和黑色背景的立方体。在firefox上，我们根本看不到立方体内外的点云。基本上我只看到没有点和黑色背景的立方体。