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; }