Interactive WebGL Demo: Screen-Space Subsurface Scattering

Screen-space subsurface scattering (also known by the amusing acronym SSSSS) refers to a class of techniques for approximating subsurface scattering effects in 3D graphics as a fast postprocessing pass, rather than attempting to accurately model light passing through a translucent material. The original article on screen-space subsurface scattering used a series of blur passes modulated by the depth buffer to fake the detail-blurring effects of subsurface scattering in real time. The diffuse and specular components of reflection in the scene are rendered out to separate textures; only the diffuse layer is blurred, and then the sharp specular shading is composited in afterwards. This is designed to model the multi-layered behavior of many materials, like human skin in the original paper, where light rays either reflect off the surface immediately on contact or penetrate into the material and bounce around before exiting.

I took the sample shader code from that page and translated it into a simple WebGL demo. You need to have a browser that supports WebGL and the WEBGL_depth_texture extension. (Chrome should work, at least.) There are two sliders that let you control the subsurface scattering effect:

  • One slider controls that simulated scattering radius by adjusting the distance between samples for the blur operation. If you turn this parameter up very high, you can get wave-like artifacts near sharp transitions in depth due to the way the depth buffer is factored into the blur operation. Increasing the number of Gaussian blur samples would reduce this effect at the cost of performance.
  • The other slider controls how sharp a depth difference has to be before the shader will stop blurring across that area. If you turn this up to a large value, disconnected areas of the mesh will start blurring into each other, but if you turn it down too low the scattering effect will disappear completely.