Merge pull request #54 from ux3d/feature/cleanUI

removed unused UI components; added exposure, skinning/ morphing enabled support; (GSVN-142)
KhronosGroup · Jan 13, 2021 · efea3d3 · efea3d3
2 parents 315f7ef + 2f71b78
commit efea3d3
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 54 deletions.
diff --git a/example/index.html b/example/index.html
@@ -129,7 +129,7 @@
         <h2>Models</h2>
 
         <drop-down-element v-on:selectionchanged="modelchanged" name="Model" v-bind:dropdowncontent="models" ref="models"></drop-down-element>
-        <drop-down-element v-on:selectionchanged="flavourchanged" name="Flavors" v-bind:dropdowncontent="flavors"></drop-down-element>
+        <!--<drop-down-element v-on:selectionchanged="flavourchanged" name="Flavors" v-bind:dropdowncontent="flavors"></drop-down-element>-->
         <drop-down-element v-on:selectionchanged="scenechanged" name="Scene Index" v-bind:dropdowncontent="scenes" ref="scenes"></drop-down-element>
         <drop-down-element v-on:selectionchanged="camerachanged" name="Camera Index" v-bind:dropdowncontent="cameras"></drop-down-element>
         <label class="label">Variants</label>
@@ -148,21 +148,22 @@ <h2>Display</h2>
         </section>
         <section>
             <label class="label">Background</label>
-            <b-switch v-model="environmentvisibility" v-on:input="environmentvisibilitychanged">Environment Background</b-switch>
+            <!--<b-switch v-model="environmentvisibility" v-on:input="environmentvisibilitychanged">Environment Background</b-switch>-->
             <color-picker-element class="smallerLabel" v-on:colorchanged="colorchanged" name="Background Color" ref="colorpicker"></color-picker-element>
-            <drop-down-element v-on:selectionchanged="environmentrotationchanged" v-bind:dropdowncontent="environmentRotations" class="smallerLabel" name="Select Environment Rotation" ></drop-down-element>
+            <drop-down-element v-on:selectionchanged="environmentrotationchanged" v-bind:dropdowncontent="environmentRotations"
+                class="smallerLabel" name="Select Environment Rotation" ></drop-down-element>
         </section>
-        <label class="label">Image Based Lighting</label>
+        <!--<label class="label">Image Based Lighting</label>
         <b-button v-on:click="addenvironment">Add new HDR</b-button>
-        <drop-down-element v-on:selectionchanged="environmentchanged" v-bind:dropdowncontent="environments" class="smallerLabel" name="Active Environment" ></drop-down-element>
+        <drop-down-element v-on:selectionchanged="environmentchanged" v-bind:dropdowncontent="environments" class="smallerLabel" name="Active Environment" ></drop-down-element>-->
     </div>
 </script>
 <script id="animationTemplate" type="text/x-template">
     <div>
         <h2>Animation</h2>
         <label  class="label">Animation Controls</label>
         <toggle-button v-on:buttonclicked="animationplayclicked" onText="Pause" offText="Play" ref="animations"></toggle-button>
-        <check-box-element name="Animation" v-bind:checkboxcontent="animations"></check-box-element>
+        <!--<check-box-element name="Animation" v-bind:checkboxcontent="animations"></check-box-element>-->
     </div>
 </script>
 <script id="xmpTemplate" type="text/x-template">
@@ -175,7 +176,7 @@ <h2>XMP</h2>
     <div>
         <h2>Advanced Controls</h2>
         <drop-down-element name="Debug Channels" v-on:selectionchanged="debugchannelchanged" v-bind:dropdowncontent="debugchannels"></drop-down-element>
-        <slider-element class="smallerLabel" name="Exposure"></slider-element>
+        <slider-element class="smallerLabel" name="Exposure" v-on:valuechanged="exposurechanged"></slider-element>
         <drop-down-element class="smallerLabel" name="Tone Map" v-on:selectionchanged="tonemapchanged" v-bind:dropdowncontent="tonemaps"></drop-down-element>
         <b-switch v-model="skinning" v-on:input="skinningchanged">Skinning</b-switch>
         <br>
@@ -232,10 +233,11 @@ <h2>Advanced Controls</h2>
                 <b-tab-item label="XMP" icon="video">
                     <tab-xmp v-bind:xmp="xmp"></tab-xmp>
                 </b-tab-item>
-                <b-tab-item label="Capture" icon="video">
-                </b-tab-item>
+                <!--<b-tab-item label="Capture" icon="video">
+                </b-tab-item>-->
                 <b-tab-item label="Advanced Controls" icon="video">
-                    <tab-advanced-controls v-stream:skinningchanged="skinningChanged$"
+                    <tab-advanced-controls v-stream:exposurechanged="exposureChanged$"
+                                            v-stream:skinningchanged="skinningChanged$"
                                             v-stream:morphingchanged="morphingChanged$"
                                             v-stream:tonemapchanged="tonemapChanged$" v-bind:tonemaps="tonemaps"
                                             v-stream:debugchannelchanged="debugchannelChanged$" v-bind:debugchannels="debugchannels"

diff --git a/example/src/logic/uimodel.js b/example/src/logic/uimodel.js
@@ -48,6 +48,7 @@ class UIModel
             startWith(DebugOutput.NONE)
         );
 
+        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.iblEnabled = app.iblChanged$.pipe(pluck("event", "msg"));
@@ -74,7 +75,7 @@ class UIModel
         );
 
         this.animationPlay = app.animationPlayChanged$.pipe(pluck("event", "msg"));
-        
+
         const inputObservables = UIModel.getInputObservables(document.getElementById("canvas"));
         this.model = merge(dropdownGltfChanged, inputObservables.gltfDropped);
         this.hdr = inputObservables.hdrDropped;

diff --git a/example/src/main.js b/example/src/main.js
@@ -78,11 +78,15 @@ async function main()
     });
 
     uiModel.skinningEnabled.subscribe( skinningEnabled => {
-        state.skinningEnabled = skinningEnabled;
+        state.renderingParameters.skinning = skinningEnabled;
+    });
+
+    uiModel.exposure.subscribe( exposure => {
+        state.renderingParameters.exposure = exposure;
     });
 
     uiModel.morphingEnabled.subscribe( morphingEnabled => {
-        state.morphingEnabled = morphingEnabled;
+        state.renderingParameters.morphing = morphingEnabled;
     });
 
     uiModel.iblEnabled.subscribe( iblEnabled => {

diff --git a/example/src/ui/ui.js b/example/src/ui/ui.js
@@ -92,9 +92,20 @@ Vue.component('slider-element', {
     props: ['name'],
     data() {
         return {
-            value: 0
+            value: 1
         };
     },
+    updated : function()
+    {
+        this.$emit('valuechanged', this.value);
+    },
+    methods:
+    {
+        setValue(value)
+        {
+            this.value = value;
+        }
+    },
     template:'#sliderTemplate'
 });
 Vue.component('color-picker-element', {
@@ -158,43 +169,43 @@ Vue.component('tab-models', {
     }
 });
 Vue.component('tab-display', {
-  props: ["environments", "colorpicker"],
-  template:'#displayTemplate',
-  data() {
-    return {
-        environmentvisibility: true,
-        punctuallights: true,
-        ibl: true,
-        environmentRotations: [{title: "+Z"}, {title: "-X"}, {title: "-Z"}, {title: "+X"}]
-    };
-  },
-  methods:
-  {
-    environmentvisibilitychanged: function(value) {
-        this.$emit('environmentvisibilitychanged', value)
-    },
-    punctuallightschanged: function(value) {
-        this.$emit('punctuallightschanged', value)
-    },
-    iblchanged: function(value) {
-        this.$emit('iblchanged', value)
-    },
-    environmentchanged: function(value) {
-        this.$emit('environmentchanged', value)
-    },
-    environmentrotationchanged: function(value) {
-        this.$emit('environmentrotationchanged', value);
-    },
-    addenvironment: function(value) {
-        this.$emit('addenvironment', value)
-    },
-    colorchanged: function(value) {
-        this.$emit('colorchanged', value)
+    props: ["environments", "colorpicker"],
+    template:'#displayTemplate',
+    data() {
+        return {
+            environmentvisibility: true,
+            punctuallights: true,
+            ibl: true,
+            environmentRotations: [{title: "+Z"}, {title: "-X"}, {title: "-Z"}, {title: "+X"}]
+        };
     },
-    setSelectedClearColor: function (value) {
-        this.$refs.colorpicker.setColor(value);
+    methods:
+    {
+        environmentvisibilitychanged: function(value) {
+            this.$emit('environmentvisibilitychanged', value)
+        },
+        punctuallightschanged: function(value) {
+            this.$emit('punctuallightschanged', value)
+        },
+        iblchanged: function(value) {
+            this.$emit('iblchanged', value)
+        },
+        environmentchanged: function(value) {
+            this.$emit('environmentchanged', value)
+        },
+        environmentrotationchanged: function(value) {
+            this.$emit('environmentrotationchanged', value);
+        },
+        addenvironment: function(value) {
+            this.$emit('addenvironment', value)
+        },
+        colorchanged: function(value) {
+            this.$emit('colorchanged', value)
+        },
+        setSelectedClearColor: function (value) {
+            this.$refs.colorpicker.setColor(value);
+        }
     }
-  }
 });
 Vue.component('tab-animation', {
     props: ["animations"],
@@ -218,7 +229,7 @@ Vue.component('tab-xmp', {
   },
 });
 Vue.component('tab-advanced-controls', {
-    props: ["debugchannels", "tonemaps", "statistics"],
+    props: ["debugchannels", "tonemaps", "statistics", "exposure"],
     template:'#advancedControlsTemplate',
     data() {
         return {
@@ -228,14 +239,17 @@ Vue.component('tab-advanced-controls', {
     },
     methods:
     {
+        exposurechanged: function(value) {
+            this.$emit('exposurechanged', value)
+        },
         skinningchanged: function(value) {
-            this.$emit('skinningchanged', value);
+            this.$emit('skinningchanged', value)
         },
         morphingchanged: function(value) {
-            this.$emit('morphingchanged', value);
+            this.$emit('morphingchanged', value)
         },
         debugchannelchanged: function(value) {
-            this.$emit('debugchannelchanged', value);
+            this.$emit('debugchannelchanged', value)
         },
         tonemapchanged: function(value) {
             this.$emit('tonemapchanged', value);
@@ -248,7 +262,7 @@ const app = new Vue({
                 'environmentChanged$', 'debugchannelChanged$', 'tonemapChanged$', 'skinningChanged$',
                 'environmentVisibilityChanged$', 'punctualLightsChanged$', 'iblChanged$', 'morphingChanged$',
                 'addEnvironment$', 'colorChanged$', 'environmentRotationChanged$', 'animationPlayChanged$',
-                'variantChanged$'],
+                'variantChanged$', 'exposureChanged$'],
     data() {
         return {
             fullheight: true,