Hi guys,
I have here a small scene with 4 boxes and a plane, each at a different height, same material, and seen from a bird-view,
You’ll quickly spot that the tops all blend together, and there is little-to-no depth perception. https://playground.babylonjs.com/#RJYBE6
I’m hoping to pick your brains, looking for examples/samples, ideas, comments, etc
How would you add depth to such a scene?
Good suggestions from @adam and @JohnK You could also think about shadows. The hemi light you are using is not the best for adding depth - very flat lighting.
Bevel’s were looking promising, but at a slight angle they are of course not visible.
I think i’d have to add 4 “edges” to each box side instead, 5x the positions count.
But it might be the better solution in the end, that or adding uvs & using a texture with edges.
I tried using EdgesRendering, which looks ok, but even with instances, it needs an additional drawcall for each box, so this is a no-go. https://playground.babylonjs.com/#RJYBE6#1
As for lights/shadows, i’ll have to do some tests,
The hemi gives me the perfect shading i want for each standalone box, it might be tricky
cheers!
Update
I ended up going with the uvs and a simple texture with a small border for now
Will mostlikely do some tests with different types of lighting and shadows in the future.
couple pictures… Original
If you want the effect to be ever visible when the camera moves, then move the point light with the camera with a fixed offset from the camera position (not in the camera position else you won’t see the depth).
example with offset : https://playground.babylonjs.com/#RJYBE6#4
it would probably better with a light rotating with the camera.
Note : when the camera, so the light, is far from the stairs, you can’t see the depth because of the light low intensity.