X-ray Effect for transparent Meshes

image|30003
How can I achieve an X-ray like effect as above when a mesh is transparent?
I have tried using THREE.MeshStandardMaterial({ side: THREE.DoubleSide, transparent: true, opacity: 0.5 , }); but this only gives half of the outline for rounded surfaces and the finish is not smooth. Example of what I am getting:

One option is using the newly added SSRrPass with proper specular lighing.

But the bright part at the edge of objects is caused by Fresnel reflection effect, this exists in SSRPass.

I plan to combine these two Passes into one something like SSRaytracePass, but now if you want to use this solution, may need combine them by self.

Now SSRrPass lack the feature of stacked transparent objects, and postprocessing may be overwhelmed for regular requirements. So just metion the possible direction here.

Should have simpler non-postprocessing solution, just use normal info per transparent object with Fresnel effect. Like this.

And, is this meet your needs? May just use Three’s exsiting material with flatShading=false and proper depthWrite depthTest is sufficient.

image

May this pr is useful to integrate to your code with existing material too.

https://threejs.org/examples/?q=node#webgl_loader_nodes

1 Like

Thank you so much! I will check these out :slight_smile:

1 Like