rendering millions of voxels using 3D textures with three.js

Question

I am using three.js to render a voxel representation as a set of triangles. I have got it render 5 million triangles comfortably but that seems to be the limit. you can view it online here.

select the Dublin model at resolution 3 to see a lot of triangles being drawn.

I have used every trick to get it this far (buffer geometry, voxel culling, multiple buffers) but I think it has hit the maximum amount that openGL triangles can accomplish.

Large amounts of voxels are normally rendered as a set of images in a 3D texture and while there are several posts on how to hack 2d textures into 3D textures but they seem to have a maximum limit on the texture size.

I have searched for tutorials or examples using this approach but haven't found any. Has anyone used this approach before with three.js

Answer 1

Your scene is render twice, because SSAO need depth texture. You could use WEBGL_depth_texture extension - which have pretty good support - so you just need a single render pass. You can stil fallback to low-perf-double-pass if extension is unavailable.

Your voxel's material is double sided. It's may be on purpose, but it may create a huge overdraw.

In your demo, you use a MeshPhongMaterial and directional lights. It's a needlessly complex material. Your geometries don't have any normals so you can't have any lighting. Try to use a simpler unlit material.

Your goal is to render a huge amount of vertices, so assuming the framerate is bound by vertex shader :

• try stuff like https://github.com/GPUOpen-Tools/amd-tootle to preprocess your geometries. Focusing on prefetch vertex cache and vertex cache.

• reduce the bandwidth used by your vertex buffers. Since your vertices are aligned on a "grid", you could store vertices position as 3 Shorts instead of 3 floats, reducing your VBO size by 2. You could use a same tricks if you had normals since all normals should be Axis aligned (cubes)

• generally reduce the amount of varyings needed by fragment shader

• if you need more attributes than just vec3 position, use one single interleaved VBO instead of one per attrib.