Transmission | MeshPhysicalMaterial | does not work

Questions
,
1

transmission property does not work in MeshPhysicalMaterial. Console does not have errors but one warning:

three.module.js:8827 THREE.MeshPhysicalMaterial: ‘transmission’ is not a property of this material.

i did check examples and I am structuring my material exactly like in the documentation:

this.carPaintGlass= new THREE.MeshPhysicalMaterial( {


  transparent: true,
  envMap: this.envTex,
  envMapIntensity:2,
  color: 0xff0000, 
  metalness: 0, 
  roughness: 0, 
  transmission: 0.9, 
  opacity:1,      


} );

Does it look like MeshPhysicalMaterial does not recognize transmission property?

2

transmission is a very new feature. You are most likely using not the most recent version of threejs.
I can see on the github history, transmission was added on July 17 2020

3

thanks for the reply, looks like latest available version on NPM is 118 and this is the one i am on, i see latest version here is 119 but it is not available on npm.

4

i’ve got 119
try
npm update

5

thanks, all good !

6

sorry, i meant to say,
npm install three@latest

1 Like
7

woa i wasn’t aware three had this! i tried and it looks great, but transmission does not support roughness, is that correct? i mean, it does something, but it doesn’t smudge the background shining through.

8

Yeah, the implementation is pretty simple right now: similar to a thin, smooth glass, where reflections don’t disappear at 100% transmission like they would with alpha transparency. See discussion in MeshPhysicalMaterial: Rename .transparency → .transmission, add .transmissionMap by donmccurdy · Pull Request #19690 · mrdoob/three.js · GitHub.

We would like to support the full glTF transmission material spec (which would include surface roughness), and eventually volume, refraction, and subsurface scattering.

2 Likes
9

thanks don! looking forward.

as a daily practice i tried recreating one of ARC’s visuals: https://twitter.com/arc4g/status/1288983912761393155

this is what i’ve got so far: https://codesandbox.io/s/r3f-ibl-envmap-simple-6ebrr?file=/src/App.js

but there wouldn’t be any way to easily get surface blur, correct?

2 Likes
10

Ah that’s a really nice example!

The surface refraction / blur can be approximated by blurring the IBL, but that doesn’t work for objects seen through the surface. No easy answer for the latter.

11

I liked drcmda’s example so much, that I had to try it out myself.

https://codesandbox.io/s/meshphysicalmaterial-transmission-test-qg8ko?file=/src/client/client.ts

image
image1105×712 142 KB

2 Likes
12

It seems like Three v133 transmission is not working when the object behind it has transparent set to true. Is this a known issue? Let me know if I should post a repro.

1 Like
13

This is a known limitation – see Examples: webgl_loader_gltf_transmission issues · Issue #22009 · mrdoob/three.js · GitHub

2 Likes