渲染粒子系统中的球体（或点）

Question

我正在使用Three.JS库在Web浏览器中显示点云。点云在启动时生成一次，不再添加或删除其他点。但它确实需要旋转，平移和缩放。我已经完成了关于在three.js here

中创建粒子的教程

使用这个例子，我可以创建正方形的粒子或使用球体的图像来创建纹理。图像更接近我想要的，但是可以在不使用图像的情况下生成点云吗？例如球体几何体。

图像的问题在于，当你有数千个点时，它们似乎有时会在边缘处相互遮挡。从我可以收集的信息来看，点的png文件中的黑色区域似乎会阻挡当前点后面的图像。 （但对于后面的点而言它是透明的）

这种模糊图像是我想用形状生成点的原因。我尝试将particles = new THREE.Geometry()替换为THREE.SphereGeometry(radius, segments, rings)，并尝试将顶点更改为球体。

所以我的问题是。如何修改示例代码以使其呈现球体（或点）而不是正方形？此外，粒子系统对于我的特定情况是最有效的系统还是我应该只生成粒子并设置它们各自的位置？正如我所提到的，我只生成一次点，但随后旋转，缩放，平移点。 （我使用TrackBall示例代码来使鼠标事件正常工作）。

感谢您的帮助

Answer 1

我不认为使用球体渲染点云非常有效。您应该能够使用粒子系统并使用纹理或小画布程序来绘制圆圈。

第一个three.js sample中的一个使用画布程序，这里有重要的部分：

var PI2 = Math.PI * 2;
var program = function ( context )
{
    context.beginPath();
    context.arc( 0, 0, 1, 0, PI2, true );
    context.closePath();
    context.fill();    
};
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
    color: Math.random() * 0x808008 + 0x808080,
    program: program
} ) );

随意调整WebGL渲染器的代码。

我在clever solution中看到的另一个examples正在使用编码的webm视频存储数据并将其传递给GLSL着色器，该着色器通过三个粒子系统渲染.js

如果您的点云来自Kinect，这些资源可能会有用：

1. DepthCam
2. KinectJS

Answer 2

将我的代码与http://threejs.org/examples/#webgl_custom_attributes_particles3进行比较时 我看到唯一的区别是：

  

vec4 outColor = texture2D（texture，gl_PointCoord）;
      if（outColor.a＆lt; 0.5）丢弃;
     gl_FragColor = outColor;

添加到片段着色器中，为我解决了这个问题。

因为随机，一些角落与远处的粒子重叠，所以不是z战斗。 material.alphaTest = 0.5无效，关闭深度写入/测试搞砸了查看顺序。

Answer 3

  

图像的问题在于，当你有数千个点时   它们似乎有时会在边缘相互模糊。从何而来   我可以收集它似乎是一个点的png文件中的黑色区域   阻止当前点后面的图像。 （但它是   透明到后面的点）

您可以通过转动

来摆脱底层方形结构的透明度重叠问题

depthTest:false

问题是，如果要向场景中添加其他对象，深度测试将失败，PointCloud将呈现在其他对象的前面，忽略实际的顺序。为了解决这个问题，你可以另外关闭

depthWrite:false