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