我正在尝试使用Three.js库在屏幕上显示大量彩色点(例如,大约五十万到一百万)。我想尽可能使用Canvas渲染器而不是WebGL渲染器(网页也会显示在Google Earth Client气泡中,这似乎与Canvas渲染器兼容,但不适用于WebGL渲染器。)
虽然我通过修改here中的代码解决了少量问题(数万个)的问题,但我无法将其扩展到更远的地方。
但在以下使用WebGL和粒子系统的代码中,我可以渲染50万个随机点,但没有颜色。
...
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的材质设置的,它设置了所有点的颜色。
答案 0 :(得分:20)
编辑:ParticleSystem
和PointCloud
已重命名为Points
。此外,ParticleBasicMaterial
和PointCloudMaterial
已重命名为PointsMaterial
。
要为每个粒子使用不同的颜色,您需要将颜色数组作为几何的属性,然后在材质中将vertexColors
设置为THREE.VertexColors
,如下所示:
// vertex colors
var colors = [];
for( var i = 0; i < geometry.vertices.length; i++ ) {
// random color
colors[i] = new THREE.Color();
colors[i].setHSL( Math.random(), 1.0, 0.5 );
}
geometry.colors = colors;
// material
material = new THREE.PointsMaterial( {
size: 10,
transparent: true,
opacity: 0.7,
vertexColors: THREE.VertexColors
} );
// point cloud
pointCloud = new THREE.Points( geometry, material );
这是一个更新的小提琴:http://jsfiddle.net/J7zp4/200/
你的其他问题对我来说有点过于笼统,而且,这取决于你想要做什么以及你的要求是什么。是的,你可以期待Canvas更慢。
编辑:已更新为three.js r.73