Dont render surfaces invisible to the camera

Hello, casually, genuinelly for no reason I just decided to make a bootleg of minecraft, however, one problem Im facing quite a lot is that my fps go from 1000 to 10 in matter of seconds looking at a wider amount of blocks. I did some research and I believe this is happening because even surfaces not visible to the camera are being fully rendered and in such a count of blocks I have here… I am pretty much sure thats the problem. I was wondering if anyone could help me with eliminating the problem as Im completely unsure how to check which surface is or not visible to the camera and how to actually not render one, Im using BoxBufferGeometry and basic texture loading.

Three concepts to keep in mind here:

  • draw calls: Ideally you want <100 draw calls per frame, and definitely <1000 draw calls per frame. One mesh is one draw call. Using things like InstancedMesh, or merging geometry, can reduce draw calls.
  • frustum culling: three.js will not draw meshes that are fully outside the camera frustum in most cases.
  • occlusion culling: occlusion culling means hiding objects that are hidden from the camera behind other objects. three.js does not check occlusion culling automatically. this is not trivial to implement efficiently, at least for arbitrary content. But if you wanted to do so you can mark .visible=false on the objects to hide.

If your minecraft bootleg is using 100s or 1000s of BoxBufferGeometry objects then I think the bottleneck is most likely to be draw calls, rather than either type of culling. Merging or instancing can help with this.