Methods of adding depth

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?

( note; can’t use renderOutline / HL layer )

Cheers :slight_smile:

I’d create the boxes in Blender and add a slight bevel.

1 Like

The way it is lit could make a difference.

1 Like

Good suggestions from @adam and @JohnK :slight_smile: You could also think about shadows. The hemi light you are using is not the best for adding depth - very flat lighting.

cheers, gryff :slight_smile:

1 Like

Thank you for the suggestions!

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 :smile:

cheers!

Update

I ended up going with the uvs and a simple texture with a small border for now :slight_smile:
Will mostlikely do some tests with different types of lighting and shadows in the future.
couple pictures…
Original


Test with shaded triangles

Uv’s & texture

2 Likes

lean solution : just add another light from a diagonal direction
https://playground.babylonjs.com/#RJYBE6#3

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.

3 Likes

Lighting will be your friend here. Id do like @jerome says. Maybe do a cavers light on the active camera and have it do shadows on the stage.

You could also do a custom shader where they have a slight gradient shift in color as they increse in height causing the lower ones to appear darker.

And SSAO pass might help as well.

2 Likes