search

google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.97k stars 823 forks source link

support for KHR_materials_transmission (re: Three.js R129) #2445

Closed rawwerks closed 3 years ago

rawwerks commented 3 years ago

Description

KHR_materials_transmission is now supported in Three.js R129 (https://github.com/mrdoob/three.js/releases/tag/r129). I'm 99% sure that @elalish is already aware of this, as he is a reviewer on https://github.com/mrdoob/three.js/pull/21884. I'm mostly posting this to find out when we might expect to see transparency supported in model-viewer. This will be a game changer!

Live Demo

image

Version

https://unpkg.com/@google/model-viewer@1.7.1/dist/model-viewer-umd.js

Browser Affected

OS

AR

Did not test AR, but aware that refraction is challenging in AR.

elalish commented 3 years ago

Hopefully with the v1.8 release. We're excited as well! But last I checked it hasn't been hooked up to the GLTFLoader yet, so i think we're still waiting for some work on the three.js side (though I may be out of date by now).

rawwerks commented 3 years ago

@mrdoob @takahirox - any thoughts on KHR_materials_transmission in the context of GLTFLoader?

takahirox commented 3 years ago

Three.js core supports MeshPhysicalMaterial transmission and the glTF loader supports KHR_materials_transmission in r129. I think transmission will work just bumping Three.js to r129.

But the glTF loader doesn't support KHR_materials_ior and KHR_materials_volume yet. I'm thinking of adding them hopefully in r130.

And I don't think transmission works correctly in AR immersive mode yet https://github.com/mrdoob/three.js/issues/21911 because camera isn't rendered to the transmission sampler render target. I hope we can find a solution and resolve in r130.

donmccurdy commented 3 years ago

I think transmission will work just bumping Three.js to r129.

Yes, just bumping to r129 was enough for https://gltf-viewer.donmccurdy.com/.

takahirox commented 3 years ago

Regarding AR + transmission, as I wrote at https://github.com/mrdoob/three.js/issues/21911#issuecomment-855356832 there doesn't seem to be a way of capturing the camera stream used for AR in the current WebXR AR API due to the security reason. WebXR Raw Camera Access API was proposed but it seems still under the discussion.

Therefore I proposed to handle transmission as just transparent in AR immersive mode so far in Three.js. Just transparent with alpha so for example no refraction, but may be better than nothing or broken.

What do you think? Let us know your opinions if you have in the Three.js thread.

donmccurdy commented 3 years ago

Cube maps or SH from the lighting estimation API might be a good starting point. Not totally ideal for transmission, but would probably look pretty good for translucency and subsurface scattering, which I hope to (eventually) support through a similar MeshPhysicalMaterial API.

elalish commented 3 years ago

Fixed by #2454 (not thoroughly tested on this side yet).