1
$\begingroup$

I created a simple model with a semi transparent (glassmorphism) look.

I exported it as GLTF and used it in the web using three.js.

Problem

  1. Since Glass BSDF is not supported I use Principled BSDF but missing to recreate the effect (less reflective, less blurry, see attached screenshots)
  2. The exported model looks way different in the web than in blender (see attached screenshots)

Questions

  1. How can I tweak Principled BSDF Properties so it mimics Glass BSDF?
  2. What do I need to adjust to get a similar result with threejs compared to the render in blender?

Attachments

  • on the right "Glass BSDF" was used, on the left "Principled BSDF"
  • First image shows the threejs render
  • Second image shows the blender render
  • Different lighting was applied but given that the differences are still too much.

Actual: Threejs render

"2" on the left using "Principled BSDF", on the right "Glass BSDF" threejs render

Expected: Blender render

"2" on the left using "Principled BSDF", on the right "Glass BSDF" blender render

Shader Principled BSDF

enter image description here

Shader Glass BSDF

enter image description here

Export Settings

enter image description here

Sources

https://discourse.threejs.org/t/gtlf-glb-not-support-glass/16591

Improve this question
$\endgroup$
4
  • 1
    $\begingroup$ A screenshot of your shaders would help $\endgroup$
    – Lauloque ♦
    Commented Feb 25, 2023 at 13:47
  • 1
    $\begingroup$ Thanks for the comment @L0Lock! I added screenshots of the shader and hope it'll help $\endgroup$
    – visionInc
    Commented Feb 25, 2023 at 22:46
  • 1
    $\begingroup$ I also added a screenshot of the export settings $\endgroup$
    – visionInc
    Commented Feb 25, 2023 at 22:48
  • $\begingroup$ There's a newer section on Volume in the Blender glTF addon documentation, which would be important for what you're trying to do. The preview isn't perfect — things like baked thickness maps help three.js but can't be used in Blender — but can get quite a bit closer than shown above. $\endgroup$
    – Don McCurdy
    Commented Mar 4, 2023 at 6:28

1 Answer 1

Reset to default
0
$\begingroup$

How to make Blender look like threejs

Use Blender's Eevee render engine, which is closer to how threejs works. I am not very knowledgeable on threejs specifically, and it would be out of topic to talk about how to use it on Blender Stack Exchange.
But as far as I can see, the biggest difference is that threejs seems to not use the environment the same way to make reflections. So maybe look up that topic.

How to get a closer result from Principled BSDF to Glass BSDF

Distribution

While your Principled BSDF uses a GGX distribution with Christensen-Burley subsurface method, and your Glass BSDF uses a Beckmann distribution, both these options are unavailable across the two shaders. The only one they have in common is GGX (and Multiple-scattering GGX, but only in Cycles).

Glass settings

The only other settings exposed in the Glass BSDF are the color, roughness, IOR and normal.

In the Principled Shader, as long as your Metallic is at 0 and Specular at 1, it should mostly behave the same. You didn't use the same roughness value, so maybe try that first.

Improve this answer
$\endgroup$

You must log in to answer this question.

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