Diffuse transmission (again) (#544)

* Define channel target as its own type so it can have extensions

* Add `pointer` as an interpolation path enum case

* WIP: Use dicts to store the original value when animating properties

* Inline some functions

* Update node-sass to 7.0

* Implement `AnimatableProperty`

* Animate weights using `AnimatableProperty`

* Clean up code

* Unified animation for all channel targets

* Animatable texture transforms

* Move animatable property definitions to `gltfTextureInfo`

* Implement `makeAnimatable`

* Animatable node weights

* Fix node weights

* Define animatable properties for `KHR_materials_clearcoat`

* Define animatable properties for `KHR_materials_iridescence`

* Define animatable properties for `KHR_materials_specular`

* Define animatable properties for `KHR_materials_transmission`

* Define animatable properties for `KHR_materials_emissive_strength`

* Define animatable properties for `KHR_materials_sheen`

* Define animatable properties for `KHR_materials_volume`

* Fix typo in camera export

* Make camera properties animatable and break circular dependencies

* Fix animation of normal scale and occlusion strength

* Light conforms to glTF schema

* Define animatable properties for punctual lights

* Redirect pointer in case of punctual lights

* Compute disjoint animations including animation pointer extension

* Make camera properties animatable

* Fix node and mesh weights

* Correctly switch between node and mesh weights

* Fix animated camera near/far plane issues

* Fix a few bugs

* Convert single-element array interpolants to scalars

* Fix `json-ptr` import

* Load `KHR_materials_diffuse_transmission` extension

* Compute diffuse transmission for punctual lights

# Conflicts:
#	source/Renderer/shaders/pbr.frag

* Compute diffuse transmission based on IBL

* Scale diffuse transmission by color factor

* Add debug channels for diffuse transmission

* Fix diffuse transmission texture

* Fix diffuse transmission color texture

* Use alpha channel for diffuse transmission texture

* Fix diffuse transmission sampler name

* Fix punctual light diffuse transmission

* Add UI toggle for disabling diffuse transmission

* Fix some merge issues

* Revert a bunch of files that aren't part of diffuse_transmission

Well except for material.js, which has a mixture of relevance.

* Recover needed changes from material.js after revert.

* Revert renderer.js except for diffuse transmission.

* Revert 2 more files.

* Hopefully the last few bad merge artifacts fixed here.

* Fix issue with u_DiffuseTransmissionColorFactor

* Fix enable switch

* Allow diffuse transmission and volume to be active concurrently in UI

* Apply volume attenuation, if applicable, to diffuse transmission

* Fix some issues with diffuse transmission

* Fix volume switch state in ui

---------

Co-authored-by: Jim Eckerlein <eckerlein@ux3d.io>
Co-authored-by: Mathias Kanzler <kanzler@ux3d.io>
Co-authored-by: David Labode <labode@ux3d.io>

app_web/index.html

@@ -397,10 +397,13 @@ <h2 class="title is-spaced">Advanced Controls</h2>
                                 <b-switch class="smallerLabel" v-model="sheenEnabled" v-on:input="sheenChanged.next($event.target.checked)">
                                     KHR_materials_sheen</b-switch>
                                 <b-switch class="smallerLabel" v-model="transmissionEnabled"
-                                    v-on:input="transmissionChanged.next($event.target.checked)" @input="transmissionTriggered">
+                                    v-on:input="transmissionChanged.next($event.target.checked)" @input="transmissionTriggered($event.target.checked)">
                                     KHR_materials_transmission</b-switch>
+                                <b-switch class="smallerLabel" v-model="diffuseTransmissionEnabled"
+                                    v-on:input="diffuseTransmissionChanged.next($event.target.checked)" @input="diffuseTransmissionTriggered($event.target.checked)">
+                                    KHR_materials_diffuse_transmission</b-switch>
                                 <b-switch class="smallerLabel"
-                                    v-bind:disabled="transmissionEnabled === false ? true : false"
+                                    v-bind:disabled="!transmissionEnabled && !diffuseTransmissionEnabled"
                                     v-model="volumeEnabled" v-on:input="volumeChanged.next($event.target.checked)">KHR_materials_volume</b-switch>
                                 <b-switch class="smallerLabel" v-model="iorEnabled" v-on:input="iorChanged.next($event.target.checked)">KHR_materials_ior</b-switch>
                                 <b-switch class="smallerLabel" v-model="specularEnabled" v-on:input="specularChanged.next($event.target.checked)">KHR_materials_specular</b-switch>

app_web/src/logic/uimodel.js

@@ -45,6 +45,7 @@ class UIModel
         this.clearcoatEnabled = app.clearcoatChanged.pipe();
         this.sheenEnabled = app.sheenChanged.pipe();
         this.transmissionEnabled = app.transmissionChanged.pipe();
+        this.diffuseTransmissionEnabled = app.diffuseTransmissionChanged.pipe();
         this.volumeEnabled = app.volumeChanged.pipe();
         this.iorEnabled = app.iorChanged.pipe();
         this.iridescenceEnabled = app.iridescenceChanged.pipe();

app_web/src/main.js

@@ -221,6 +221,13 @@ export default async () => {
   );
   listenForRedraw(uiModel.transmissionEnabled);
 
+  uiModel.diffuseTransmissionEnabled.subscribe(
+    (diffuseTransmissionEnabled) =>
+      (state.renderingParameters.enabledExtensions.KHR_materials_diffuse_transmission =
+        diffuseTransmissionEnabled)
+  );
+  listenForRedraw(uiModel.diffuseTransmissionEnabled);
+
   uiModel.volumeEnabled.subscribe(
     (volumeEnabled) =>
       (state.renderingParameters.enabledExtensions.KHR_materials_volume =

app_web/src/ui/ui.js

@@ -29,6 +29,7 @@ const appCreated = createApp({
             clearcoatChanged: new Subject(),
             sheenChanged: new Subject(),
             transmissionChanged: new Subject(),
+            diffuseTransmissionChanged: new Subject(),
             cameraExport: new Subject(),
 
             captureCanvas: new Subject(),
@@ -92,6 +93,7 @@ const appCreated = createApp({
             volumeEnabled: true,
             iorEnabled: true,
             iridescenceEnabled: true,
+            diffuseTransmissionEnabled: true,
             anisotropyEnabled: true,
             dispersionEnabled: true,
             specularEnabled: true,
@@ -105,7 +107,7 @@ const appCreated = createApp({
             uiVisible: true,
 
 
-            // these are handls for certain ui change related things
+            // these are handles for certain ui change related things
             environmentVisiblePrefState: true,
             volumeEnabledPrefState: true,
         };
@@ -170,20 +172,26 @@ const appCreated = createApp({
                 this.renderEnvChanged.next(this.renderEnv);
             }
         },
-        transmissionTriggered: function()
+        transmissionTriggered: function(value)
         {
-            if(this.transmissionEnabled == false)
-            {
+            if (value == false && this.diffuseTransmissionEnabled == false) {
                 this.volumeEnabledPrefState = this.volumeEnabled;
                 this.volumeEnabled = false;
+            } else if (value == true && this.diffuseTransmissionEnabled == false) {
+                this.volumeEnabled = this.volumeEnabledPrefState;
             }
-            else{
+        },
+        diffuseTransmissionTriggered: function(value)
+        {
+            if (value == false && this.transmissionEnabled == false) {
+                this.volumeEnabledPrefState = this.volumeEnabled;
+                this.volumeEnabled = false;
+            } else if (value == true && this.transmissionEnabled == false) {
                 this.volumeEnabled = this.volumeEnabledPrefState;
             }
         },
         collapseActiveTab : function(event, item) {
-            if (item === this.activeTab)
-            {
+            if (item === this.activeTab) {
                 this.tabsHidden = !this.tabsHidden;
 
                 if(this.tabsHidden) {
@@ -200,8 +208,7 @@ const appCreated = createApp({
                     activeNavElement.classList.add('is-active');
                 }
                 return;
-            }
-            else {
+            } else {
                 // reset tab visibility
                 this.tabsHidden = false;
             }

source/GltfState/gltf_state.js

@@ -55,6 +55,7 @@ class GltfState
                 KHR_materials_specular: true,
                 /** KHR_materials_iridescence adds a thin-film iridescence effect */
                 KHR_materials_iridescence: true,
+                KHR_materials_diffuse_transmission: true,
                 /** KHR_materials_anisotropy defines microfacet grooves in the surface, stretching the specular reflection on the surface */
                 KHR_materials_anisotropy: true,
                 /** KHR_materials_dispersion defines configuring the strength of the angular separation of colors (chromatic abberation)*/
@@ -202,6 +203,16 @@ GltfState.DebugOutput = {
         VOLUME_THICKNESS: "Volume Thickness",
     },
 
+    /** output diffuse tranmission lighting */
+    diffuseTransmission: {
+        /** output the combined diffuse tranmission */
+        DIFFUSE_TRANSMISSION: "Diffuse Transmission",
+        /** output the diffuse tranmission factor */
+        DIFFUSE_TRANSMISSION_FACTOR: "Diffuse Transmission Factor",
+        /** output the diffuse tranmission color factor */
+        DIFFUSE_TRANSMISSION_COLOR_FACTOR: "Diffuse Transmission Color Factor",
+    },
+
     /** output iridescence */
     iridescence: {
         /** output the combined iridescence */

source/Renderer/renderer.js

@@ -682,6 +682,10 @@ class gltfRenderer
             {debugOutput: GltfState.DebugOutput.transmission.TRANSMISSION_FACTOR, shaderDefine: "DEBUG_TRANSMISSION_FACTOR"},
             {debugOutput: GltfState.DebugOutput.transmission.VOLUME_THICKNESS, shaderDefine: "DEBUG_VOLUME_THICKNESS"},
 
+            {debugOutput: GltfState.DebugOutput.diffuseTransmission.DIFFUSE_TRANSMISSION, shaderDefine: "DEBUG_DIFFUSE_TRANSMISSION"},
+            {debugOutput: GltfState.DebugOutput.diffuseTransmission.DIFFUSE_TRANSMISSION_FACTOR, shaderDefine: "DEBUG_DIFFUSE_TRANSMISSION_FACTOR"},
+            {debugOutput: GltfState.DebugOutput.diffuseTransmission.DIFFUSE_TRANSMISSION_COLOR_FACTOR, shaderDefine: "DEBUG_DIFFUSE_TRANSMISSION_COLOR_FACTOR"},
+
             {debugOutput: GltfState.DebugOutput.iridescence.IRIDESCENCE, shaderDefine: "DEBUG_IRIDESCENCE"},
             {debugOutput: GltfState.DebugOutput.iridescence.IRIDESCENCE_FACTOR, shaderDefine: "DEBUG_IRIDESCENCE_FACTOR"},
             {debugOutput: GltfState.DebugOutput.iridescence.IRIDESCENCE_THICKNESS, shaderDefine: "DEBUG_IRIDESCENCE_THICKNESS"},

source/Renderer/shaders/material_info.glsl

@@ -34,6 +34,10 @@ uniform float u_IridescenceIor;
 uniform float u_IridescenceThicknessMinimum;
 uniform float u_IridescenceThicknessMaximum;
 
+// Diffuse Transmission
+uniform float u_DiffuseTransmissionFactor;
+uniform vec3 u_DiffuseTransmissionColorFactor;
+
 // Emissive Strength
 uniform float u_EmissiveStrength;
 
@@ -97,6 +101,9 @@ struct MaterialInfo
     float iridescenceIor;
     float iridescenceThickness;
 
+    float diffuseTransmissionFactor;
+    vec3 diffuseTransmissionColorFactor;
+
     // KHR_materials_anisotropy
     vec3 anisotropicT;
     vec3 anisotropicB;
@@ -346,6 +353,25 @@ MaterialInfo getIridescenceInfo(MaterialInfo info)
 #endif
 
 
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+MaterialInfo getDiffuseTransmissionInfo(MaterialInfo info)
+{
+    info.diffuseTransmissionFactor = u_DiffuseTransmissionFactor;
+    info.diffuseTransmissionColorFactor = u_DiffuseTransmissionColorFactor;
+
+    #ifdef HAS_DIFFUSE_TRANSMISSION_MAP
+        info.diffuseTransmissionFactor *= texture(u_DiffuseTransmissionSampler, getDiffuseTransmissionUV()).a;
+    #endif
+
+    #ifdef HAS_DIFFUSE_TRANSMISSION_COLOR_MAP
+        info.diffuseTransmissionColorFactor *= texture(u_DiffuseTransmissionColorSampler, getDiffuseTransmissionColorUV()).rgb;
+    #endif
+
+    return info;
+}
+#endif
+
+
 #ifdef MATERIAL_CLEARCOAT
 MaterialInfo getClearCoatInfo(MaterialInfo info, NormalInfo normalInfo)
 {

source/Renderer/shaders/pbr.frag

@@ -100,6 +100,10 @@ void main()
     materialInfo = getIridescenceInfo(materialInfo);
 #endif
 
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+    materialInfo = getDiffuseTransmissionInfo(materialInfo);
+#endif
+
 #ifdef MATERIAL_ANISOTROPY
     materialInfo = getAnisotropyInfo(materialInfo, normalInfo);
 #endif
@@ -123,9 +127,11 @@ void main()
     vec3 f_emissive = vec3(0.0);
     vec3 f_clearcoat = vec3(0.0);
     vec3 f_sheen = vec3(0.0);
-    vec3 f_transmission = vec3(0.0);
+    vec3 f_specular_transmission = vec3(0.0);
+    vec3 f_diffuse_transmission = vec3(0.0);
 
     float albedoSheenScaling = 1.0;
+    float diffuseTransmissionThickness = 1.0;
 
 #ifdef MATERIAL_IRIDESCENCE
     vec3 iridescenceFresnel = evalIridescence(1.0, materialInfo.iridescenceIor, NdotV, materialInfo.iridescenceThickness, materialInfo.f0);
@@ -136,6 +142,13 @@ void main()
     }
 #endif
 
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+#ifdef MATERIAL_VOLUME
+    diffuseTransmissionThickness = materialInfo.thickness *
+        (length(vec3(u_ModelMatrix[0].xyz)) + length(vec3(u_ModelMatrix[1].xyz)) + length(vec3(u_ModelMatrix[2].xyz))) / 3.0;
+#endif
+#endif
+
     // Calculate lighting contribution from image based lighting source (IBL)
 #ifdef USE_IBL
 #ifdef MATERIAL_IRIDESCENCE
@@ -149,6 +162,14 @@ void main()
     f_diffuse += getIBLRadianceLambertian(n, v, materialInfo.perceptualRoughness, materialInfo.c_diff, materialInfo.f0, materialInfo.specularWeight);
 #endif
 
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+    vec3 diffuseTransmissionIBL = getIBLRadianceLambertian(-n, -v, materialInfo.perceptualRoughness, materialInfo.diffuseTransmissionColorFactor, materialInfo.f0, materialInfo.specularWeight);
+#ifdef MATERIAL_VOLUME
+        diffuseTransmissionIBL = applyVolumeAttenuation(diffuseTransmissionIBL, diffuseTransmissionThickness, materialInfo.attenuationColor, materialInfo.attenuationDistance);
+#endif
+    f_diffuse_transmission += diffuseTransmissionIBL;
+#endif
+
 #ifdef MATERIAL_CLEARCOAT
     f_clearcoat += getIBLRadianceGGX(materialInfo.clearcoatNormal, v, materialInfo.clearcoatRoughness, materialInfo.clearcoatF0, 1.0);
 #endif
@@ -160,7 +181,7 @@ void main()
 #endif
 
 #if defined(MATERIAL_TRANSMISSION) && defined(USE_IBL)
-    f_transmission += getIBLVolumeRefraction(
+    f_specular_transmission += getIBLVolumeRefraction(
         n, v,
         materialInfo.perceptualRoughness,
         materialInfo.c_diff, materialInfo.f0, materialInfo.f90,
@@ -234,6 +255,8 @@ void main()
 #endif
         }
 
+        vec3 lightIntensity = getLighIntensity(light, pointToLight);
+
         // BTDF (Bidirectional Transmittance Distribution Function)
 #ifdef MATERIAL_TRANSMISSION
         // If the light ray travels through the geometry, use the point it exits the geometry again.
@@ -242,17 +265,28 @@ void main()
         pointToLight -= transmissionRay;
         l = normalize(pointToLight);
 
-        vec3 intensity = getLighIntensity(light, pointToLight);
-        vec3 transmittedLight = intensity * getPunctualRadianceTransmission(n, v, l, materialInfo.alphaRoughness, materialInfo.f0, materialInfo.f90, materialInfo.c_diff, materialInfo.ior);
+        vec3 transmittedLight = lightIntensity * getPunctualRadianceTransmission(n, v, l, materialInfo.alphaRoughness, materialInfo.f0, materialInfo.f90, materialInfo.c_diff, materialInfo.ior);
 
 #ifdef MATERIAL_VOLUME
         transmittedLight = applyVolumeAttenuation(transmittedLight, length(transmissionRay), materialInfo.attenuationColor, materialInfo.attenuationDistance);
 #endif
 
-        f_transmission += transmittedLight;
+        f_specular_transmission += transmittedLight;
+#endif // MATERIAL_TRANSMISSION
+
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+        vec3 lambertian = BRDF_lambertian(materialInfo.f0, materialInfo.f90, materialInfo.diffuseTransmissionColorFactor, materialInfo.specularWeight, clampedDot(v, normalize(-l + v)));
+        vec3 transmittedDiffuseLight = lightIntensity * clampedDot(-n, l) * lambertian;
+
+#ifdef MATERIAL_VOLUME
+        transmittedDiffuseLight = applyVolumeAttenuation(transmittedDiffuseLight, diffuseTransmissionThickness, materialInfo.attenuationColor, materialInfo.attenuationDistance);
 #endif
+
+        f_diffuse_transmission += transmittedDiffuseLight;
+#endif // MATERIAL_DIFFUSE_TRANSMISSION
+
     }
-#endif
+#endif // USE_PUNCTUAL
 
     f_emissive = u_EmissiveFactor;
 #ifdef MATERIAL_EMISSIVE_STRENGTH
@@ -293,8 +327,11 @@ void main()
     clearcoat *= clearcoatFactor;
 #endif
 
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+    diffuse = mix(diffuse, f_diffuse_transmission, materialInfo.diffuseTransmissionFactor);
+#endif
 #ifdef MATERIAL_TRANSMISSION
-    diffuse = mix(diffuse, f_transmission, materialInfo.transmissionFactor);
+    diffuse = mix(diffuse, f_specular_transmission, materialInfo.transmissionFactor);
 #endif
 
     vec3 color = vec3(0);
@@ -436,7 +473,7 @@ vec3 specularTexture = vec3(1.0);
     // Transmission, Volume:
 #ifdef MATERIAL_TRANSMISSION
 #if DEBUG == DEBUG_TRANSMISSION_VOLUME
-    g_finalColor.rgb = linearTosRGB(f_transmission * materialInfo.transmissionFactor);
+    g_finalColor.rgb = linearTosRGB(f_specular_transmission * materialInfo.transmissionFactor);
 #endif
 #if DEBUG == DEBUG_TRANSMISSION_FACTOR
     g_finalColor.rgb = vec3(materialInfo.transmissionFactor);
@@ -478,5 +515,18 @@ vec3 specularTexture = vec3(1.0);
 
     g_finalColor.rgb = vec3(direction, 0.0);
 #endif
+#endif
+
+    // Diffuse Transmission:
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+#if DEBUG == DEBUG_DIFFUSE_TRANSMISSION
+    g_finalColor.rgb = linearTosRGB(f_diffuse_transmission * vec3(materialInfo.diffuseTransmissionFactor));
+#endif
+#if DEBUG == DEBUG_DIFFUSE_TRANSMISSION_FACTOR
+    g_finalColor.rgb = linearTosRGB(vec3(materialInfo.diffuseTransmissionFactor));
+#endif
+#if DEBUG == DEBUG_DIFFUSE_TRANSMISSION_COLOR_FACTOR
+    g_finalColor.rgb = linearTosRGB(materialInfo.diffuseTransmissionColorFactor);
+#endif
 #endif
 }

source/Renderer/shaders/textures.glsl

@@ -345,6 +345,39 @@ vec2 getIridescenceThicknessUV()
 #endif
 
 
+// Diffuse Transmission
+
+#ifdef MATERIAL_DIFFUSE_TRANSMISSION
+
+uniform sampler2D u_DiffuseTransmissionSampler;
+uniform int u_DiffuseTransmissionUVSet;
+uniform mat3 u_DiffuseTransmissionUVTransform;
+
+uniform sampler2D u_DiffuseTransmissionColorSampler;
+uniform int u_DiffuseTransmissionColorUVSet;
+uniform mat3 u_DiffuseTransmissionColorUVTransform;
+
+
+vec2 getDiffuseTransmissionUV()
+{
+    vec3 uv = vec3(u_DiffuseTransmissionUVSet < 1 ? v_texcoord_0 : v_texcoord_1, 1.0);
+#ifdef HAS_DIFFUSE_TRANSMISSION_UV_TRANSFORM
+    uv = u_DiffuseTransmissionUVTransform * uv;
+#endif
+    return uv.xy;
+}
+
+vec2 getDiffuseTransmissionColorUV()
+{
+    vec3 uv = vec3(u_DiffuseTransmissionColorUVSet < 1 ? v_texcoord_0 : v_texcoord_1, 1.0);
+#ifdef HAS_DIFFUSE_TRANSMISSION_COLOR_UV_TRANSFORM
+    uv = u_DiffuseTransmissionColorUVTransform * uv;
+#endif
+    return uv.xy;
+}
+
+#endif
+
 // Anisotropy
 
 #ifdef MATERIAL_ANISOTROPY