Qustion about PointCloudSystem performence

Questions
1

Hi,all

I’m new to js world and just started to learn typescript and try re-produce a function that I have done in Python.

What I want to do is simple: I have a 4d array[i] [j] [k] [m] , if m=1, then render a point at (i,j,k). thats it.

I have done this in Python with Vispy, as a bench mark, the program took aound 950m of RAM when I opened a 800m numpy data file and the render was done in seconds.

While in Babylonjs, I used PointCloudSystem with the following codes to create a canvas. However, when running in browser, it took over 15gs of RAM at the beginning for a while and then running forever with 20% CPU usage and ‘Page Unresponsive’ warning. I didn’t get any render after 20m of time.

Just want to know if this there is the perfomance limitation of Babylonjs? or my implementation is wrong?

Thanks,

const BabylonScene: React.FC = () => {
    const canvasRef = useRef<HTMLCanvasElement | null>(null);
    const { array } = useArrayContext()!;
  
    useEffect(() => {
      
      const canvas = canvasRef.current!;
      const engine = new Engine(canvas, true);
      const scene = new Scene(engine);
  
      // Configuring the camera
      const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 4, 4, BABYLON.Vector3.Zero(), scene);
      camera.attachControl(canvas, true);
  
      // Configuring the light
      const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 0, 0), scene);

      const points:BABYLON.Vector3[] = [];
      if (array){
        let totalCount = 0;
        for (let i = 0; i < array.length; i++) {
          for (let j = 0; j < array[i].length; j++) {
              for (let k = 0; k < array[i][j].length; k++) {
                let lastDimensionLength = array[i][j][k].length;
                if (array[i][j][k][lastDimensionLength - 1] === 1) {
                  points.push(new BABYLON.Vector3(i,j,k));
                }
                console.log(i,j,k)
                totalCount += 1
              }
          }
        }
        if(points){
          const PCS = new BABYLON.PointsCloudSystem('pointCloud', totalCount, scene);
          PCS.addPoints(PCS.addPoints(points.length, (particle:BABYLON.Particle, i:number, s:BABYLON.Scene) => {
            particle.position = points[i].clone();
            particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), Math.random());
            PCS.buildMeshAsync();
            }
          ));
        } 

      engine.runRenderLoop(() => {
          scene.render();
      });

    }});
  
    return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
    };
2

seems to me a bit strange.

look at this example

pcs.addPoints(points.length, initParticles);

particle example | Babylon.js Playground (babylonjs-playground.com)

3

Correct me if I am wrong but Vispy uses OpenGL not WebGL/WebGPU, right? And what about Python’s data structures? Are they more like JavaScript Objects or ArrayBuffers or more/less low level? Clarifying these points might help in more accurately informing performance expections.

But at any rate, Babylon is usually very fast. If possible, please replicate your setup here: Babylon.js Playground Ideally, with some smaller numbers :grin:

4

Thanks! This is very helpful, I found a few errors in my implementation. These errors were not picked up by the eslint so I’m not aware.

5

Thanks Joe. I found it is due to error my implementation. While this playground does light me up for a simple test that over 1m points in this simple script will crush the browser, I suppose that the hard limit.

6

Come on everyone, can we get to 60fps at 1,000,000 PCS points.? Lets beat OpenGL :crazy_face:

I got it to 30fps with 4 addional lines of code: https://playground.babylonjs.com/#UI95UC#2490 (make sure WebGPU is selected).

1 Like
7

Aww man. I thought GPUParticles that are frozen in place are faster: Babylon.js Playground But no :frowning: Only getting 11fps. But they load faster.

FYI: I should mention that if I switch to my Nvidia GPU we have already hit the 60fps mark and effectively proven that there is:

no hard limit (wrt 1M data pts).

1 Like