Merge pull request #532 from KhronosGroup/KHR_materials_dispersion

KHR_materials_dispersion

API.md

@@ -755,6 +755,8 @@ output the anisotropy strength
 output the final anisotropic direction as defined by the anisotropicTexture and anisotropic rotation
 
 **Kind**: static property of [<code>anisotropy</code>](#GltfState.DebugOutput.anisotropy)  
+
+
 <a name="ResourceLoader"></a>
 
 ## ResourceLoader

README.md

@@ -53,6 +53,7 @@ Features
 - [x] [KHR_materials_volume](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_volume)
 - [x] [KHR_materials_iridescence](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_iridescence)
 - [x] [KHR_materials_anisotropy](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_anisotropy)
+- [x] [KHR_materials_dispersion](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion)
 - [x] [KHR_mesh_quantization](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_mesh_quantization)
 - [x] [KHR_texture_basisu](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_basisu)
 - [x] [KHR_texture_transform](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform)

app_web/index.html

@@ -400,6 +400,7 @@ <h2 class="title is-spaced">Advanced Controls</h2>
                                 <b-switch class="smallerLabel" v-model="emissiveStrengthEnabled">KHR_materials_emissive_strength</b-switch>
                                 <b-switch class="smallerLabel" v-model="iridescenceEnabled">KHR_materials_iridescence</b-switch>
                                 <b-switch class="smallerLabel" v-model="anisotropyEnabled">KHR_materials_anisotropy</b-switch>
+                                <b-switch class="smallerLabel" v-model="dispersionEnabled">KHR_materials_dispersion</b-switch>
                             </b-field>
                             <b-field label="Statistics" class="subtitle">
                                 <json-to-ui-template v-bind:data="statistics" v-bind:isinner="false">

app_web/src/logic/uimodel.js

@@ -52,6 +52,7 @@ class UIModel
         this.iorEnabled = app.$watchAsObservable('iorEnabled').pipe(pluck('newValue'));
         this.iridescenceEnabled = app.$watchAsObservable('iridescenceEnabled').pipe(pluck('newValue'));
         this.anisotropyEnabled = app.$watchAsObservable('anisotropyEnabled').pipe(pluck('newValue'));
+        this.dispersionEnabled = app.$watchAsObservable('dispersionEnabled').pipe(pluck('newValue'));
         this.specularEnabled = app.$watchAsObservable('specularEnabled').pipe(pluck('newValue'));
         this.emissiveStrengthEnabled = app.$watchAsObservable('emissiveStrengthEnabled').pipe(pluck('newValue'));
         this.iblEnabled = app.iblChanged$.pipe(pluck("event", "msg"));

app_web/src/main.js

@@ -172,13 +172,16 @@ export default async () => {
     listenForRedraw(uiModel.iorEnabled);
 
     uiModel.iridescenceEnabled.subscribe(iridescenceEnabled => state.renderingParameters.enabledExtensions.KHR_materials_iridescence = iridescenceEnabled);
-    listenForRedraw(uiModel.specularEnabled);
+    listenForRedraw(uiModel.iridescenceEnabled);
 
     uiModel.anisotropyEnabled.subscribe(anisotropyEnabled => state.renderingParameters.enabledExtensions.KHR_materials_anisotropy = anisotropyEnabled);
-    listenForRedraw(uiModel.iridescenceEnabled);
+    listenForRedraw(uiModel.anisotropyEnabled);
+
+    uiModel.dispersionEnabled.subscribe(dispersionEnabled => state.renderingParameters.enabledExtensions.KHR_materials_dispersion = dispersionEnabled);
+    listenForRedraw(uiModel.dispersionEnabled);
 
     uiModel.specularEnabled.subscribe(specularEnabled => state.renderingParameters.enabledExtensions.KHR_materials_specular = specularEnabled);
-    listenForRedraw(uiModel.anisotropyEnabled);
+    listenForRedraw(uiModel.specularEnabled);
 
     uiModel.emissiveStrengthEnabled.subscribe(enabled => state.renderingParameters.enabledExtensions.KHR_materials_emissive_strength = enabled);
     listenForRedraw(uiModel.emissiveStrengthEnabled);

app_web/src/ui/ui.js

@@ -96,6 +96,7 @@ export const app = new Vue({
             iorEnabled: true,
             iridescenceEnabled: true,
             anisotropyEnabled: true,
+            dispersionEnabled: true,
             specularEnabled: true,
             emissiveStrengthEnabled: true,
 

source/GltfState/gltf_state.js

@@ -57,6 +57,8 @@ class GltfState
                 KHR_materials_iridescence: 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)*/
+                KHR_materials_dispersion: true,
                 KHR_materials_emissive_strength: true,
             },
             /** clear color expressed as list of ints in the range [0, 255] */

source/Renderer/shaders/ibl.glsl

@@ -69,16 +69,42 @@ vec3 getTransmissionSample(vec2 fragCoord, float roughness, float ior)
 {
     float framebufferLod = log2(float(u_TransmissionFramebufferSize.x)) * applyIorToRoughness(roughness, ior);
     vec3 transmittedLight = textureLod(u_TransmissionFramebufferSampler, fragCoord.xy, framebufferLod).rgb;
+
     return transmittedLight;
 }
 #endif
 
 
 #ifdef MATERIAL_TRANSMISSION
 vec3 getIBLVolumeRefraction(vec3 n, vec3 v, float perceptualRoughness, vec3 baseColor, vec3 f0, vec3 f90,
-    vec3 position, mat4 modelMatrix, mat4 viewMatrix, mat4 projMatrix, float ior, float thickness, vec3 attenuationColor, float attenuationDistance)
+    vec3 position, mat4 modelMatrix, mat4 viewMatrix, mat4 projMatrix, float ior, float thickness, vec3 attenuationColor, float attenuationDistance, float dispersion)
 {
+#ifdef MATERIAL_DISPERSION
+    // Dispersion will spread out the ior values for each r,g,b channel
+    float halfSpread = (ior - 1.0) * 0.025 * dispersion;
+    vec3 iors = vec3(ior - halfSpread, ior, ior + halfSpread);
+
+    vec3 transmittedLight;
+    float transmissionRayLength;
+    for (int i = 0; i < 3; i++)
+    {
+        vec3 transmissionRay = getVolumeTransmissionRay(n, v, thickness, iors[i], modelMatrix);
+        // TODO: taking length of blue ray, ideally we would take the length of the green ray. For now overwriting seems ok
+        transmissionRayLength = length(transmissionRay);
+        vec3 refractedRayExit = position + transmissionRay;
+
+        // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.
+        vec4 ndcPos = projMatrix * viewMatrix * vec4(refractedRayExit, 1.0);
+        vec2 refractionCoords = ndcPos.xy / ndcPos.w;
+        refractionCoords += 1.0;
+        refractionCoords /= 2.0;
+
+        // Sample framebuffer to get pixel the refracted ray hits for this color channel.
+        transmittedLight[i] = getTransmissionSample(refractionCoords, perceptualRoughness, iors[i])[i];
+    }
+#else
     vec3 transmissionRay = getVolumeTransmissionRay(n, v, thickness, ior, modelMatrix);
+    float transmissionRayLength = length(transmissionRay);
     vec3 refractedRayExit = position + transmissionRay;
 
     // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.
@@ -90,7 +116,8 @@ vec3 getIBLVolumeRefraction(vec3 n, vec3 v, float perceptualRoughness, vec3 base
     // Sample framebuffer to get pixel the refracted ray hits.
     vec3 transmittedLight = getTransmissionSample(refractionCoords, perceptualRoughness, ior);
 
-    vec3 attenuatedColor = applyVolumeAttenuation(transmittedLight, length(transmissionRay), attenuationColor, attenuationDistance);
+#endif // MATERIAL_DISPERSION
+    vec3 attenuatedColor = applyVolumeAttenuation(transmittedLight, transmissionRayLength, attenuationColor, attenuationDistance);
 
     // Sample GGX LUT to get the specular component.
     float NdotV = clampedDot(n, v);

source/Renderer/shaders/material_info.glsl

@@ -43,6 +43,9 @@ uniform float u_Ior;
 // Anisotropy
 uniform vec3 u_Anisotropy;
 
+// Dispersion
+uniform float u_Dispersion;
+
 // Alpha mode
 uniform float u_AlphaCutoff;
 
@@ -98,6 +101,9 @@ struct MaterialInfo
     vec3 anisotropicT;
     vec3 anisotropicB;
     float anisotropyStrength;
+
+    // KHR_materials_dispersion
+    float dispersion;
 };
 
 
@@ -292,11 +298,16 @@ MaterialInfo getTransmissionInfo(MaterialInfo info)
     vec4 transmissionSample = texture(u_TransmissionSampler, getTransmissionUV());
     info.transmissionFactor *= transmissionSample.r;
 #endif
+
+#ifdef MATERIAL_DISPERSION
+    info.dispersion = u_Dispersion;
+#else
+    info.dispersion = 0.0;
+#endif
     return info;
 }
 #endif
 
-
 #ifdef MATERIAL_VOLUME
 MaterialInfo getVolumeInfo(MaterialInfo info)
 {

source/Renderer/shaders/pbr.frag

@@ -164,7 +164,7 @@ void main()
         materialInfo.perceptualRoughness,
         materialInfo.c_diff, materialInfo.f0, materialInfo.f90,
         v_Position, u_ModelMatrix, u_ViewMatrix, u_ProjectionMatrix,
-        materialInfo.ior, materialInfo.thickness, materialInfo.attenuationColor, materialInfo.attenuationDistance);
+        materialInfo.ior, materialInfo.thickness, materialInfo.attenuationColor, materialInfo.attenuationDistance, materialInfo.dispersion);
 #endif
 
     vec3 f_diffuse_ibl = f_diffuse;

source/gltf/gltf.js

@@ -33,6 +33,7 @@ const allowedExtensions = [
     "KHR_materials_ior",
     "KHR_materials_iridescence",
     "KHR_materials_anisotropy",
+    "KHR_materials_dispersion",
     "KHR_materials_specular",
     "KHR_materials_emissive_strength",
     "KHR_materials_xmp_json_ld",

source/gltf/material.js

@@ -27,6 +27,7 @@ class gltfMaterial extends GltfObject
         this.hasVolume = false;
         this.hasIridescence = false;
         this.hasAnisotropy = false;
+        this.hasDispersion = false;
 
         // non gltf properties
         this.type = "unlit";
@@ -102,6 +103,10 @@ class gltfMaterial extends GltfObject
         {
             defines.push("MATERIAL_ANISOTROPY 1");
         }
+        if(this.hasDispersion && renderingParameters.enabledExtensions.KHR_materials_dispersion)
+        {
+            defines.push("MATERIAL_DISPERSION 1");
+        }
 
         return defines;
     }
@@ -572,7 +577,7 @@ class gltfMaterial extends GltfObject
             }
 
             // KHR Extension: Anisotropy
-            // See https://github.com/KhronosGroup/glTF/tree/KHR_materials_anisotropy/extensions/2.0/Khronos/KHR_materials_anisotropy
+            // See https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_anisotropy
             if(this.extensions.KHR_materials_anisotropy !== undefined)
             {
                 this.hasAnisotropy = true;
@@ -601,6 +606,22 @@ class gltfMaterial extends GltfObject
                 let anisotropy =  vec3.fromValues(Math.cos(rotation), Math.sin(rotation), factor);
                 this.properties.set("u_Anisotropy", anisotropy);
             }
+
+            // KHR Extension: Dispersion
+            // See https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion
+            if (this.extensions.KHR_materials_dispersion !== undefined)
+            {
+                let dispersion = 0.0;
+
+                this.hasDispersion = true;
+
+                if(this.extensions.KHR_materials_dispersion.dispersion !== undefined)
+                {
+                    dispersion = this.extensions.KHR_materials_dispersion.dispersion;
+                }
+
+                this.properties.set("u_Dispersion", dispersion);
+            }
         }
 
         initGlForMembers(this, gltf, webGlContext);