Pure BabylonJS code to build model with accurate translucency (like the "Mosquito In Amber" demo)

Really loving this new demo: Babylon.js Sandbox - View glTF, glb, obj and babylon files

I’m curious though how I could add this effect using BabylonJS code to imported models that aren’t gltf/glb or don’t have the effect already in place within the scene file prior to import. Any help would be greatly appreciated!

It’s certainly an awesome demo. I’d say the place to start is just using the inspector to see how the materials and textures are applied to achieve that result, then mimic that same approach in code.

1 Like

Thanks @inteja. Thanks for the quick reply. I actually did use the inspector before I posted but I’m was still lost. The effect appears to have something to do with the refraction texture assigned to the amber model because when I remove that texture from the amber material (using the inspector) the translucency is removed and the mosquito is no longer visible within the amber. I’ve looked at the corresponding texture file but it’s still not clear how that is being used to achieve the effect. It basically looks like a front-view render of the mosquito model itself. How that aids in the 3d refraction of the encased mosquito model is beyond me.

opaqueSceneTexture is a dynamic RenderTargetTexture which renders everything except the amber from the camera view. If you hit “Refresh” as the scene is spinning, you’ll see the texture re-rendered.

This is using the TransmissionHelper class (implemented by the gLTF loader), which is not exposed to user code.

See Transmission Helper Optimisation and my answer (+link) for some context.

You can implement it yourself by rendering the opaque objects in a RenderTargetTexture and using this texture as the refraction texture of your PBR materials.


Is there any support yet on the horizon for a scene colour copy to render transmissive materials, rather than re-rendering the entire scene to a separate RT? :slight_smile:

I don’t think so, but here’s a proof of concept to generate the opaque texture without the TransmissionHelper and without the additional re-rendering of the scene (but instead with an additional copy texture):

It’s a bit crude because I don’t handle screen resizing / image processing / … but it works.

It needs that at least one post process exists in the scene because it’s the texture of the first post process that will be copied into the opaque texture, so I created one in the PG (a do nothing “pass”), but if you already have one you can avoid creating this pass post process.

It also needs that the transmissive meshes (the ones that need the opaque texture as their refraction texture) be set with renderingGroupId=1 because it is at the transition between renderingGroupId=0 and renderingGroupId=1 that the current texture is copied into the opaque texture (in the scene.onBeforeRenderingGroupObservable event).