diff --git a/app_web/index.html b/app_web/index.html
index 4714fe13..33291aab 100644
--- a/app_web/index.html
+++ b/app_web/index.html
@@ -211,6 +211,15 @@
Display
Punctual
Lighting
+
+
+ 0.01
+ 1
+ 100
+ 10000
+
+
Environment
Map
@@ -350,15 +359,14 @@ Advanced Controls
-
- -3
- -2
- -1
- 0
- +1
- +2
- +3
+
+
+ 64
+ 1
+ 0.001
+ 0
+
diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js
index cd3d6244..9c40bb33 100644
--- a/app_web/src/logic/uimodel.js
+++ b/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));
diff --git a/app_web/src/main.js b/app_web/src/main.js
index 1f19a9ab..253fbb76 100644
--- a/app_web/src/main.js
+++ b/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;
});
diff --git a/app_web/src/ui/sass.scss b/app_web/src/ui/sass.scss
index 411416c8..651918be 100644
--- a/app_web/src/ui/sass.scss
+++ b/app_web/src/ui/sass.scss
@@ -260,7 +260,10 @@ 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
@@ -268,6 +271,14 @@ div .field.has-addons
margin-top: 8px;
}
+.b-slider.iblIntensitySlider
+{
+ margin-left: 10px;
+ margin-right: 10px;
+ margin-bottom: 50px;
+ width: auto;
+}
+
/* buttons */
.downloadIcon
{
diff --git a/app_web/src/ui/ui.js b/app_web/src/ui/ui.js
index a8a98348..8aea0e31 100644
--- a/app_web/src/ui/ui.js
+++ b/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,
diff --git a/source/GltfState/gltf_state.js b/source/GltfState/gltf_state.js
index e674dc39..7f8c3c39 100644
--- a/source/GltfState/gltf_state.js
+++ b/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 */
diff --git a/source/Renderer/environment_renderer.js b/source/Renderer/environment_renderer.js
index 5335ef01..d4d30d77 100644
--- a/source/Renderer/environment_renderer.js
+++ b/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);
diff --git a/source/Renderer/renderer.js b/source/Renderer/renderer.js
index 61f2e886..416e0d9c 100644
--- a/source/Renderer/renderer.js
+++ b/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;
}
diff --git a/source/Renderer/shaders/ibl.glsl b/source/Renderer/shaders/ibl.glsl
index 23cebf32..d55f569f 100644
--- a/source/Renderer/shaders/ibl.glsl
+++ b/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;
}