Ambient occlusion (shadows) on the ground

Questions
1

I’m trying to make a simple map: a flat ground with boxes on it. Like little houses. Around each little house i’m trying to get a shadow. From what I found it seems I need ambient occlusion.

I got something to work based on the threejs examples (https://threejs.org/examples/?q=ao#webgl_postprocessing_ssao), but I can’t get a shadow on the ground around my little houses.
There is a shadow around the houses, but not on the ground.

Here’s my example: https://codepen.io/lipsumar/pen/bLaZoP

Why does the occlusion work between the boxes, but not on the ground ?

2

I can see an ambient occlusion effect on the floor but only at certain view positions. Um, i’m not sure why this happens but i would recommend a different approach for your use case: Try to avoid post-processing (which is very expensive) and use light or ambient occlusion maps instead. There is an official example that illustrates this technique: https://threejs.org/examples/webgl_materials_lightmap.html

You achieve more predictable results with better performance, especially on mobile devices. The disadvantage is you have to create (bake) these textures first in a tool like Blender (but there are many tutorials for this on the web). Besides, objects like your houses should be static otherwise the mapping won’t work correctly.

4 Likes