Próbuję użyć biblioteki Three.js, aby wyświetlić dużą liczbę kolorowych punktów na ekranie (na przykład około pół miliona do miliona). Próbuję użyć mechanizmu renderującego Canvas zamiast renderowania WebGL, jeśli to możliwe (strony internetowe byłyby również wyświetlane w bąbelkach klienta Google Earth, które wydają się działać z mechanizmem renderującym Canvas, ale nie z rendererem WebGL).

Podczas gdy mam problem rozwiązany dla małej liczby punktów (dziesiątki tysięcy), modyfikując kod ztutaj, Mam problem ze skalowaniem poza tym.

Ale w poniższym kodzie wykorzystującym WebGL i system cząsteczek mogę wyrenderować pół miliona losowych punktów, ale bez kolorów.

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

Czy przyczyną lepszego działania powyższego kodu jest system cząstek? Z tego, co przeczytałem w dokumentacji, wydaje się, że Particle System może być używany tylko przez renderer WebGL.

Więc moje pytania są

a) Czy mogę renderować tak dużą liczbę cząstek za pomocą renderera Canvas lub czy będzie on zawsze wolniejszy niż wersja WebGL / ParticleSystem? Jeśli tak, jak mam to zrobić? Jakie przedmioty i sztuczki używam, aby poprawić wydajność?

b) Czy mogę osiągnąć kompromis, jeśli zrezygnuję z niektórych funkcji? Innymi słowy, czy nadal mogę używać renderera Canvas dla dużego zestawu danych, jeśli zrezygnuję z konieczności kolorowania poszczególnych punktów?

c) Jeśli muszę zrezygnować z Canvas i użyć wersji WebGL, czy można zmienić kolory poszczególnych punktów? Wygląda na to, że kolor jest ustawiany przez materiał przekazany do systemu ParticleSystem, który ustawia kolor dla wszystkich punktów.