Fix exposure scale and add ibl intensity multiplier

app_web/index.html

@@ -211,6 +211,15 @@ <h2 class="title  is-spaced">Display</h2>
                                 <b-switch v-model="punctualLights" v-stream:input="punctualLightsChanged$">Punctual
                                     Lighting</b-switch>
                             </b-field>
+                            <b-field label="IBL Intensity" class="smallerLabel">
+                                <b-slider rounded v-model="iblIntensity" :min="-2" v-bind:max="5" :step=0.01 :custom-formatter="val => Math.round(Math.pow(10,val)*100.0)/100.0"
+                                    class="iblIntensitySlider" v-stream:input="iblIntensityChanged$">
+                                    <b-slider-tick :value="-2" class="iblIntensitySliderMarker">0.01</b-slider-tick>
+                                    <b-slider-tick :value="0" class="iblIntensitySliderMarker">1</b-slider-tick>
+                                    <b-slider-tick :value="2" class="iblIntensitySliderMarker">100</b-slider-tick>                               
+                                    <b-slider-tick :value="4" class="iblIntensitySliderMarker">10000</b-slider-tick>
+                                </b-slider>
+                            </b-field>
                             <b-field label="Background" class="subtitle">
                                 <b-switch v-model="renderEnv" v-bind:disabled="ibl === false ? true : false">Environment
                                     Map</b-switch>
@@ -350,15 +359,14 @@ <h2 class="title is-spaced">Advanced Controls</h2>
                                 </b-select>
                             </b-field>
                             <label class="smallerLabel">Exposure</label>
-                            <b-slider v-model="exposureSetting" :min="-3" v-bind:max="3" :step=0.3333333
-                                class="exposureSlider" ticks v-stream:input="exposureChanged$">
-                                <b-slider-tick :value="-3" class="exposureSliderMarker">-3</b-slider-tick>
-                                <b-slider-tick :value="-2" class="exposureSliderMarker">-2</b-slider-tick>
-                                <b-slider-tick :value="-1" class="exposureSliderMarker">-1</b-slider-tick>
-                                <b-slider-tick :value="0" class="exposureSliderMarker">0</b-slider-tick>
-                                <b-slider-tick :value="1" class="exposureSliderMarker">+1</b-slider-tick>
-                                <b-slider-tick :value="2" class="exposureSliderMarker">+2</b-slider-tick>
-                                <b-slider-tick :value="3" class="exposureSliderMarker">+3</b-slider-tick>
+
+                            <b-slider rounded v-model="exposureSetting" :min="21" v-bind:max="-6" :step=0.1 
+                            :custom-formatter="val => Math.round((1.0 / Math.pow(2.0, val))*100000)/100000" class="exposureSlider" ticks v-stream:input="exposureChanged$">
+                                <b-slider-tick :value="-6" class="exposureSliderMarker">64</b-slider-tick>
+                                <b-slider-tick :value="0" class="exposureSliderMarker">1</b-slider-tick>
+                                <b-slider-tick :value="9.966" class="exposureSliderMarker">0.001</b-slider-tick>
+                                <b-slider-tick :value="21" class="exposureSliderMarker">0</b-slider-tick>
+
                             </b-slider>
                             <b-field label="Tone Map" class="smallerLabel">
                                 <b-select v-stream:input="tonemapChanged$" v-model="toneMap">

app_web/src/logic/uimodel.js

@@ -83,7 +83,7 @@ class UIModel
             startWith(GltfState.DebugOutput.NONE)
         );
 
-        this.exposurecompensation = app.exposureChanged$.pipe(pluck("event", "msg"));
+        this.exposure = app.exposureChanged$.pipe(pluck("event", "msg"));
         this.skinningEnabled = app.skinningChanged$.pipe(pluck("event", "msg"));
         this.morphingEnabled = app.morphingChanged$.pipe(pluck("event", "msg"));
         this.clearcoatEnabled = app.clearcoatChanged$.pipe(pluck("event", "msg"));
@@ -100,6 +100,7 @@ class UIModel
         this.emissiveStrengthEnabled = app.$watchAsObservable('emissiveStrengthEnabled').pipe(
                                             map( ({ newValue, oldValue }) => newValue));
         this.iblEnabled = app.iblChanged$.pipe(pluck("event", "msg"));
+        this.iblIntensity = app.iblIntensityChanged$.pipe(pluck("event", "msg"));
         this.punctualLightsEnabled = app.punctualLightsChanged$.pipe(pluck("event", "msg"));
         this.renderEnvEnabled = app.$watchAsObservable('renderEnv').pipe(
                                             map( ({ newValue, oldValue }) => newValue));

app_web/src/main.js

@@ -187,10 +187,10 @@ async function main()
     });
     listenForRedraw(uiModel.skinningEnabled);
 
-    uiModel.exposurecompensation.subscribe( exposurecompensation => {
-        state.renderingParameters.exposure = Math.pow(2, exposurecompensation);
+    uiModel.exposure.subscribe( exposure => {
+        state.renderingParameters.exposure = (1.0 / Math.pow(2.0, exposure));
     });
-    listenForRedraw(uiModel.exposurecompensation);
+    listenForRedraw(uiModel.exposure);
 
     uiModel.morphingEnabled.subscribe( morphingEnabled => {
         state.renderingParameters.morphing = morphingEnabled;
@@ -235,6 +235,11 @@ async function main()
     });
     listenForRedraw(uiModel.iblEnabled);
 
+    uiModel.iblIntensity.subscribe( iblIntensity => {
+        state.renderingParameters.iblIntensity = Math.pow(10, iblIntensity);
+    });
+    listenForRedraw(uiModel.iblIntensity);
+
     uiModel.renderEnvEnabled.subscribe( renderEnvEnabled => {
         state.renderingParameters.renderEnvironmentMap = renderEnvEnabled;
     });

app_web/src/ui/sass.scss

@@ -260,14 +260,25 @@ div .field.has-addons
 /* make html recognize exposure slider full height  */
 .b-slider.exposureSlider
 {
+    margin-left: 10px;
+    margin-right: 10px;
     margin-bottom: 50px;
+    width: auto;
 }
 
 .b-slider-tick-label
 {
     margin-top: 8px;
 }
 
+.b-slider.iblIntensitySlider
+{    
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 50px;
+    width: auto;
+}
+
 /* buttons */
 .downloadIcon
 {

app_web/src/ui/ui.js

@@ -46,7 +46,7 @@ const app = new Vue({
         'punctualLightsChanged$', 'iblChanged$', 'blurEnvChanged$', 'morphingChanged$',
         'addEnvironment$', 'colorChanged$', 'environmentRotationChanged$', 'animationPlayChanged$', 'selectedAnimationsChanged$',
         'variantChanged$', 'exposureChanged$', "clearcoatChanged$", "sheenChanged$", "transmissionChanged$",
-        'cameraExport$', 'captureCanvas$'],
+        'cameraExport$', 'captureCanvas$','iblIntensityChanged$',],
     data() {
         return {
             fullheight: true,
@@ -72,6 +72,7 @@ const app = new Vue({
             disabledAnimations: [],
 
             ibl: true,
+            iblIntensity: 0.0,
             punctualLights: true,
             renderEnv: true,
             blurEnv: true,

source/GltfState/gltf_state.js

@@ -65,6 +65,8 @@ class GltfState
             usePunctual: true,
             /** image based lighting */
             useIBL: true,
+            /** image based lighting intensity */
+            iblIntensity: 1.0,
             /** render the environment map in the background */
             renderEnvironmentMap: true,
             /** apply blur to the background environment map */

source/Renderer/environment_renderer.js

@@ -55,7 +55,7 @@ class EnvironmentRenderer
         webGl.setTexture(shader.getUniformLocation("u_GGXEnvSampler"), state.environment, state.environment.specularEnvMap, 0);
         shader.updateUniform("u_MipCount", state.environment.mipCount);
         shader.updateUniform("u_EnvBlurNormalized", state.renderingParameters.blurEnvironmentMap ? 0.6 : 0.0);
-        shader.updateUniform("u_EnvIntensity", 1.0);
+        shader.updateUniform("u_EnvIntensity", state.renderingParameters.iblIntensity);
 
         shader.updateUniform("u_ViewProjectionMatrix", viewProjectionMatrix);
         shader.updateUniform("u_Exposure", state.renderingParameters.exposure, false);

source/Renderer/renderer.js

@@ -763,6 +763,8 @@ class gltfRenderer
         mat3.fromMat4(rotMatrix3, rotMatrix4);
         this.shader.updateUniform("u_EnvRotation", rotMatrix3);
 
+        this.shader.updateUniform("u_EnvIntensity", state.renderingParameters.iblIntensity);
+
         return texSlotOffset;
     }
 

source/Renderer/shaders/ibl.glsl

@@ -1,18 +1,20 @@
+uniform float u_EnvIntensity;
+
 vec3 getDiffuseLight(vec3 n)
 {
-    return texture(u_LambertianEnvSampler, u_EnvRotation * n).rgb;
+    return texture(u_LambertianEnvSampler, u_EnvRotation * n).rgb * u_EnvIntensity;
 }
 
 
 vec4 getSpecularSample(vec3 reflection, float lod)
 {
-    return textureLod(u_GGXEnvSampler, u_EnvRotation * reflection, lod);
+    return textureLod(u_GGXEnvSampler, u_EnvRotation * reflection, lod) * u_EnvIntensity;
 }
 
 
 vec4 getSheenSample(vec3 reflection, float lod)
 {
-    return textureLod(u_CharlieEnvSampler, u_EnvRotation * reflection, lod);
+    return textureLod(u_CharlieEnvSampler, u_EnvRotation * reflection, lod) * u_EnvIntensity;
 }