How to optimize this node.js-express.js-socket.io.js-three.js script?

Questions
1

There are my files, in my Github repository:

DrFrankxio/Hipernova-v15

This is my game screenshot:

image
image1919×937 351 KB

So… how could i optimize the terrain performance to render 500 chunks 60 fps or larger?

2

Start by looking just into threejs. Socketio, express and node do not affect the frame rate unless you are doing something really expensive when getting the data.

3

Yes, i know the trouble is with three.js, so… I looked it but I have this another example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1 Million Cubes</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noisejs/2.0.0/perlin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
    <script src="perlin.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry(1, 8, 1);
        const loader = new THREE.TextureLoader();

        const material = new THREE.MeshBasicMaterial({
            map: loader.load('top.jpg'),
        });

        const count = 100000; // Use 100k cubes for testing
        const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

        const dummy = new THREE.Object3D();
        const gridSize = 1000; // 100x100 grid for visibility
        const spacing = 1;

        function calcSurface(x0, z0) {
            const x1 = Math.floor(x0);
            const z1 = Math.floor(z0);
            return Math.floor(
                Math.floor(noise.simplex2(x1 / 625, z1 / 625) * 125 - 5) +
                Math.floor(noise.simplex2(x1 / 125, z1 / 125) * 25 - 5) +
                Math.floor(noise.simplex2(x1 / 25, z1 / 25) * 5 - 5)
            );
        }

        let i = 0;
        for (let x = 0; x < gridSize; x++) {
            for (let z = 0; z < gridSize; z++) {
                if (i >= count) break;
                dummy.position.set(x * spacing, calcSurface(x, z), z * spacing);
                dummy.updateMatrix();
                instancedMesh.setMatrixAt(i, dummy.matrix);
                i++;
            }
        }

        scene.add(instancedMesh);
        camera.position.set(gridSize / 2, 50, gridSize * 1.5);
        camera.lookAt(gridSize / 2, 0, gridSize / 2);

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

And i think how to combine the 2 scripts, but I cant, so… may i will continue with this?

4

Using instanced cubes will limit how much you can render.

To get larger scenes, you’ll have to look into other techniques like greedy meshing and generating mesh chunks… or GPU based solutions (hard) like svo.