Separating model into voxels

[raducal]

Hey,

I'm working on a project which takes 3D models, voxelizes them, creates GLTF models and renders them using ThreeJS. It all works fine, however I'd really like each voxel to be its own separate thing, where clicking on a voxel would allow me to easily change whatever I'd like to change about that whole voxel. I've messed around a little and tried a couple of different things out, like creating a mesh/primitive/node for each voxel, using only the vertices and faces for that voxel, but no luck (probably doing something wrong). Ideally, I'd like to do this all using your awesome library!

This is my first time messing around with both GLTF models and ThreeJS so any help / suggestions to approach this problem in a better way is much appreciated.

[donmccurdy]

Hi @raducostica! I think there are a few possible answers to this, none of which are wrong, but have advantages and disadvantages. The main thing to keep in mind is that each mesh primitive is, usually, going to become its own "draw call" in three.js. There are ways to prevent that (instancing, merging) but they'll require more work in three.js than just loading the model normally. Having a lot of draw calls will make your application slower — often you'd aim for <100 draw calls total for something that runs on mobile, or maybe <1000 on a faster device, or if you don't care about framerate so much. Obviously some voxel scenes can have way more than 100 voxels, so making each voxel a primitive could be a bottleneck.

The alternative here would be to put many voxels into a single primitive, such that (for example) every 6 * 4 = 24 vertices marks the beginning of a new voxel. Then you'd have some choices about how group voxels in primitives...

1. all voxels within a 'zone' (e.g. 50x50x50 voxel area) are one primitive
2. all voxels sharing a material are one primitive
3. opaque and transparent voxels are in different primitives

... or maybe a combination of those. This is much more efficient to render, but it does mean your code for changing position of the voxel will be more complicated. Instead of just changing the position of the node that the voxel is attached to, you'd need to actually change the positions of the 24 vertices that make up that voxel.

So that's a tradeoff. It might make sense to start by doing 1 voxel / mesh and then move to the more complicated and performance-optimized setup later, where each mesh contains many voxels.