Voxel Mesher playground

https://www.babylonjs-playground.com/#XKG7EX#8

So a few things… it seems MagicaVoxel .vox expects +z to be “up” and +y to be “forward” so the model is on its face. The model itself wasn’t placed near 0,0,0 so its a bit off to the side: look to the top right of the viewer to find the model. The mesher is not yet optimized, it creates a face for each side of each voxel and even creates voxels that would be hidden by other voxels. I can turn faces off and hide voxels entirely but the logic isn’t implemented to decide which faces to hide and which voxels to skip.

I am coloring each voxel face using the vertex color option. I’m trying to avoid making textures and materials and uv mapping. I add a material to the whole mesh to remove the specular highlights which seems to be working.

And when I try to implement the exact same code in my game I get a whole bunch of WebGL errors in my console:

[.WebGL-0x7f9fc1475e00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
and
babylon.js:1 WebGL: INVALID_OPERATION: uniform3f: location not for current program

Now for some questions for you guys!
How can I make a self illuminating and light emitting voxel in one solid mesh? for instance how can I make “glowing” voxels that are part of the single mesh without materials or texture mapping?
I think it’s possible with sub-meshes for the light emitters then those meshes wouldn’t be part of the mesh vertex data and that definitely gets harder to track…

Thanks everyone!

1 Like

You can use the emissive channel of the material and then add a GlowLayer in your scene.

This will create a nice glow around all the emissive parts of the scene.

Multimaterial is probably a good way to achieve this and keeping only one Mesh.

2 Likes


Emissive voxels using submeshes, multimaterials, and glow layer. Not in the playground yet but it shouldn’t be hard to get into the playground example.

MagicaVoxel has a notion of “emission” and “power” values. I honestly don’t know what these are supposed to translate into in BabylonJS. Right now I’m using the base intensity of the glow layer and the emission color value is the same as the diffuse colour. Any ideas on how to use these values in babylonjs?

Thanks!