Ambient occlusion in threejs

Question

I've just finished porting of my first cloth simulation from opengl to webgl using three.js (can be seen here).

The thing is it looks a bit dull, and I want to add (as i hope i remember correctly from my computer graphics classes) ambient occlusion, to make the cloth nicely shaded on collision with ball. My knowledge about shaders is now on very low level, so I'd be very thankful for any resources on this topic helpful with three.js development (tutorials, book titles etc), because googles doesn't know anything about it.

Maybe some hints how to apply ambient occlusion?

So the shading is fixed thanks to WestLangley! Now back to the other questions: any helpful resources on shaders for threejs, or just hlsl in general?

Answer 1

There are several ways to produce ambient occlusion:

• global illumination (GI)
• global low-frequency approximation of light intensity (GI shortcuts)
• screen-space approximations, most commonly referred to as SSAO (screen space ambient occlusion)

here are a few discussions on ambient occlusion in three.js:

• https://github.com/mrdoob/three.js/issues/6575 [Real Time Global/Indirect Illumination]
• https://github.com/mrdoob/three.js/issues/4434 [Voxel Cone Tracing global illumination]
• https://github.com/mrdoob/three.js/issues/5554 [Better shadow maps]

most likely you would want to refer to this example from three.js to start you off:

• http://threejs.org/examples/#webgl_postprocessing_ssao