How does MeshPhysicalMaterial access the scene background?

…or to ask another way, is it possible to pipe a custom texture into MeshPhysicalMaterial so that transmission will show something other than the scene background?

I have a simple scene with a camera texture as the scene background.

I have a sphere with this material setup:

const mat = new THREE.MeshPhysicalMaterial({
		roughness: 0.0,
		transmission: 0.9,
		reflectivity: 1.0,
		iridescence: 1.0,
		thickness: 0.5

It looks like a bubble, slightly magnifying the camera image. Lovely!

But is there a way to modify the shader to take something other than the scene background using onBeforeCompile?
I’d like to hack it into a nice animated portal effect basically, and I’m hoping that it’s easier to modify the shader than to write my own from scratch.

I’ve poured through the source code for MeshPhysicalMaterial, but I can’t find how it gets the scene background texture. I think it might be in #include <transmission_pars_fragment> but haven’t had any luck.

Does anyone here have a better understanding of the shader, and could you please point me in the right direction?

You can browse the source of the internal materials with this site:

Go here:


#include <transmission_pars_fragment>

and expand it…


Where it reads from : transmissionSamplerMap

And I think it generates that transmissionSamplerMapby re-rendering the scene behind the object w the material… with a viewport set to the size of the object. Like a quad shaped to the screenspace bounds of the object… so it looks like multiple little windows of different viewpoints behind all the transmission objects or smth. but yeah. maybe you could hack into that ^ via onBeforeCompile…


Thanks, that was exactly the hint I was looking for

1 Like