How to glass material effect a la a BJS example?

Questions
1

Hey All,

I’m wondering if I could get the same effect with relative easy in Three.js as in these BJS examples:
http://www.babylonjs-playground.com/#HPV2TZ#4

https://www.babylonjs-playground.com/#19JGPR#12

There are some convenient parameters like this linkRefractionWithTransparency = true.

I’m also not sure if this requires Physically based rendering, which I believe Three.js’s standard material has?

The only dynamic cubemap texture style I’ve had much experience with in Three.js is the Chrome type of look, but I’d like to get this glass effect.

Any tips would be appreciated and if there is any limitation here I’d love to know.

2

Are the refraction examples the sort of effect you are after?

https://threejs.org/examples/?q=refra#webgl_materials_cubemap_refraction
https://threejs.org/examples/?q=refra#webgl_materials_cubemap_balls_refraction
https://threejs.org/examples/?q=refra#webgl_refraction

1 Like
3

They’re close. I have seen those. But there is something especially real about the BJS example. It’s as if I could reach out and grab that crystal ball.

It may just be a magical combo between that particular cubemap texture and the sphere, but I was wondering if anyone had an opinion as to whether there was any current technical limitation in three.js that might make this endeavor challenging.

Ideally, i’d like to make a 1 to 1 copy.

4

That and careful tweaking of the lighting and materials. You will be able to get something that looks almost exactly the same in three.js with some experimentation.

Have a look at this example as well:
https://threejs.org/examples/#webgl_materials_reflectivity

5

I haven’t had much luck using a dynamic cube map : (

Can anyone lend a hand and let me know what I’m missing/doing wrong? I’ve looked at all the Three.js examples and they don’t seem to use the dual cubemap camera approach so I don’t know if that’s my problem or not, but I doubt it.

https://lagauche.github.io/xThreejsGlassTestx/

I’m still just trying to recreate this glass effect:
https://www.babylonjs-playground.com/#19JGPR#12

6

I don’t know the implementation of BJS’s glass shader code but i looks like the demo uses a HDRI. The following example illustrates the usage of IBL environment maps with the MeshStandardMaterial (PBR). @looeee’s posted example contains similar code. Check out the spheres on the right that have minimal roughness values.

https://threejs.org/examples/webgl_materials_variations_standard.html

Try to use a similar approach in your demo.

7

In the given example of Babylon, the sphere’s material has those properties:

glass.reflectionTexture = hdrTexture;
glass.refractionTexture = hdrTexture;

For reflection and refraction at the same time.

Not sure if it’s possible in Three.js, as its materials have only envMap parameter which can be used either for reflection or for refraction. But maybe I’m wrong and missed something )

8

That’s a conclusion I came to with reflection/refraction - that I do need both with the same envMap and different materials maybe. mrdoob mentioned something about this in a github or stackoverflow post about the materials/reflectivity Three.js green emerald example, but I couldn’t determine if that approach would be the right way for me to go.

With my current progress you can see I only have a reflection so it looks quite unrealistic: https://lagauche.github.io/xThreejsGlassTestx/

If it is possible to achieve this same effect in Three.js I probably shot myself in the foot using dynamic cube maps since I may need to double the amount of cameras to do this work? I’m ok with that for this test.

Any ideas for Three.js work-arounds? Or maybe this is a feature request? : )

9

Could you let me know if I’m mistaken? As I understand it, no matter how successful I am with my material choice and settings I’m still not going to have an envMap for reflection and refraction at the same time which is a part of what makes the glass look so realistic. I think I need two “reflections” happening at the same time and the transparency is maybe just an illusion?

I’m determined to get this perfect even if it means some Three.js tricks, but I’m guessing (maybe wrong) that it’s going to take more than selecting one of the materials from the materials/variations/standard example.

Best,

10

Check this example.

This is what I’ve done so far ) Two meshes share one geometry, but different materials with copies of the same cube texture. One mesh is for refraction, the other one is for reflection.

1 Like
11

I just wanted to highlight that the visual quality of the BJS demo also depends on IBL. But yes, i don’t think you can achieve the exact same effect in three.js with a single mesh and a built-in material. Unfortunately, i can’t tell you without further analysis what code is necessary for that.

12

Hey Mugen87 totally understand.Thanks for the IBL tip indeed.

If you have any ideas, or need any more info let me know. I’m going to try out prisoner849’s idea to use two meshes, but i’m wondering if there’s another way. Maybe two materials for FrontSide and Backside (I didn’t have much luck but I might have missed something).