4

我正在使用 Three.JS 库在网络浏览器中显示点云。点云在启动时生成一次，不再添加或删除点。但它确实需要旋转、平移和缩放。我已经阅读了关于在three.js中创建粒子的教程here

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

图像的问题在于，当您有数千个点时，它们似乎有时会在边缘周围相互遮挡。据我所知，一个点的 png 文件中的黑色区域似乎立即阻止了当前点后面的图像。（但它对后面的点是透明的）

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

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

谢谢你的帮助

4

3 回答 3

7

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

前三个.js 示例之一使用了画布程序，以下是重要的部分：

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
} ) );

三.js 粒子

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

我在示例中看到的另一个聪明的解决方案是使用编码的 webm 视频来存储数据并将其传递给 GLSL 着色器，该着色器通过 three.js 中的粒子系统呈现 三.js webgl kinect

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

  1. 深度相机
  2. KinectJS

George MacKeron 的 kinect to js 解决方案

于 2012-09-14T20:44:19.843 回答
3

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

vec4 outColor = texture2D（纹理，gl_PointCoord）；
if ( outColor.a < 0.5 ) 丢弃；
gl_FragColor = outColor;

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

这不是 z 战斗，因为随机地，一些角落会与远处的粒子重叠。 material.alphaTest = 0.5没有用，关闭深度写入/测试会打乱查看顺序。

于 2015-01-05T02:45:58.140 回答
1

图像的问题在于，当您有数千个点时，它们似乎有时会在边缘周围相互遮挡。据我所知，一个点的 png 文件中的黑色区域似乎立即阻止了当前点后面的图像。（但它对后面的点是透明的）

可以通过转动来摆脱底层方形结构的透明度重叠问题

depthTest:false

那么问题是，如果您向场景中添加其他对象，深度测试将失败，并且 PointCloud 将在其他对象之前渲染，而忽略实际顺序。为了解决这个问题，您还可以关闭

depthWrite:false
于 2014-12-20T12:06:07.213 回答