Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ambient occlusion in threejs

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?

like image 328
mjanisz1 Avatar asked Nov 11 '13 19:11

mjanisz1


People also ask

What is ambient occlusion?

Ambient occlusion is a scalar value recorded at every surface point indicating the average amount of self-occlusion occurring at the point on the surface. It measures the extent to which a location on the surface is obscured from surrounding light sources.

How do you calculate ambient occlusion?

In most cases, ambient occlusion is calculated by constructing a hemisphere of rays emanating from a point on the surface in all directions and then checking them for the intersection with other objects.

What is SSAO quality?

July 2020) Screen space ambient occlusion (SSAO) is a computer graphics technique for efficiently approximating the ambient occlusion effect in real time. It was developed by Vladimir Kajalin while working at Crytek and was used for the first time in 2007 by the video game Crysis, also developed by Crytek.


1 Answers

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
like image 155
travnik Avatar answered Sep 22 '22 16:09

travnik