Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

three.js

webgl

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.

screenshot

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

like image 262
jonathanbyrn Avatar asked Mar 31 '17 16:03

jonathanbyrn


1 Answers

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.

like image 195
pleup Avatar answered Sep 17 '22 12:09

pleup