在粒子系统中渲染球体(或点) [英] Rendering spheres (or points) in a particle system

问题描述

我正在使用 Three.JS 库在 Web 浏览器中显示点云.点云在启动时生成一次，不会添加或删除更多点.但它确实需要旋转、平移和缩放.我已经阅读了有关在three.js 中创建粒子的教程href="http://mrdoob.github.com/three.js/" rel="nofollow noreferrer">examples 使用编码的 webm 视频来存储数据并将其传递给渲染的 GLSL 着色器通过three.js中的粒子系统

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

1. DepthCam
2. KinectJS

I am using the Three.JS library to display a point cloud in a web brower. The point cloud is generated once at start up and no further points are added or removed. But it does need to be rotated, panned and zoomed. I've gone through the tutorial about creating particles in three.js here

Using the example I can create particles that are squares or use an image of a sphere to create a texture. The image is closer to what I want, but is it possible to generate the point clouds without using the image? The sphere geometry for example.

The problem with the image is that when you have thousands of points it seems they sometimes obscure each other around the edges. From what I can gather it seems like the black region in a point's png file blocks the image immediately behind the current point. (But it is transparent to points further behind)

This obscuring of the images is the reason I would like to generate the points using shapes. I have tried replacing particles = new THREE.Geometry() with THREE.SphereGeometry(radius, segments, rings) and tried to change the vertices to spheres.

So my question is. How do I modify the example code so that it renders spheres (or points) instead of squares? Also, is a particle system the most efficient system for my particular case or should I just generate the particles and set their individual positions? As I mentioned I only generate the points once, but then rotate, zoom, pan the points. (I used the TrackBall sample code to get the mouse events working).

Thanks for your help

解决方案

I don't think rendering a point cloud with spheres is very efficient. You should be able to get away with a particle system and use a texture or a small canvas program to draw a circle.

One of the first three.js sample uses a canvas program, here are the important bits:

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

Feel free to adapt the code for the WebGL renderer.

Another clever solution I've seen in the examples is using an encoded webm video to store the data and pass that to a GLSL shader which is rendered through a particle system in three.js

If your point cloud comes from a Kinect, these resources might be useful:

1. DepthCam
2. KinectJS

这篇关于在粒子系统中渲染球体(或点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！