Examples: Add Screen-Space Subsurface Scattering example by marcofugaro · Pull Request #33761 · mrdoob/three.js · GitHub
Skip to content

Examples: Add Screen-Space Subsurface Scattering example#33761

Open
marcofugaro wants to merge 15 commits into
mrdoob:devfrom
marcofugaro:ssss
Open

Examples: Add Screen-Space Subsurface Scattering example#33761
marcofugaro wants to merge 15 commits into
mrdoob:devfrom
marcofugaro:ssss

Conversation

@marcofugaro

@marcofugaro marcofugaro commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

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 a MeshSubsurfaceNodeMaterial to be able to give different models different parameters.

This is a different approach than the existing webgpu_materials_sss example.
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_sss which 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_sss is 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

Screenshot 2026-06-10 at 15 10 49

@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

Comment thread examples/jsm/tsl/display/SSSSNode.js Outdated

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah thanks! didn't know it existed

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants