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

Question

该行为仅在 Firefox 上发生。 （我用的是开发者版）。

我有一些点云需要使用启用了透明度的着色器。

当我在没有透明度的情况下向场景添加 CubeGeometry 时，它会使点云消失。

我还注意到，使用带有 PointMaterial 的点云可以按预期工作，但在我的程序中我需要使用着色器。

如果在这部分代码中对立方体使用了shaderMaterial：

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

云也能正确显示，但当然我需要一个不透明的立方体，它带有除云着色器之外的其他材质。

我正在使用three.js r74

感谢您的帮助！

var $ = document.querySelector.bind(document);
var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  var pointMaterial = new THREE.PointsMaterial();

  var vShader = $('#vertexshader');
  var fShader = $('#fragmentshader');
  var shaderMaterial =
      new THREE.ShaderMaterial({
        vertexShader:   vShader.text,
        fragmentShader: fShader.text
      });

  shaderMaterial.transparent = true;
  shaderMaterial.vertexColors = THREE.VertexColors;
  shaderMaterial.depthWrite = true;

  geometry = new THREE.Geometry(); 

  particleCount = 20000;

  for (i = 0; i < particleCount; i++) {

    var vertex = new THREE.Vector3();
    vertex.x = Math.random() * 2000 - 1000;
    vertex.y = Math.random() * 2000 - 1000;
    vertex.z = Math.random() * 2000 - 1000;

    geometry.vertices.push(vertex);
  }

  parameters = [
    [
      [1, 1, 0.5], 5
    ],
    [
      [0.95, 1, 0.5], 4
    ],
    [
      [0.90, 1, 0.5], 3
    ],
    [
      [0.85, 1, 0.5], 2
    ],
    [
      [0.80, 1, 0.5], 1
    ]
  ];
  parameterCount = parameters.length;

  for (i = 0; i < parameterCount; i++) {

    color = parameters[i][0];
    size = parameters[i][1];

    //If we use pointMaterial instead of ShaderMaterial the cloud is visible
    particles = new THREE.Points(geometry, shaderMaterial);
    particles.sizeAttenuation = true;
    particles.sortParticles = true;
    particles.colorsNeedUpdate = true;
    particles.scale.set(1, 1, 1);

    particles.rotation.x = Math.random() * 6;
    particles.rotation.y = Math.random() * 6;
    particles.rotation.z = Math.random() * 6;

    scene.add(particles);
  }

  geometry = new THREE.CubeGeometry(200, 200, 200);

  //POINT CLOUD DISAPPEARS WHEN USING NON TRANSPARENT MATERIAL
  material = new THREE.MeshBasicMaterial({color: 0x00ff00});

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

  scene.add(mesh);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render(scene, camera);
}

<script type="x-shader/x-vertex" id="vertexshader">

void main()
{
  gl_PointSize = 5.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

precision highp float;

void main()
{
  gl_FragColor 	= vec4(1.0,0.0,1.0,1.0);
}

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.js"></script>

Answer 1

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

你想看看立方体里面的点吗？

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

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

因此无论材质上的transparent 设置如何，您的粒子都不会透明。

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

将立方体设置为透明也不能解决问题。处理透明度是困难的。您通常需要从前到后绘制事物。要做到这一点，three.js 需要能够单独绘制每个对象，以便它可以首先绘制立方体后面的所有粒子，然后是立方体的背面，然后是立方体内部的粒子，然后是立方体的前面，然后立方体前面的粒子。

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

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