Examples: Add Screen-Space Subsurface Scattering example - #33761
Examples: Add Screen-Space Subsurface Scattering example#33761marcofugaro wants to merge 15 commits into
Conversation
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
| // Initial scan: register existing SSS materials and attach childadded/childremoved | ||
| // listeners to every existing node. Three.js has no 'descendantadded' event, so we | ||
| // must propagate the listener manually to catch future nested additions/removals. | ||
| scene.addEventListener( 'childadded', this._onChildAdded ); |
There was a problem hiding this comment.
In WebGPURenderer we have the Renderer.setRenderObjectFunction() function to intercept the rendering of the object that considers the camera frustrum. This way, you wouldn't need to pre-process the entire scene every time material is added or deleted.
There was a problem hiding this comment.
ah thanks! didn't know it existed
There was a problem hiding this comment.
ok! implemented the setRenderObjectFunction() approach following the ToonOutlinePassNode.js code in 0680fe2.
But I realized that the params uniformArray would trigger a shader recompilation when a new SSSS object enters the frustum, so I replaced it with a growing DataTexture in ffbd04e, it shouldn't trigger a new shader recompile.
Let me know how is it now.
2 participants
Related issue: -
Description
I adapted the paper Efficient Screen-Space Subsurface Scattering Using Burley’s Normalized Diffusion in Real-Time as a postprocessing pass in
SSSSNode.js. I also created aMeshSubsurfaceNodeMaterialto be able to give different models different parameters.This is a different approach than the existing
webgpu_materials_sssexample.This simulates more the diffuse profile of the subsurface lighting (how light spreads beneath the lit surface before coming back out).
As opposed to
webgpu_materials_ssswhich simulates the translucency of an object (how much light shines through this object from behind), as it was more appropriately called before #19157, the approach is explained better in this article.Unity actually uses a mix of both techniques (it has parameters to control each), but a current limitation with the implementation of the translucency of
webgpu_materials_sssis that it needs a precomputed thickness map (models/fbx/bunny_thickness.jpg), so not really that straightforward to use. I wouldn't combine the two approaches until we found a way around that, which is out of scope for this PR.Preview link: https://raw.githack.com/marcofugaro/three.js/refs/heads/ssss-build/examples/webgpu_postprocessing_ssss.html