Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

GLTFLoader: Support KHR_materials_transmission physically-based transparency

See original GitHub issue

Describe the bug

The extension KHR_materials_transmission does not semi transparent materials from a .glb.

To Reproduce

Steps to reproduce the behavior:

Get the reference glb from here https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/TransmissionTest
Load it with threejs gltf loader.
The parts of the geometry that are supposed to be semi-transparent are instead 100% opaque. Only 100% transparency is respected. See screenshots below.

Live example

https://jsfiddle.net/jt6ywhs5/12/

Expected behavior

Semi-transparency and transmission works.

Screenshots

Reference: Screenshot 2021-01-04 at 17 52 32 Threejs: Screenshot 2021-01-04 at 18 22 10

Platform:

Device: Desktop
OS: MacOS
Browser: Chrome 87.0.4280.88 (Official Build) (x86_64)
Three.js version: latest stable from https://threejs.org/build/three.module.js

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:50 (5 by maintainers)

Top GitHub Comments

5reactions

whatisorcommented, May 13, 2021

The latest version, I just fix the refraction issue for thickness support. Thickness refraction is cool thing I got from gltf viewer. However, I do not see this parameter from GLTF data. ( above demo using magic number 0.01 as thickness)

5reactions

donmccurdycommented, Jan 4, 2021

Let’s keep this open — https://github.com/mrdoob/three.js/issues/16977 is a pretty broad issue so I think it’s good to have something specifically tracking KHR_materials_transmission.

Top Results From Across the Web

GLTFLoader – three.js docs

GLTFLoader supports the following glTF 2.0 extensions: KHR_draco_mesh_compression; KHR_materials_clearcoat; KHR_materials_ior; KHR_materials_specular ...