1
$\begingroup$

I'm designing some cool glass spheres, similar to marbles, in Blender. Then, I want to export the model as a .glb and use it in my web app with three.js. I'm importing them into the browser using three.js.

I've used blender quite a bit for making simple 3d logos and stuff, and this method always works great. However, I'm having trouble getting the glass material to export with the model. Instead, it always just exports with a transparent sphere with zero material or texture.

Here's what it looks like in blender:

enter image description here

Here's what it looks like in the browser:

enter image description here

I'm using some simple techniques to achieve the glass effect.

  1. Set transmission to 1
  2. Set roughness to 0
  3. Set IOR to 1.7

Other than that, I've tried changing the material settings Blend Mode to "Alpha blend" to try and get more of a transparent glass effect. It looks nice, but none of it exports with the model.

When I export, I'm including everything necessary to my knowledge:

enter image description here

Here's a copy of the .blender project file in case anyone would like to take a closer look.

Any help on this would be greatly appreciated! I'm pretty surface level with Blender.

Improve this question
$\endgroup$
3
  • $\begingroup$ blender.stackexchange.com/questions/57531/… $\endgroup$
    – Duarte Farrajota Ramos ♦
    Commented Jul 18, 2022 at 19:08
  • $\begingroup$ @DuarteFarrajotaRamos Thanks, that's a very insightful read. However, according to this sentence, it looks like I may be able to do this using gltf/glb: One notable exception to all this is the glTF file format, which as of version 2.0 glTF does support some material definitions based on a metallic-roughness shading model in its specs $\endgroup$
    – silencedogood
    Commented Jul 18, 2022 at 19:16
  • $\begingroup$ Okay... I'm seeing this is still very limited... Hm. I'll need to research further and check for a workaround. $\endgroup$
    – silencedogood
    Commented Jul 18, 2022 at 19:19

1 Answer 1

Reset to default
2
$\begingroup$

You're correct to use the "transmission" setting instead of alpha blending for glass here. Several recent releases of Blender will export transmission to glTF, since 2.9x or so, certainly all of the 3.x releases will do it.

Here's what it looks like in the browser:

screenshot

The problem here is you've given it a boring blue background, and all that fancy glass has very little to reflect or interact with. You need to give your 3D app an IBL (Image-Based Lighting) texture, to provide a textured environment for your models to adapt to.

You may also want to try placing a background object of some kind in the scene. For example the Dragon Attenuation test model includes an opaque checkerboard cloth behind the dragon, to better portray what happens to light on the way through.

Dragon test model screenshot

One last note, current stable versions of Blender (up through 3.2.0) do not yet export "volumetric" glTF like the dragon has, just "thin-walled" transmission (as if your marble was merely a glass bubble, hollow inside). This is being worked on for Blender 3.3.0, but is still in testing. For now I recommend focusing on getting the thin-walled transmission working first before moving on to enabling volumetrics.

Improve this answer
$\endgroup$
1
  • $\begingroup$ That's interesting... Because I actually tried adding a plane to the model. And it showed the red color when I did that. However, it didn't show any of the nice reflected textures that makes the "glass" effect. It was basically just a red sphere with some transparency. So, correct me if I'm wrong. The problem is that the model needs something more busy than a gray plain or blue background to create "reflections"... I'll play around with this idea and see what happens. Thanks! $\endgroup$
    – silencedogood
    Commented Jul 19, 2022 at 18:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .