我正在尝试使用 Three.js 库在屏幕上显示大量彩色点(例如大约一百万到一百万)。如果可能,我正在尝试使用 Canvas 渲染器而不是 WebGL 渲染器(网页也将显示在 Google 地球客户端气泡中,这似乎适用于 Canvas 渲染器,但不适用于 WebGL 渲染器。)
虽然我通过从这里修改代码解决了少量点(数万点)的问题,但我在扩展它时遇到了麻烦。
但在下面使用 WebGL 和粒子系统的代码中,我可以渲染半百万个随机点,但没有颜色。
...
var particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 1,
sizeAttenuation : false
});
// now create the individual particles
for (var p = 0; p < particleCount; p++) {
// create a particle with randon position values,
// -250 -> 250
var pX = Math.random() * POSITION_RANGE - (POSITION_RANGE / 2),
pY = Math.random() * POSITION_RANGE - (POSITION_RANGE / 2),
pZ = Math.random() * POSITION_RANGE - (POSITION_RANGE / 2),
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
// add it to the geometry
particles.vertices.push(particle);
}
var particleSystem = new THREE.ParticleSystem(
particles, pMaterial);
scene.add(particleSystem);
...
上面的代码性能更好的原因是粒子系统吗?从我在文档中阅读的内容来看,粒子系统似乎只能由 WebGL 渲染器使用。
所以我的问题是
a) 我可以使用 Canvas 渲染器渲染如此大量的粒子,还是它总是比 WebGL/ParticleSystem 版本慢?如果是这样,我该怎么做?我使用哪些对象和/或技巧来提高性能?
b) 如果我放弃某些功能,我可以达成妥协吗?换句话说,如果我放弃为单个点着色的需要,我还能将 Canvas 渲染器用于大型数据集吗?
c) 如果我必须放弃 Canvas 并使用 WebGL 版本,是否可以更改各个点的颜色?似乎颜色是由传递给 ParticleSystem 的材料设置的,它设置了所有点的颜色。