I’m trying to recreate this Skecthfab effect using PBR in three.js but I cannot seem to make much of a headway. I got some form of refraction using this example and setting metalness to 1 and roughness to 0 for standard materials. However, on modifying the opacity to see the object inside, it does not come even remotely near that effect. Any suggestions on how to proceed would be extremely welcome.
My best guess is that it’s performing two separate render passes per frame. One renders the inner mosquito mesh and converts it into a texture (perhaps a CubeTexture?). This texture gets passed to the amber geometry’s envMap, which uses refraction and lots of NormalMap deformations to display the mosquito as a refracted texture.
That’s my best guess, at least. I’m certain that there’s a substantial amount of custom shader code that goes beyond the Three.js built-in materials to achieve that beautiful translucency effect.
@marquizzo Your suggestion makes a lot of sense but does Sketchfab allow this level of customization of shader code? If it were a standalone demo hosted at some site, I would definitely agree with you that a substantial amount of custom shader code is involved. But, since this has been created using Sketchfab, I think a more generic shader code must exist to achieve this effect. From the options I’ve seen in Sketchfab, I believe this is a mix of Refraction with some opacity and subsurface scattering. It looks like an advanced version of this three.js example of subsurface scattering.
They use screenspace refractions, you can see this when you move close and some part isn’t on screen anymore, it starts to mirror/distort some steep angle.
3 Likes
@Fyrestar I had not noticed this. Thank you for pointing it out. In three.js, this would probably be using a CubeCamera and rendering the target to the envMap of the material. I’ll try that out.
I’ve never used Sketchfab before, so I honestly don’t know how they handle their materials. However, the description below the example you posted shows this image of the material setup, which leads me to believe that it can handle Node Materials directly exported from Blender. According to this article by Don McCurdy, node-based materials in Three.js are still a work-in-progress, but you can already find some working examples.
1 Like
@marquizzo Thank you for Don McCurdy’s link. I hadn’t thought in terms of node materials, but now that you mention it, it seems like a great way to break up the problem into different nodes and give it a try. I’m fairly new to node materials, and it seems there’s a lot that can be done already using these, and a lot more that has been promised to come soon 