Skip to content

Commit

Permalink
Merge pull request #165 from ux3d/feature/UIvolumeIorSpecular
Browse files Browse the repository at this point in the history 
Feature/ui volume ior specular (GSVN-354)
  • Loading branch information
@UX3D-becher
UX3D-becher authored Mar 19, 2021
2 parents 7a305f2 + be755fa commit d68b916
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 45 deletions.
32 changes: 8 additions & 24 deletions API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,6 @@ GltfState containing a state for visualization in GltfView
* [.renderingParameters](#GltfState+renderingParameters)
* [.morphing](#GltfState+renderingParameters.morphing)
* [.skinning](#GltfState+renderingParameters.skinning)
* [.clearcoat](#GltfState+renderingParameters.clearcoat)
* [.sheen](#GltfState+renderingParameters.sheen)
* [.transmission](#GltfState+renderingParameters.transmission)
* [.clearColor](#GltfState+renderingParameters.clearColor)
* [.exposure](#GltfState+renderingParameters.exposure)
* [.usePunctual](#GltfState+renderingParameters.usePunctual)
Expand All @@ -126,6 +123,7 @@ GltfState containing a state for visualization in GltfView
* [.toneMap](#GltfState+renderingParameters.toneMap)
* [.debugOutput](#GltfState+renderingParameters.debugOutput)
* [.environmentRotation](#GltfState+renderingParameters.environmentRotation)
* [.useDirectionalLightsWithDisabledIBL](#GltfState+renderingParameters.useDirectionalLightsWithDisabledIBL)
* _static_
* [.ToneMaps](#GltfState.ToneMaps)
* [.NONE](#GltfState.ToneMaps.NONE)
Expand Down Expand Up @@ -222,9 +220,6 @@ parameters used to configure the rendering
* [.renderingParameters](#GltfState+renderingParameters)
* [.morphing](#GltfState+renderingParameters.morphing)
* [.skinning](#GltfState+renderingParameters.skinning)
* [.clearcoat](#GltfState+renderingParameters.clearcoat)
* [.sheen](#GltfState+renderingParameters.sheen)
* [.transmission](#GltfState+renderingParameters.transmission)
* [.clearColor](#GltfState+renderingParameters.clearColor)
* [.exposure](#GltfState+renderingParameters.exposure)
* [.usePunctual](#GltfState+renderingParameters.usePunctual)
Expand All @@ -234,6 +229,7 @@ parameters used to configure the rendering
* [.toneMap](#GltfState+renderingParameters.toneMap)
* [.debugOutput](#GltfState+renderingParameters.debugOutput)
* [.environmentRotation](#GltfState+renderingParameters.environmentRotation)
* [.useDirectionalLightsWithDisabledIBL](#GltfState+renderingParameters.useDirectionalLightsWithDisabledIBL)

<a name="GltfState+renderingParameters.morphing"></a>

Expand All @@ -246,24 +242,6 @@ morphing between vertices
#### renderingParameters.skinning
skin / skeleton

**Kind**: static property of [<code>renderingParameters</code>](#GltfState+renderingParameters)
<a name="GltfState+renderingParameters.clearcoat"></a>

#### renderingParameters.clearcoat
KHR_materials_clearcoat

**Kind**: static property of [<code>renderingParameters</code>](#GltfState+renderingParameters)
<a name="GltfState+renderingParameters.sheen"></a>

#### renderingParameters.sheen
KHR_materials_sheen

**Kind**: static property of [<code>renderingParameters</code>](#GltfState+renderingParameters)
<a name="GltfState+renderingParameters.transmission"></a>

#### renderingParameters.transmission
KHR_materials_transmission

**Kind**: static property of [<code>renderingParameters</code>](#GltfState+renderingParameters)
<a name="GltfState+renderingParameters.clearColor"></a>

Expand Down Expand Up @@ -323,6 +301,12 @@ Front faces:
-X = 180
-Z = 270

**Kind**: static property of [<code>renderingParameters</code>](#GltfState+renderingParameters)
<a name="GltfState+renderingParameters.useDirectionalLightsWithDisabledIBL"></a>

#### renderingParameters.useDirectionalLightsWithDisabledIBL
If this is set to true, directional lights will be generated if IBL is disabled

**Kind**: static property of [<code>renderingParameters</code>](#GltfState+renderingParameters)
<a name="GltfState.ToneMaps"></a>

Expand Down
9 changes: 6 additions & 3 deletions app_web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,9 +318,12 @@ <h2 class="title is-spaced">Advanced Controls</h2>
<button v-stream:click="cameraExport$" type="button" class="button is-rounded"><i class="fa fa-download downloadIcon"></i>Download as .gltf</button>
</b-field>
<b-field label="Disable extensions" class="subtitle">
<b-switch class="smallerLabel" v-model="clearcoatEnabled" v-stream:input="clearcoatChanged$">Clearcoat</b-switch>
<b-switch class="smallerLabel" v-model="sheenEnabled" v-stream:input="sheenChanged$">Sheen</b-switch>
<b-switch class="smallerLabel" v-model="transmissionEnabled" v-stream:input="transmissionChanged$">Transmission</b-switch>
<b-switch class="smallerLabel" v-model="clearcoatEnabled" v-stream:input="clearcoatChanged$">KHR_materials_clearcoat</b-switch>
<b-switch class="smallerLabel" v-model="sheenEnabled" v-stream:input="sheenChanged$">KHR_materials_sheen</b-switch>
<b-switch class="smallerLabel" v-model="transmissionEnabled" v-stream:input="transmissionChanged$" @input="transmissionTriggered">KHR_materials_transmission</b-switch>
<b-switch class="smallerLabel" v-bind:disabled="transmissionEnabled === false ? true : false" v-model="volumeEnabled">KHR_materials_volume</b-switch>
<b-switch class="smallerLabel" v-model="iorEnabled">KHR_materials_ior</b-switch>
<b-switch class="smallerLabel" v-model="specularEnabled">KHR_materials_specular</b-switch>
</b-field>
<b-field label="Statistics" class="subtitle">
<json-to-ui-template v-bind:data="statistics" v-bind:isinner="false"></json-to-ui-template>
Expand Down
6 changes: 6 additions & 0 deletions app_web/src/logic/uimodel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,12 @@ class UIModel
this.clearcoatEnabled = app.clearcoatChanged$.pipe(pluck("event", "msg"));
this.sheenEnabled = app.sheenChanged$.pipe(pluck("event", "msg"));
this.transmissionEnabled = app.transmissionChanged$.pipe(pluck("event", "msg"));
this.volumeEnabled = app.$watchAsObservable('volumeEnabled').pipe(
map( ({ newValue, oldValue }) => newValue));
this.iorEnabled = app.$watchAsObservable('iorEnabled').pipe(
map( ({ newValue, oldValue }) => newValue));
this.specularEnabled = app.$watchAsObservable('specularEnabled').pipe(
map( ({ newValue, oldValue }) => newValue));
this.iblEnabled = app.iblChanged$.pipe(pluck("event", "msg"));
this.punctualLightsEnabled = app.punctualLightsChanged$.pipe(pluck("event", "msg"));
this.renderEnvEnabled = app.$watchAsObservable('renderEnv').pipe(
Expand Down
15 changes: 12 additions & 3 deletions app_web/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,13 +174,22 @@ async function main()
});

uiModel.clearcoatEnabled.subscribe( clearcoatEnabled => {
state.renderingParameters.clearcoat = clearcoatEnabled;
state.renderingParameters.enabledExtensions.KHR_materials_clearcoat = clearcoatEnabled;
});
uiModel.sheenEnabled.subscribe( sheenEnabled => {
state.renderingParameters.sheen = sheenEnabled;
state.renderingParameters.enabledExtensions.KHR_materials_sheen = sheenEnabled;
});
uiModel.transmissionEnabled.subscribe( transmissionEnabled => {
state.renderingParameters.transmission = transmissionEnabled;
state.renderingParameters.enabledExtensions.KHR_materials_transmission = transmissionEnabled;
});
uiModel.volumeEnabled.subscribe( volumeEnabled => {
state.renderingParameters.enabledExtensions.KHR_materials_volume = volumeEnabled;
});
uiModel.iorEnabled.subscribe( iorEnabled => {
state.renderingParameters.enabledExtensions.KHR_materials_ior = iorEnabled;
});
uiModel.specularEnabled.subscribe( specularEnabled => {
state.renderingParameters.enabledExtensions.KHR_materials_specular = specularEnabled;
});

uiModel.iblEnabled.subscribe( iblEnabled => {
Expand Down
18 changes: 17 additions & 1 deletion app_web/src/ui/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,18 @@ const app = new Vue({
clearcoatEnabled: true,
sheenEnabled: true,
transmissionEnabled: true,
volumeEnabled: true,
iorEnabled: true,
specularEnabled: true,

activeTab: 0,
loadingComponent: {},
showDropDownOverlay: false,
uploadedHDR: undefined,
// this is a helper to reset the ui when image based lighting is reenabled

// these are handls for certain ui change related things
environmentVisiblePrefState: true,
volumeEnabledPrefState: true,
};
},
mounted: function()
Expand All @@ -118,6 +123,17 @@ const app = new Vue({
this.renderEnv = this.environmentVisiblePrefState;
}
},
transmissionTriggered: function(value)
{
if(this.transmissionEnabled == false)
{
this.volumeEnabledPrefState = this.volumeEnabled;
this.volumeEnabled = false;
}
else{
this.volumeEnabled = this.volumeEnabledPrefState;
}
},
warn(message) {
this.$buefy.toast.open({
message: message,
Expand Down
19 changes: 11 additions & 8 deletions source/GltfState/gltf_state.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,18 @@ class GltfState
morphing: true,
/** skin / skeleton */
skinning: true,
/** KHR_materials_clearcoat */
clearcoat: true,
/** KHR_materials_sheen */
sheen: true,
/** KHR_materials_transmission */
transmission: true,
/** KHR_materials_ior makes the index of refraction configurable */
ior: true,

enabledExtensions: {
/** KHR_materials_clearcoat */
KHR_materials_clearcoat: true,
/** KHR_materials_sheen */
KHR_materials_sheen: true,
/** KHR_materials_transmission */
KHR_materials_transmission: true,
/** KHR_materials_volume */
KHR_materials_volume: true,
/** KHR_materials_ior makes the index of refraction configurable */
KHR_materials_ior: true,
/** KHR_materials_specular allows configuring specular color (f0 color) and amount of specular reflection */
KHR_materials_specular: true,
},
Expand Down
2 changes: 1 addition & 1 deletion source/Renderer/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,7 @@ class gltfRenderer
}

if(transmissionSampleTexture !== undefined && (state.renderingParameters.useIBL || state.renderingParameters.usePunctual)
&& state.environment && state.renderingParameters.transmission)
&& state.environment && state.renderingParameters.enabledExtensions.KHR_materials_transmission)
{
this.webGl.context.activeTexture(GL.TEXTURE0 + textureCount);
this.webGl.context.bindTexture(this.webGl.context.TEXTURE_2D, this.opaqueRenderTexture);
Expand Down
10 changes: 5 additions & 5 deletions source/gltf/material.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,23 +63,23 @@ class gltfMaterial extends GltfObject
{
const defines = Array.from(this.defines);

if (this.hasClearcoat && renderingParameters.clearcoat)
if (this.hasClearcoat && renderingParameters.enabledExtensions.KHR_materials_clearcoat)
{
defines.push("MATERIAL_CLEARCOAT 1");
}
if (this.hasSheen && renderingParameters.sheen)
if (this.hasSheen && renderingParameters.enabledExtensions.KHR_materials_sheen)
{
defines.push("MATERIAL_SHEEN 1");
}
if (this.hasTransmission && renderingParameters.transmission)
if (this.hasTransmission && renderingParameters.enabledExtensions.KHR_materials_transmission)
{
defines.push("MATERIAL_TRANSMISSION 1");
}
if (this.hasVolume && renderingParameters.transmission)
if (this.hasVolume && renderingParameters.enabledExtensions.KHR_materials_volume)
{
defines.push("MATERIAL_VOLUME 1");
}
if(this.hasIOR && renderingParameters.ior)
if(this.hasIOR && renderingParameters.enabledExtensions.KHR_materials_ior)
{
defines.push("MATERIAL_IOR 1");
}
Expand Down

0 comments on commit d68b916

Please sign in to comment.