Merge branch 'develop' into feature/xmpUpdateUIAndExtension

# Conflicts:
#	app_web/index.html

app_headless/index.js

@@ -42,8 +42,7 @@ async function main()
     state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);
     state.userCamera.updatePosition();
 
-    view.animate(state);
-    view.renderFrame(state);
+    view.renderFrame(state, width, height);
 
     let pixels = new Uint8Array(width * height * 4);
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

app_web/src/logic/uimodel.js

@@ -1,7 +1,6 @@
-import { bindCallback, fromEvent, merge } from 'rxjs';
+import { fromEvent, merge } from 'rxjs';
 import { map, filter, startWith, pluck } from 'rxjs/operators';
 import { glTF, ToneMaps, DebugOutput } from 'gltf-sample-viewer';
-import { gltfInput } from '../input.js';
 
 import { getIsGltf, getIsGlb, getIsHdr } from 'gltf-sample-viewer';
 
@@ -50,6 +49,9 @@ class UIModel
         this.exposurecompensation = 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"));
+        this.sheenEnabled = app.sheenChanged$.pipe(pluck("event", "msg"));
+        this.transmissionEnabled = app.transmissionChanged$.pipe(pluck("event", "msg"));
         this.iblEnabled = app.iblChanged$.pipe(pluck("event", "msg"));
         this.punctualLightsEnabled = app.punctualLightsChanged$.pipe(pluck("event", "msg"));
         this.environmentEnabled = app.environmentVisibilityChanged$.pipe(pluck("event", "msg"));
@@ -79,6 +81,32 @@ class UIModel
         this.hdr = inputObservables.hdrDropped;
 
         this.variant = app.variantChanged$.pipe(pluck("event", "msg"));
+
+        this.model.subscribe(() => {
+            // remove last filename
+            if(this.app.models[this.app.models.length -1] === this.lastDroppedFilename)
+            {
+                this.app.models.pop();
+                this.lastDroppedFilename = undefined;
+            }
+        });
+
+        const dropedFileName = inputObservables.gltfDropped.pipe(
+            map( (data) => {
+                return data.mainFile.name;
+            })
+        );
+        dropedFileName.subscribe( (filename) => {
+            if(filename !== undefined)
+            {
+                filename = filename.split('/').pop();
+                filename = filename.substr(0, filename.lastIndexOf('.'));
+
+                this.app.models.push(filename);
+                this.app.selectedModel = filename;
+                this.lastDroppedFilename = filename;
+            }
+        });
     }
 
     static getInputObservables(inputDomElement)

app_web/src/main.js

@@ -13,7 +13,7 @@ async function main()
     const canvas = document.getElementById("canvas");
     const context = canvas.getContext("webgl2", { alpha: false, antialias: true });
     const ui = document.getElementById("app");
-    const view = new GltfView(context, ui);
+    const view = new GltfView(context);
     const state = view.createState();
 
     initDracoLib();
@@ -29,7 +29,7 @@ async function main()
 
     // whenever a new model is selected, load it and when complete pass the loaded gltf
     // into a stream back into the UI
-    const subject = new Subject();
+    const gltfLoadedSubject = new Subject();
     const gltfLoadedMulticast = uiModel.model.pipe(
         mergeMap( (model) =>
         {
@@ -41,27 +41,29 @@ async function main()
                 const scene = state.gltf.scenes[state.sceneIndex];
                 scene.applyTransformHierarchy(state.gltf);
                 computePrimitiveCentroids(state.gltf);
+                state.userCamera.aspectRatio = canvas.width / canvas.height;
                 state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);
-                state.userCamera.updatePosition();
                 state.animationIndices = [0];
                 state.animationTimer.start();
                 return state;
             })
             );
         }),
         // transform gltf loaded observable to multicast observable to avoid multiple execution with multiple subscriptions
-        multicast(subject)
+        multicast(gltfLoadedSubject)
     );
 
-
+    const sceneChangedSubject = new Subject();
     const sceneChangedObservable = uiModel.scene.pipe(map( newSceneIndex => {
         state.sceneIndex = newSceneIndex;
+        state.cameraIndex = undefined;
         const scene = state.gltf.scenes[state.sceneIndex];
         scene.applyTransformHierarchy(state.gltf);
         computePrimitiveCentroids(state.gltf);
         state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);
-        state.userCamera.updatePosition();
-    }));
+    }),
+    multicast(sceneChangedSubject)
+    );
 
     const statisticsUpdateObservableTemp = merge(
         gltfLoadedMulticast,
@@ -103,6 +105,16 @@ async function main()
         state.renderingParameters.morphing = morphingEnabled;
     });
 
+    uiModel.clearcoatEnabled.subscribe( clearcoatEnabled => {
+        state.renderingParameters.clearcoat = clearcoatEnabled;
+    });
+    uiModel.sheenEnabled.subscribe( sheenEnabled => {
+        state.renderingParameters.sheen = sheenEnabled;
+    });
+    uiModel.transmissionEnabled.subscribe( transmissionEnabled => {
+        state.renderingParameters.transmission = transmissionEnabled;
+    });
+
     uiModel.iblEnabled.subscribe( iblEnabled => {
         state.renderingParameters.useIBL = iblEnabled;
     });
@@ -166,21 +178,38 @@ async function main()
     input.setupCanvasInputBindings(canvas);
     input.onRotate = (deltaX, deltaY) =>
     {
-        state.userCamera.rotate(deltaX, deltaY);
-        state.userCamera.updatePosition();
+        if (state.cameraIndex === undefined)
+        {
+            state.userCamera.orbit(deltaX, deltaY);
+        }
     };
     input.onPan = (deltaX, deltaY) =>
     {
-        state.userCamera.pan(deltaX, deltaY);
-        state.userCamera.updatePosition();
+        if (state.cameraIndex === undefined)
+        {
+            state.userCamera.pan(deltaX, deltaY);
+        }
     };
     input.onZoom = (delta) =>
     {
-        state.userCamera.zoomIn(delta);
-        state.userCamera.updatePosition();
+        if (state.cameraIndex === undefined)
+        {
+            state.userCamera.zoomBy(delta);
+        }
+    };
+
+    // configure the animation loop
+    const update = () =>
+    {
+        canvas.width = window.innerWidth - ui.getBoundingClientRect().width;
+        canvas.height = canvas.clientHeight;
+
+        view.renderFrame(state, canvas.width, canvas.height);
+        window.requestAnimationFrame(update);
     };
 
-    await view.startRendering(state, canvas);
+    // After this start executing animation loop.
+    window.requestAnimationFrame(update);
 }
 
 export { main };

app_web/src/ui/ui.js

@@ -50,7 +50,7 @@ const app = new Vue({
         'environmentChanged$', 'debugchannelChanged$', 'tonemapChanged$', 'skinningChanged$',
         'environmentVisibilityChanged$', 'punctualLightsChanged$', 'iblChanged$', 'morphingChanged$',
         'addEnvironment$', 'colorChanged$', 'environmentRotationChanged$', 'animationPlayChanged$',
-        'variantChanged$', 'exposureChanged$'],
+        'variantChanged$', 'exposureChanged$', "clearcoatChanged$", "sheenChanged$", "transmissionChanged$"],
     data() {
         return {
             fullheight: true,
@@ -84,6 +84,9 @@ const app = new Vue({
             toneMap: "None",
             skinning: true,
             morphing: true,
+            clearcoatEnabled: true,
+            sheenEnabled: true,
+            transmissionEnabled: true,
         };
     },
     mounted: function()

app_web/ui.css

@@ -103,6 +103,13 @@ label.switch
     white-space: nowrap;
 }
 
+.tabItemScrollable
+{
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+}
+
 /**********************************/
 /**********************************/
 /* Styles for individual elements */
@@ -128,6 +135,15 @@ canvas
     flex-wrap: unset;
 }
 
+.b-tabs .tab-content
+{
+    padding-right: 0px !important;
+}
+
+.tabContent
+{
+    margin-right: 10px;
+}
 
 .tab-item h2
 {
@@ -282,8 +298,4 @@ div .field.has-addons
 .b-slider-tick-label
 {
     margin-top: 8px;
-    margin-left: -5px;
-    line-height: 0.5;
-    position: relative !important;
-    text-align: center;
 }

source/GltfState/gltf_state.js

@@ -11,6 +11,9 @@ class GltfState
         this.renderingParameters = {
             morphing: true,
             skinning: true,
+            clearcoat: true,
+            sheen: true,
+            transmission: true,
             clearColor: [58, 64, 74],
             exposure: 1.0,
             usePunctual: true,

source/GltfView/gltf_view.js

@@ -4,9 +4,8 @@ import { GL } from '../Renderer/webgl.js';
 
 class GltfView
 {
-    constructor(context, ui)
+    constructor(context)
     {
-        this.ui = ui;
         this.context = context;
         this.renderer = new gltfRenderer(this.context);
     }
@@ -16,26 +15,11 @@ class GltfView
         return new GltfState();
     }
 
-    updateCanvas(canvas)
-    {
-        if(this.ui !== undefined)
-        {
-            canvas.width = window.innerWidth - this.ui.getBoundingClientRect().width;
-        }
-        else
-        {
-            canvas.width = canvas.clientWidth;
-        }
-        canvas.height = canvas.clientHeight;
-    }
-
-    updateViewport(width, height)
+    renderFrame(state, width, height)
     {
+        this.animate(state);
+
         this.renderer.resize(width, height);
-    }
-
-    renderFrame(state)
-    {
 
         this.renderer.clearFrame(state.renderingParameters.clearColor);
 
@@ -50,6 +34,7 @@ class GltfView
 
         this.renderer.drawScene(state, scene);
     }
+
     animate(state)
     {
         if(state.gltf === undefined)
@@ -92,7 +77,11 @@ class GltfView
         const transparentMaterials = activeMaterials.filter(material => material.alphaMode === "BLEND");
         const faceCount = activePrimitives
             .map(primitive => {
-                const verticesCount = state.gltf.accessors[primitive.indices].count;
+                let verticesCount = 0;
+                if(primitive.indices !== undefined)
+                {
+                    verticesCount = state.gltf.accessors[primitive.indices].count;
+                }
                 if (verticesCount === 0)
                 {
                     return 0;
@@ -125,21 +114,6 @@ class GltfView
             transparentMaterialsCount: transparentMaterials.length
         };
     }
-
-    async startRendering(state, canvas)
-    {
-        const update = () =>
-        {
-            this.animate(state);
-            this.updateCanvas(canvas);
-            this.updateViewport(canvas.width, canvas.height);
-            this.renderFrame(state);
-            window.requestAnimationFrame(update);
-        };
-
-        // After this start executing render loop.
-        window.requestAnimationFrame(update);
-    }
 }
 
 export { GltfView };

source/Renderer/renderer.js

@@ -270,7 +270,7 @@ class gltfRenderer
         this.pushVertParameterDefines(vertDefines, state.renderingParameters, state.gltf, node, primitive);
         vertDefines = primitive.getDefines().concat(vertDefines);
 
-        let fragDefines = material.getDefines().concat(vertDefines);
+        let fragDefines = material.getDefines(state.renderingParameters).concat(vertDefines);
         this.pushFragParameterDefines(fragDefines, state);
 
         const fragmentHash = this.shaderCache.selectShader(material.getShaderIdentifier(), fragDefines);
@@ -359,7 +359,7 @@ class gltfRenderer
 
         for (let [uniform, val] of material.getProperties().entries())
         {
-            this.shader.updateUniform(uniform, val);
+            this.shader.updateUniform(uniform, val, false);
         }
 
         for (let i = 0; i < material.textures.length; ++i)
@@ -387,7 +387,7 @@ class gltfRenderer
             this.webGl.setTexture(this.shader.getUniformLocation("u_SheenELUT"), state.gltf, state.environment.sheenELUT, textureCount++);
         }
 
-        if(transmissionSampleTexture !== undefined && state.renderingParameters.useIBL && state.environment)
+        if(transmissionSampleTexture !== undefined && state.renderingParameters.useIBL && state.environment && state.renderingParameters.transmission)
         {
             this.webGl.context.activeTexture(GL.TEXTURE0 + textureCount);
             this.webGl.context.bindTexture(this.webGl.context.TEXTURE_2D, this.opaqueRenderTexture);

source/Renderer/shaders/pbr.frag

@@ -141,6 +141,19 @@ NormalInfo getNormalInfo(vec3 v)
     return info;
 }
 
+vec3 getClearcoatNormal(NormalInfo normalInfo)
+{
+    #ifdef HAS_CLEARCOAT_NORMAL_MAP
+        vec3 n = texture(u_ClearcoatNormalSampler, getClearcoatNormalUV()).rgb * 2.0 - vec3(1.0);
+        n *= vec3(u_ClearcoatNormalScale, u_ClearcoatNormalScale, 1.0);
+        n = mat3(normalInfo.t, normalInfo.b, normalInfo.ng) * normalize(n);
+        return n;
+    #else
+        return normalInfo.ng;
+    #endif
+}
+
+
 vec4 getBaseColor()
 {
     vec4 baseColor = vec4(1.0, 1.0, 1.0, 1.0);
@@ -248,12 +261,9 @@ MaterialInfo getClearCoatInfo(MaterialInfo info, NormalInfo normalInfo, float f0
         info.clearcoatRoughness *= clearcoatSampleRoughness.g;
     #endif
 
-    #ifdef HAS_CLEARCOAT_NORMAL_MAP
-        vec4 clearcoatSampleNormal = texture(u_ClearcoatNormalSampler, getClearcoatNormalUV());
-        info.clearcoatNormal = normalize(clearcoatSampleNormal.xyz);
-    #else
-        info.clearcoatNormal = normalInfo.ng;
-    #endif
+
+    info.clearcoatNormal = getClearcoatNormal(normalInfo);
+
 
     info.clearcoatRoughness = clamp(info.clearcoatRoughness, 0.0, 1.0);