CODEWITHSUNDEEP
three.js
anon
anon

Reputation: 634

Three.js - Need help to achieve this effect - Image attached

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

Upvotes: 0

Views: 812

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11960

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.

Upvotes: 1

Related Questions