Looking for advice about shading/outlining these voxels

[timetocode]

What are some options for making a game like this look nicer? I could definitely release this game essentially how it looks now, but I wanted to ask around because this is my first 3d project and I simply don't know what is out there.

I'm making levels in MagicaVoxel. This isn't a level editor, its really just an art program. The game is a first person shooter, and I've written a parser that loads the voxel data from the drawing program into a collision system which can collide with the player and the shots. The meshes that get rendered via babylon are exported as objs from magicavoxel (as opposed to having written some javascript mesher that creates meshes from voxel data).  I can make a decently sized level in the realm of 2 - 12 MB, partially thanks to the game technically not using any textures (its just plain colors and vertex data).

Here's an elaborate area from the game rendered in MagicaVoxel (fancy ambient occlusion, shadows, etc).

 

But as we go in browser, remove ambient occlusion, and go for simple shadows, things start to look a little more plain:

It looks decent, but I spent a lot of time just to get it to look this way from this particular angle. The shading doesn't reliably add contrast to the scene, and almost all of the contrast is provided by painting it in deliberately. E.g. a red truck against a dark road and light brick etc. It might look alright, but this is a lot of work and it struggles with elevation change. Things like stair cases are near-invisible until you get close to them:

Any ideas of ways to address that in general?

 

I went to another extreme, and instead of making a nicely painted voxel map, I went for a map that was all about edge definition.

I found a neat edge-renderer that deltakosh made long ago, and I tried making a level where the colors were plain and the edge renderer was used for contrast. This edge renderer really makes the convex edges pop out which totally solves stairs and the rest of my contrast concerns.

^ despite how this looks, this is basically the same game with a simpler map and one different rendering setting. I think its an interesting aesthetic. However for whatever reason it is incompatible with coloring in voxels along the face of wall:

I presume we're seeing magicavoxels attempt at an optimized mesh here, which involves lots of extra triangles. In this case the "edges" that get rendered aren't the edges of the walls, but the edges of the meshes (makes sense, I suppose).

So at the moment with these two techniques I can have either:

A) elaborately painted voxels with difficult to see edges

b) very plain levels that have nice sharp edges all over

A decent game could be made either technique... but can I have both somehow? Or what else even exists (as a high-performance browser option)?

I've heard that ambient occlusion is somewhat easy to program for voxels which would probably make things look really nice... but I have no idea what that would entail.

Thanks for reading

[timetocode]

Found one trick so far, which is that the EdgeRenderer has a second argument called "checkVerticesInsteadOfIndices" which allows for coloring the walls. Also found that some shapes are prohibitively complex and can take minutes to add edges to (such as the scene in the very first image, the trees and craters have too many edges). Here is a picture showing both the nice edges and the shapes that are trouble:

I've also been exploring the idea of a shader that could add a mild gradient to most surfaces, or could lighten voxel faces discretely depending on their elevation. I don't know how to write any of that, but its a maybe.

Also tried unwrapping the meshes in blender and baking shadows -- I couldn't get it to work correctly but it hypothetically would be able to shade the voxels. The problem with this approach is that the baked texture would be pretty large compared to everything else. I probably won't try to make the unwrap+bake option work.

[Sebavan]

Dunno if it is possible but would be nice trying to check if you could bake ambient occlusion from your art tools. usually lightmap can have smaller res than plain textures and this could potentially help addressing some of your needs ?