How do deal with performance issue when rendering large amount of cylinder cube?

Questions
1

I have a large amount of coordinates(420k lines) to render cylinders and two points make a cylinder. The result is when I drag the camera control the model is extremely slow. I’ve tried createInstance, it does make everything faster but as it is for previewing 3d printing result, the top layers may be different, hence can not use createInstance. Is there other way to help with performance? Thanks!

const createScene = function () {
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 5, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // Add lights
        new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
        new BABYLON.DirectionalLight("light2", new BABYLON.Vector3(0, -1, 1), scene);

        // Use a single material instance for all tubes
        const cementMaterial = new BABYLON.StandardMaterial("cementMaterial", scene);
        cementMaterial.diffuseColor = new BABYLON.Color3(0.7, 0.7, 0.7); // Light gray color
        cementMaterial.roughness = 1; // Rough surface


        const tubes = []
        let v1, v2
        coordinates.map(coordinate => {
            if(v1) {
                v2 = v1
                v1 = new BABYLON.Vector3(coordinate.x, coordinate.y, coordinate.z)
                const tube = createTubeFromTwoPoints(scene, v1, v2, cementMaterial)
                tubes.push(tube)
            } else {
                v1 = new BABYLON.Vector3(coordinate.x, coordinate.y, coordinate.z)
                camera.setTarget(v1)
            }
        })

        const mergedMesh = BABYLON.Mesh.MergeMeshes(tubes)




        return scene;
    };

    const createTubeFromTwoPoints = (scene, pointB, pointA, material) => {
        // Calculate the cylinder's height and position
        const direction = pointB.subtract(pointA);
        const height = direction.length();
        const midPoint = BABYLON.Vector3.Center(pointA, pointB);

        // Create the cylinder
        const radius = 0.42; // Adjust the radius as needed
        const cylinder = BABYLON.MeshBuilder.CreateCylinder("tube", { height: height, diameter: radius * 2, tessellation: 20 }, scene);

        // Position and rotate the cylinder
        cylinder.position = midPoint;

        // Calculate the rotation needed
        const axis = BABYLON.Vector3.Cross(BABYLON.Vector3.Up(), direction).normalize();
        const angle = Math.acos(BABYLON.Vector3.Dot(BABYLON.Vector3.Up(), direction.normalize()));
        cylinder.rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, angle);

        // Create a cement-like material
        cylinder.material = material

        return cylinder
    }
2

I’ve tried https://playground.babylonjs.com/#SE22AV#24 particle system, but when rendering 200k tube it is slow(on local machine but fast in the playground), is there a way to make it as fast as it is rendered in playground? What’s the difference?

3

Hi ! It’s mesmerizing :slight_smile:

I think you don’t have a “too many triangles/meshes” render issue here, and the problem is that you have a 2000 deep parenting tree (but why would that be a problem ? no idea. so maybe I’m wrong here)

Here’s a demo that runs smoothly on my machine (144fps stable, I was at 30 fps with the SPS)

The idea is that I keep a list of point, and update an extruded shape instead of managing a tree of cylinders.

There’s rendering artifacts (maybe Extrude Shape does not like sharp angles, but it can probably be smoothed), and I’m not sure the stripe behaves exactly how yours did, but it does fix the performance issues.