Low performance help

Questions
1

Hello, I am using instanced meshes to make chunks in my minecraft clone with typescript.

I am still getting very low performance when showing 9+ chunks. I am wondering if there is something I am doing wrong, or my school chromebook is just slow asf. Thank you.

Meshing function:

addToScene(scene: THREE.Scene) : void {
        const blocks: Map<string, ChunkBlockInfo[]> = new Map();
        this.blocks.forEach((block: ChunkBlockInfo, name: string) => {
            if (this.isFullyCovered(block.position)) {
                return;
            }
            if (!blocks.has(name)) {
                blocks.set(name, [block]);
                return;
            }
            blocks.set(name, [...(blocks.get(name) as ChunkBlockInfo[]), block]);
        });
        let tempMesh: THREE.InstancedMesh;
        const object3D: THREE.Object3D = new THREE.Object3D();
        let tempPlaceHolder: number = 0;
        blocks.forEach((_blocks: ChunkBlockInfo[]) => {
            tempMesh = new THREE.InstancedMesh(_blocks[0].block.geometry, _blocks[0].block.texture, _blocks.length);
            for (const block of _blocks) {
                object3D.matrix.setPosition(block.position.shiftChunk(this._position).toThreeVector3());
                tempMesh.setMatrixAt(tempPlaceHolder, object3D.matrix);
                tempPlaceHolder++;
            }
            tempMesh.instanceMatrix.needsUpdate = true;
            scene.add(tempMesh);
            this.meshes.push(tempMesh);
            tempPlaceHolder = 0;
        });
    }

github is here if you need the full code: GitHub - TacoError/TypeCraft: Writing a simple clone of Minecraft in TypeScript

2

Are you using instanced cube geometries as blocks? Minecraft actually uses a non-interpolated marching cubes, only the surface of volumes are polygonized, the actual blocks are voxels of a 3D texture (the chunk). If you would fill the volume with cubes you will end up with millions of polygons and overdraw too.

Also it would be easier if you explain in short how you approach things rather than expect to fully read into the code understanding your terminology. (additionally, providing full code or better a live example of course is commendable)

3

With every chunk, I sort the blocks and their positions into individual arrays corresponding to each block. I then create a instanced mesh for every different type of block in the chunk. The blocks that are fully covered are not shown, yet I still receive performance issues.

You can try a live example here: https://typecraft.taylorradl.repl.co/

Full code was provided in the original post under the code.
Here it is: GitHub - TacoError/TypeCraft: Writing a simple clone of Minecraft in TypeScript

4

In that live example they are shown? Anyway there is a massive amount of drawcalls, you also don’t need to issue different drawcalls on different block types, for this an atlas (WebGL1) or array texture (WebGL2 only) is used, which Minecraft does as well.

You should use the devtools and make a short performance recording to spot bottlenecks.

5

I am going to attempt to understand how the threejs example does it, so that I can try and replicate it to do it on mine.

6

http://mikolalysenko.github.io/voxel-mipmap-demo/

7

Thank you for the recommendation to the library, but I would rather learn how to do it myself rather than use a library.

8

Hello, I was looking at this part of the code, and I was wondering how the uv corresponds to the atlas, thank you.

edit: moreso explain to me how the uv mapping works with the texture atlas and the blocks. the keys given in the uv array just seem so random, and the 0.5 confuses me too. What do the keys correspond to, and what does the 0.5 mean when it comes to mapping the textures to the geometry