0

Trying to achieve this kind of effect, but not sure which direction to head to.

enter image description here

I have tried to use a Multi-side Refraction technique using shaders, but can’t really seem to achieve the effect. Is there a simpler approach by any chance?

What I’ll have is a plane in the background, using shaders to achieve the marquee effect. That’s all fine and working. However, I need that geometry to have some sort of frosted glass effect, and at the same time, distort the text in the background. Would using some sort of material on the geometry, and adding transparent, which some parameters work?

Hoping for some guidance

1 Answer 1

1

This effect (as opposed to simpler alpha blending transparency) is called "transmission", and the frosted part is called "transmission roughness". THREE.MeshPhysicalMaterial is the preferred way to do that in three.js, see these examples:

https://threejs.org/examples/?q=transmission#webgl_materials_physical_transmission

However, the material type does not yet support refraction, the distortion of the background shown above. three.js#21000 includes some discussion of supporting that in the future.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.