Examples: webgl_loader_gltf_transmission issues

Reposting https://github.com/mrdoob/three.js/issues/21000#issuecomment-862597968 so as to consolidate some remaining issues.

1. webgl_loader_gltf_transmission has the transparent property of each sphere to set to false. Is that what the loader should be doing? What should transparent be set to when transmission is non-zero?

2. After setting transparent to true, only front-faces show the hot-spot. (This may be a known limitation, but @mrdoob just added support for properly rendering back-faces of double-sided meshes.) There should be two hot-spots.

3. FIXED: This is caused by issue 7. below.

4. FIXED Also, in Chrome and Firefox (not Safari)

THREE.WebGLProgram: gl.getProgramInfoLog() WARNING: Output of vertex shader ‘vUv’ not read by fragment shader

Transmission always sets the USE_UV flag.

1. FIXED: If performant, I think the dimensions of the “transmission render target” should match the dimensions of the “current render target”. Doing so will prevent artifacts like the following:

1. FIXED In the following code snippet, transmissionFactor is applied to getIBLVolumeRefraction() twice. I expect that is a physical modeling error.

https://github.com/mrdoob/three.js/blob/dd6ab3cf310f78a8375b8b2037db12ce8e31e82c/src/renderers/shaders/ShaderChunk/transmission_fragment.glsl.js#L23-L28

1. FIXED Also in the above snippet, totalSpecular has units of radiance, and therefore cannot be the correct argument because the function expects a unit-less quantity. A reasonable guess would be material.specularColor, instead.

• Device: Desktop
• OS: macOS 11.4
• Browser: Chrome, Firefox, Safari
• Three.js version: r130dev

/ping @takahirox @donmccurdy

[cx20]

Thank you for fixing the shader. I tried again with the latest version of the library. Looks good.

Library	IridescentDishWithOlives.gltf - closed	IridescentDishWithOlives.gltf - open
glTF Sample Viewer
Three.js r131dev
Three.js r131.1

[takahirox]

#22224