From 5c7df4c730de6bb4c57524d3c6d58b8b2713f615 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Wed, 20 Jan 2021 11:34:55 +0100 Subject: [PATCH 01/43] Add properties to gltfMaterial to toggle pbr next extensions (GSVN-183) --- src/gltf/material.js | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/gltf/material.js b/src/gltf/material.js index 0f876dbf..396ce9e3 100644 --- a/src/gltf/material.js +++ b/src/gltf/material.js @@ -18,6 +18,14 @@ class gltfMaterial extends GltfObject this.alphaCutoff = 0.5; this.doubleSided = false; + // pbr next extension toggles + this.hasClearcoat = false; + this.allowClearcoat = true; + this.hasSheen = false; + this.allowSheen = true; + this.hasTransmission = false; + this.allowTransmission = true; + // non gltf properties this.type = "unlit"; this.textures = []; @@ -54,7 +62,22 @@ class gltfMaterial extends GltfObject getDefines() { - return this.defines; + const defines = this.defines; + + if (this.hasClearcoat && this.allowClearcoat) + { + defines.push("MATERIAL_CLEARCOAT 1"); + } + if (this.hasSheen && this.allowSheen) + { + defines.push("MATERIAL_SHEEN 1"); + } + if (this.hasTransmission && this.allowTransmission) + { + defines.push("MATERIAL_TRANSMISSION 1"); + } + + return defines; } getProperties() @@ -265,7 +288,7 @@ class gltfMaterial extends GltfObject let clearcoatFactor = 0.0; let clearcoatRoughnessFactor = 0.0; - this.defines.push("MATERIAL_CLEARCOAT 1"); + this.hasClearcoat = true; if(this.extensions.KHR_materials_clearcoat.clearcoatFactor !== undefined) { @@ -311,7 +334,7 @@ class gltfMaterial extends GltfObject let sheenRoughnessFactor = 0.0; let sheenColorFactor = vec3.fromValues(1.0, 1.0, 1.0); - this.defines.push("MATERIAL_SHEEN 1"); + this.hasSheen = true; if(this.extensions.KHR_materials_sheen.sheenRoughnessFactor !== undefined) { @@ -347,7 +370,7 @@ class gltfMaterial extends GltfObject { let transmissionFactor = 0.0; - this.defines.push("MATERIAL_TRANSMISSION 1"); + this.hasTransmission = true; if (transmissionFactor !== undefined) { From 5f3b49e1eeff2dce232da8e7806f6906cfd22373 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Wed, 20 Jan 2021 12:59:34 +0100 Subject: [PATCH 02/43] Implement UserCamera.setPosition() --- src/gltf/user_camera.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 32578119..496eca2f 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -50,6 +50,19 @@ class UserCamera extends gltfCamera this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); } + // Set exact position of camera, without rotating it. + setPosition(x, y, z) + { + const position = vec3.fromValues(x, y, z); + const difference = vec3.create(); + vec3.subtract(difference, position, this.position); + + this.position = position; + vec3.add(this.target, this.target, difference); + + this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); + } + reset(gltf, sceneIndex) { this.xRot = 0; From 9d2087aaa820364631425722a0dc9fe45180e3a5 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Wed, 20 Jan 2021 13:08:01 +0100 Subject: [PATCH 03/43] Remove unused UserCamera.up property --- src/gltf/user_camera.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 496eca2f..a88cb47c 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -12,7 +12,6 @@ class UserCamera extends gltfCamera constructor( position = [0, 0, 0], target = [0, 0,0], - up = [0, 1, 0], xRot = 0, yRot = 0, zoom = 1) @@ -21,7 +20,6 @@ class UserCamera extends gltfCamera this.position = jsToGl(position); this.target = jsToGl(target); - this.up = jsToGl(up); this.xRot = xRot; this.yRot = yRot; this.zoom = zoom; From 3a55759ab70c5a5358171718291a6262341271ec Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Wed, 20 Jan 2021 13:23:01 +0100 Subject: [PATCH 04/43] updatePosition() is called automatically by UserCamera --- example/src/main.js | 6 ------ src/gltf/user_camera.js | 5 +++++ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/example/src/main.js b/example/src/main.js index 1a060901..3dc9de80 100644 --- a/example/src/main.js +++ b/example/src/main.js @@ -40,7 +40,6 @@ async function main() scene.applyTransformHierarchy(state.gltf); computePrimitiveCentroids(state.gltf); state.userCamera.fitViewToScene(state.gltf, state.sceneIndex); - state.userCamera.updatePosition(); state.animationIndices = [0]; state.animationTimer.start(); return state; @@ -58,7 +57,6 @@ async function main() scene.applyTransformHierarchy(state.gltf); computePrimitiveCentroids(state.gltf); state.userCamera.fitViewToScene(state.gltf, state.sceneIndex); - state.userCamera.updatePosition(); })); const statisticsUpdateObservableTemp = merge( @@ -163,17 +161,14 @@ async function main() input.onRotate = (deltaX, deltaY) => { state.userCamera.rotate(deltaX, deltaY); - state.userCamera.updatePosition(); }; input.onPan = (deltaX, deltaY) => { state.userCamera.pan(deltaX, deltaY); - state.userCamera.updatePosition(); }; input.onZoom = (delta) => { state.userCamera.zoomIn(delta); - state.userCamera.updatePosition(); }; input.onDropFiles = (mainFile, additionalFiles) => { if (mainFile.name.endsWith(".hdr")) @@ -190,7 +185,6 @@ async function main() scene.applyTransformHierarchy(state.gltf); computePrimitiveCentroids(state.gltf); state.userCamera.fitViewToScene(state.gltf, state.sceneIndex); - state.userCamera.updatePosition(); state.animationIndices = [0]; state.animationTimer.start(); return state.gltf; diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index a88cb47c..b7a11f18 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -78,6 +78,7 @@ class UserCamera extends gltfCamera { this.zoom /= this.zoomFactor; } + this.updatePosition(); } rotate(x, y) @@ -86,6 +87,7 @@ class UserCamera extends gltfCamera this.xRot += (x * this.rotateSpeed); this.yRot += (y * this.rotateSpeed); this.yRot = clamp(this.yRot, -yMax, yMax); + this.updatePosition(); } pan(x, y) @@ -100,6 +102,8 @@ class UserCamera extends gltfCamera vec3.add(this.target, this.target, up); vec3.add(this.target, this.target, left); + + this.updatePosition(); } fitPanSpeedToScene(min, max) @@ -115,6 +119,7 @@ class UserCamera extends gltfCamera this.fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); this.fitPanSpeedToScene(this.sceneExtents.min, this.sceneExtents.max); this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); + this.updatePosition(); } toLocalRotation(vector) From fc0e710434bf183591d5ca4bd64f4862065003e9 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Wed, 20 Jan 2021 13:27:23 +0100 Subject: [PATCH 05/43] simplify updatePosition() --- src/gltf/user_camera.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index b7a11f18..0c947fc4 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -36,14 +36,10 @@ class UserCamera extends gltfCamera { // calculate direction from focus to camera (assuming camera is at positive z) // yRot rotates *around* x-axis, xRot rotates *around* y-axis - const direction = vec3.fromValues(0, 0, 1); + const direction = vec3.fromValues(0, 0, this.zoom); this.toLocalRotation(direction); - const position = vec3.create(); - vec3.scale(position, direction, this.zoom); - vec3.add(position, position, this.target); - - this.position = position; + vec3.add(this.position, this.target, direction); this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); } @@ -154,6 +150,8 @@ class UserCamera extends gltfCamera fitCameraPlanesToExtents(min, max) { + // depends only on scene min/max and the camera zoom + // Manually increase scene extent just for the camera planes to avoid camera clipping in most situations. const longestDistance = 10 * vec3.distance(min, max); let zNear = this.zoom - (longestDistance * 0.6); From 0cb50d0122df7e988de6ba5355b9b6a067a0b31a Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Wed, 20 Jan 2021 13:32:12 +0100 Subject: [PATCH 06/43] simplify code flow in UserCamera --- src/gltf/user_camera.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 0c947fc4..8f5c19c6 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -40,8 +40,6 @@ class UserCamera extends gltfCamera this.toLocalRotation(direction); vec3.add(this.position, this.target, direction); - - this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); } // Set exact position of camera, without rotating it. @@ -75,6 +73,7 @@ class UserCamera extends gltfCamera this.zoom /= this.zoomFactor; } this.updatePosition(); + this.fitCameraPlanesToExtents(); } rotate(x, y) @@ -113,9 +112,12 @@ class UserCamera extends gltfCamera getSceneExtents(gltf, sceneIndex, this.sceneExtents.min, this.sceneExtents.max); this.fitCameraTargetToExtents(this.sceneExtents.min, this.sceneExtents.max); this.fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); + + const direction = vec3.fromValues(0, 0, this.zoom); + vec3.add(this.position, this.target, direction); + this.fitPanSpeedToScene(this.sceneExtents.min, this.sceneExtents.max); this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); - this.updatePosition(); } toLocalRotation(vector) From 35e626e6ed9920ca2ad656f56c42fdef68ca12e4 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 10:43:56 +0100 Subject: [PATCH 07/43] begin with setRotation() --- src/gltf/user_camera.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 8f5c19c6..b13414ce 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -51,8 +51,19 @@ class UserCamera extends gltfCamera this.position = position; vec3.add(this.target, this.target, difference); + } - this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); + setRotation(yaw, pitch) + { + // Rotates target instead of position + + const difference = vec3.create(); + vec3.subtract(difference, this.target, this.position); + + vec3.rotateY(difference, difference, VecZero, -yaw * this.rotateSpeed); + vec3.rotateX(difference, difference, VecZero, -pitch * this.rotateSpeed); + + vec3.add(this.target, this.position, difference); } reset(gltf, sceneIndex) @@ -83,6 +94,14 @@ class UserCamera extends gltfCamera this.yRot += (y * this.rotateSpeed); this.yRot = clamp(this.yRot, -yMax, yMax); this.updatePosition(); + + // const difference = vec3.create(); + // vec3.subtract(difference, this.position, this.target); + + // vec3.rotateY(difference, difference, VecZero, -x * this.rotateSpeed); + // vec3.rotateX(difference, difference, VecZero, -y * this.rotateSpeed); + + // vec3.add(this.position, this.target, difference); } pan(x, y) From 397d65ad3cb7dccd6fe83efc1b59af90fd14e947 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 11:41:02 +0100 Subject: [PATCH 08/43] rename functions --- example/src/main.js | 4 ++-- src/gltf/user_camera.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/example/src/main.js b/example/src/main.js index 3dc9de80..a833bedc 100644 --- a/example/src/main.js +++ b/example/src/main.js @@ -160,7 +160,7 @@ async function main() input.setupCanvasInputBindings(canvas); input.onRotate = (deltaX, deltaY) => { - state.userCamera.rotate(deltaX, deltaY); + state.userCamera.orbit(deltaX, deltaY); }; input.onPan = (deltaX, deltaY) => { @@ -168,7 +168,7 @@ async function main() }; input.onZoom = (delta) => { - state.userCamera.zoomIn(delta); + state.userCamera.zoom(delta); }; input.onDropFiles = (mainFile, additionalFiles) => { if (mainFile.name.endsWith(".hdr")) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index b13414ce..bd79f66b 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -73,7 +73,7 @@ class UserCamera extends gltfCamera this.fitViewToScene(gltf, sceneIndex, true); } - zoomIn(value) + zoom(value) { if (value > 0) { @@ -87,7 +87,7 @@ class UserCamera extends gltfCamera this.fitCameraPlanesToExtents(); } - rotate(x, y) + orbit(x, y) { const yMax = Math.PI / 2 - 0.01; this.xRot += (x * this.rotateSpeed); From 22fa49ea58540ff2c7f04042050b434ebc8f8735 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 11:57:13 +0100 Subject: [PATCH 09/43] position is implicit --- example/src/main.js | 2 +- src/gltf/user_camera.js | 25 ++++++++----------------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/example/src/main.js b/example/src/main.js index a833bedc..d06c4314 100644 --- a/example/src/main.js +++ b/example/src/main.js @@ -168,7 +168,7 @@ async function main() }; input.onZoom = (delta) => { - state.userCamera.zoom(delta); + state.userCamera.zoomBy(delta); }; input.onDropFiles = (mainFile, additionalFiles) => { if (mainFile.name.endsWith(".hdr")) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index bd79f66b..3926a352 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -10,15 +10,13 @@ const MaxNearFarRatio = 10000; class UserCamera extends gltfCamera { constructor( - position = [0, 0, 0], - target = [0, 0,0], + target = [0, 0, 0], xRot = 0, yRot = 0, zoom = 1) { super(); - this.position = jsToGl(position); this.target = jsToGl(target); this.xRot = xRot; this.yRot = yRot; @@ -32,14 +30,16 @@ class UserCamera extends gltfCamera }; } - updatePosition() + getPosition() { // calculate direction from focus to camera (assuming camera is at positive z) // yRot rotates *around* x-axis, xRot rotates *around* y-axis const direction = vec3.fromValues(0, 0, this.zoom); this.toLocalRotation(direction); - vec3.add(this.position, this.target, direction); + const position = vec3.create(); + vec3.add(position, this.target, direction); + return position; } // Set exact position of camera, without rotating it. @@ -73,7 +73,7 @@ class UserCamera extends gltfCamera this.fitViewToScene(gltf, sceneIndex, true); } - zoom(value) + zoomBy(value) { if (value > 0) { @@ -83,8 +83,7 @@ class UserCamera extends gltfCamera { this.zoom /= this.zoomFactor; } - this.updatePosition(); - this.fitCameraPlanesToExtents(); + this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); } orbit(x, y) @@ -93,7 +92,6 @@ class UserCamera extends gltfCamera this.xRot += (x * this.rotateSpeed); this.yRot += (y * this.rotateSpeed); this.yRot = clamp(this.yRot, -yMax, yMax); - this.updatePosition(); // const difference = vec3.create(); // vec3.subtract(difference, this.position, this.target); @@ -116,8 +114,6 @@ class UserCamera extends gltfCamera vec3.add(this.target, this.target, up); vec3.add(this.target, this.target, left); - - this.updatePosition(); } fitPanSpeedToScene(min, max) @@ -133,7 +129,7 @@ class UserCamera extends gltfCamera this.fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); const direction = vec3.fromValues(0, 0, this.zoom); - vec3.add(this.position, this.target, direction); + vec3.add(this.getPosition(), this.target, direction); this.fitPanSpeedToScene(this.sceneExtents.min, this.sceneExtents.max); this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); @@ -150,11 +146,6 @@ class UserCamera extends gltfCamera return this.target; } - getPosition() - { - return this.position; - } - fitZoomToExtents(min, max) { const maxAxisLength = Math.max(max[0] - min[0], max[1] - min[1]); From ae3eb93c955a7a19af44cfd1f5f756812d6a9e98 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 12:20:03 +0100 Subject: [PATCH 10/43] implement lookAt() --- src/gltf/user_camera.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 3926a352..3a401655 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -42,15 +42,18 @@ class UserCamera extends gltfCamera return position; } - // Set exact position of camera, without rotating it. - setPosition(x, y, z) + lookAt(from, to) { - const position = vec3.fromValues(x, y, z); + // up is implicitly (0, 1, 0) + this.target = to; + const difference = vec3.create(); - vec3.subtract(difference, position, this.position); + vec3.subtract(difference, from, to); + const projectedDifference = vec3.fromValues(from[0] - to[0], 0, from[2] - to[2]); - this.position = position; - vec3.add(this.target, this.target, difference); + this.yRot = vec3.angle(difference, projectedDifference); + this.xRot = vec3.angle(projectedDifference, vec3.fromValues(1.0, 0.0, 0.0)); + this.zoom = vec3.length(difference); } setRotation(yaw, pitch) From 6a87482243e3648507754641c8675af30e675104 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 12:25:51 +0100 Subject: [PATCH 11/43] implement setPosition, setTarget, setZoom --- src/gltf/user_camera.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 3a401655..6810967a 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -56,6 +56,16 @@ class UserCamera extends gltfCamera this.zoom = vec3.length(difference); } + setPosition(position) + { + this.lookAt(position, this.target); + } + + setTarget(target) + { + this.lookAt(target, this.getPosition()); + } + setRotation(yaw, pitch) { // Rotates target instead of position @@ -69,6 +79,11 @@ class UserCamera extends gltfCamera vec3.add(this.target, this.position, difference); } + setZoom(zoom) + { + this.zoom = zoom; + } + reset(gltf, sceneIndex) { this.xRot = 0; From dba8fd4fc8c08eabcb7bcf9374f4b9eb7e6c5fd5 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 12:26:59 +0100 Subject: [PATCH 12/43] implement setRotation --- src/gltf/user_camera.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index 6810967a..baa44a92 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -68,15 +68,8 @@ class UserCamera extends gltfCamera setRotation(yaw, pitch) { - // Rotates target instead of position - - const difference = vec3.create(); - vec3.subtract(difference, this.target, this.position); - - vec3.rotateY(difference, difference, VecZero, -yaw * this.rotateSpeed); - vec3.rotateX(difference, difference, VecZero, -pitch * this.rotateSpeed); - - vec3.add(this.target, this.position, difference); + this.xRot = yaw; + this.yRot = pitch; } setZoom(zoom) From 8ec1f68f330e1adaafd8a47d822e9f9bfca423e7 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 12:28:22 +0100 Subject: [PATCH 13/43] use consistent naming --- src/gltf/camera.js | 4 +-- src/gltf/user_camera.js | 61 ++++++++++++++++++----------------------- 2 files changed, 29 insertions(+), 36 deletions(-) diff --git a/src/gltf/camera.js b/src/gltf/camera.js index cdada441..e38e8284 100644 --- a/src/gltf/camera.js +++ b/src/gltf/camera.js @@ -115,12 +115,12 @@ class gltfCamera extends GltfObject { const view = mat4.create(); const position = this.getPosition(gltf); - const target = this.getLookAtTarget(gltf); + const target = this.getTarget(gltf); mat4.lookAt(view, position, target, vec3.fromValues(0, 1, 0)); return view; } - getLookAtTarget(gltf) + getTarget(gltf) { const target = vec3.create(); const position = this.getPosition(gltf); diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index baa44a92..cb3f5b09 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -11,18 +11,18 @@ class UserCamera extends gltfCamera { constructor( target = [0, 0, 0], - xRot = 0, - yRot = 0, + yaw = 0, + pitch = 0, zoom = 1) { super(); this.target = jsToGl(target); - this.xRot = xRot; - this.yRot = yRot; + this.yaw = yaw; + this.pitch = pitch; this.zoom = zoom; this.zoomFactor = 1.04; - this.rotateSpeed = 1 / 180; + this.orbitSpeed = 1 / 180; this.panSpeed = 1; this.sceneExtents = { min: vec3.create(), @@ -33,15 +33,20 @@ class UserCamera extends gltfCamera getPosition() { // calculate direction from focus to camera (assuming camera is at positive z) - // yRot rotates *around* x-axis, xRot rotates *around* y-axis + // pitch rotates *around* x-axis, yaw rotates *around* y-axis const direction = vec3.fromValues(0, 0, this.zoom); - this.toLocalRotation(direction); + this.toGlobalOrientation(direction); const position = vec3.create(); vec3.add(position, this.target, direction); return position; } + getTarget() + { + return this.target; + } + lookAt(from, to) { // up is implicitly (0, 1, 0) @@ -51,8 +56,8 @@ class UserCamera extends gltfCamera vec3.subtract(difference, from, to); const projectedDifference = vec3.fromValues(from[0] - to[0], 0, from[2] - to[2]); - this.yRot = vec3.angle(difference, projectedDifference); - this.xRot = vec3.angle(projectedDifference, vec3.fromValues(1.0, 0.0, 0.0)); + this.pitch = vec3.angle(difference, projectedDifference); + this.yaw = vec3.angle(projectedDifference, vec3.fromValues(1.0, 0.0, 0.0)); this.zoom = vec3.length(difference); } @@ -68,8 +73,8 @@ class UserCamera extends gltfCamera setRotation(yaw, pitch) { - this.xRot = yaw; - this.yRot = pitch; + this.yaw = yaw; + this.pitch = pitch; } setZoom(zoom) @@ -79,8 +84,8 @@ class UserCamera extends gltfCamera reset(gltf, sceneIndex) { - this.xRot = 0; - this.yRot = 0; + this.yaw = 0; + this.pitch = 0; this.fitViewToScene(gltf, sceneIndex, true); } @@ -100,27 +105,19 @@ class UserCamera extends gltfCamera orbit(x, y) { const yMax = Math.PI / 2 - 0.01; - this.xRot += (x * this.rotateSpeed); - this.yRot += (y * this.rotateSpeed); - this.yRot = clamp(this.yRot, -yMax, yMax); - - // const difference = vec3.create(); - // vec3.subtract(difference, this.position, this.target); - - // vec3.rotateY(difference, difference, VecZero, -x * this.rotateSpeed); - // vec3.rotateX(difference, difference, VecZero, -y * this.rotateSpeed); - - // vec3.add(this.position, this.target, difference); + this.yaw += (x * this.orbitSpeed); + this.pitch += (y * this.orbitSpeed); + this.pitch = clamp(this.pitch, -yMax, yMax); } pan(x, y) { const left = vec3.fromValues(-1, 0, 0); - this.toLocalRotation(left); + this.toGlobalOrientation(left); vec3.scale(left, left, x * this.panSpeed); const up = vec3.fromValues(0, 1, 0); - this.toLocalRotation(up); + this.toGlobalOrientation(up); vec3.scale(up, up, y * this.panSpeed); vec3.add(this.target, this.target, up); @@ -146,15 +143,11 @@ class UserCamera extends gltfCamera this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); } - toLocalRotation(vector) + // Converts orientation from camera space to global space + toGlobalOrientation(vector) { - vec3.rotateX(vector, vector, VecZero, -this.yRot); - vec3.rotateY(vector, vector, VecZero, -this.xRot); - } - - getLookAtTarget() - { - return this.target; + vec3.rotateX(vector, vector, VecZero, -this.pitch); + vec3.rotateY(vector, vector, VecZero, -this.yaw); } fitZoomToExtents(min, max) From 341cd6adaccddc8fd46291865288be26aa0748d1 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 12:35:02 +0100 Subject: [PATCH 14/43] implement setVerticalFoV --- src/gltf/camera.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/gltf/camera.js b/src/gltf/camera.js index e38e8284..f9304f99 100644 --- a/src/gltf/camera.js +++ b/src/gltf/camera.js @@ -27,6 +27,11 @@ class gltfCamera extends GltfObject this.node = nodeIndex; } + setVerticalFoV(yfov) + { + this.yfov = yfov; + } + initGl(gltf, webGlContext) { super.initGl(gltf, webGlContext); From a5db47a80bae725306f49c76806ec45e4df0bfe0 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 12:39:01 +0100 Subject: [PATCH 15/43] implement getDescription for user camera --- src/gltf/user_camera.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index cb3f5b09..fad2b918 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -30,6 +30,20 @@ class UserCamera extends gltfCamera }; } + // Returns a JSON object describing the user camera's current values. + getDescription() + { + const toJs = vec => [vec[0], vec[1], vec[2]]; + + return { + target: toJs(this.target), + position: toJs(this.getPosition()), + pitch: this.pitch, + yaw: this.yaw, + zoom: this.zoom + } + } + getPosition() { // calculate direction from focus to camera (assuming camera is at positive z) From 9ca58fcdce454a5f8ebc4ae1c3898b76e7c3927e Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Thu, 21 Jan 2021 13:03:03 +0100 Subject: [PATCH 16/43] first UI iteration --- app_web/index.html | 8 ++++++-- app_web/src/logic/uimodel.js | 3 +++ app_web/src/main.js | 10 ++++++++++ app_web/src/ui/ui.js | 5 ++++- source/GltfState/gltf_state.js | 3 +++ source/Renderer/renderer.js | 4 ++++ 6 files changed, 30 insertions(+), 3 deletions(-) diff --git a/app_web/index.html b/app_web/index.html index 4e8c8567..e4bbd9af 100644 --- a/app_web/index.html +++ b/app_web/index.html @@ -259,8 +259,7 @@

Advanced Controls

- @@ -268,6 +267,11 @@

Advanced Controls

Skinning
Morphing + + Clearcoat + Sheen + Transmission + diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js index 5419008d..da9e77d7 100644 --- a/app_web/src/logic/uimodel.js +++ b/app_web/src/logic/uimodel.js @@ -50,6 +50,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")); diff --git a/app_web/src/main.js b/app_web/src/main.js index 0ec3cb77..f55ce7c7 100644 --- a/app_web/src/main.js +++ b/app_web/src/main.js @@ -103,6 +103,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; }); diff --git a/app_web/src/ui/ui.js b/app_web/src/ui/ui.js index 18122028..42539a5e 100644 --- a/app_web/src/ui/ui.js +++ b/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() diff --git a/source/GltfState/gltf_state.js b/source/GltfState/gltf_state.js index 597a154f..6d03ccff 100644 --- a/source/GltfState/gltf_state.js +++ b/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, diff --git a/source/Renderer/renderer.js b/source/Renderer/renderer.js index ea12f583..1af91145 100644 --- a/source/Renderer/renderer.js +++ b/source/Renderer/renderer.js @@ -264,6 +264,10 @@ class gltfRenderer material = state.gltf.materials[primitive.material]; } + material.allowClearcoat = state.renderingParameters.clearcoat; + material.allowSheen = state.renderingParameters.sheen; + material.allowTransmission = state.renderingParameters.transmission; + //select shader permutation, compile and link program. let vertDefines = []; From 734f0c497d4691dd96b315b37dac2ea6ea0f5da5 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 14:37:39 +0100 Subject: [PATCH 17/43] fix allow clearcoat/sheen/transmission --- source/Renderer/renderer.js | 6 +----- source/gltf/material.js | 13 +++++-------- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/source/Renderer/renderer.js b/source/Renderer/renderer.js index 1af91145..b9cd7b24 100644 --- a/source/Renderer/renderer.js +++ b/source/Renderer/renderer.js @@ -264,17 +264,13 @@ class gltfRenderer material = state.gltf.materials[primitive.material]; } - material.allowClearcoat = state.renderingParameters.clearcoat; - material.allowSheen = state.renderingParameters.sheen; - material.allowTransmission = state.renderingParameters.transmission; - //select shader permutation, compile and link program. let vertDefines = []; 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); diff --git a/source/gltf/material.js b/source/gltf/material.js index 396ce9e3..83182604 100644 --- a/source/gltf/material.js +++ b/source/gltf/material.js @@ -20,11 +20,8 @@ class gltfMaterial extends GltfObject // pbr next extension toggles this.hasClearcoat = false; - this.allowClearcoat = true; this.hasSheen = false; - this.allowSheen = true; this.hasTransmission = false; - this.allowTransmission = true; // non gltf properties this.type = "unlit"; @@ -60,19 +57,19 @@ class gltfMaterial extends GltfObject } } - getDefines() + getDefines(renderingParameters) { - const defines = this.defines; + const defines = Array.from(this.defines); - if (this.hasClearcoat && this.allowClearcoat) + if (this.hasClearcoat && renderingParameters.cearcoat) { defines.push("MATERIAL_CLEARCOAT 1"); } - if (this.hasSheen && this.allowSheen) + if (this.hasSheen && renderingParameters.sheen) { defines.push("MATERIAL_SHEEN 1"); } - if (this.hasTransmission && this.allowTransmission) + if (this.hasTransmission && renderingParameters.transmission) { defines.push("MATERIAL_TRANSMISSION 1"); } From b7ddc80e4b823b328ca7352e910c7c0d788e0739 Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Thu, 21 Jan 2021 14:59:21 +0100 Subject: [PATCH 18/43] fixed clearcoat typo --- source/gltf/material.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/gltf/material.js b/source/gltf/material.js index 83182604..9208f2c6 100644 --- a/source/gltf/material.js +++ b/source/gltf/material.js @@ -61,7 +61,7 @@ class gltfMaterial extends GltfObject { const defines = Array.from(this.defines); - if (this.hasClearcoat && renderingParameters.cearcoat) + if (this.hasClearcoat && renderingParameters.clearcoat) { defines.push("MATERIAL_CLEARCOAT 1"); } From 339cec4fb52e6311742714a15162e970ef87187b Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 15:00:25 +0100 Subject: [PATCH 19/43] Update camera description and setVerticalFoV() --- src/gltf/camera.js | 5 ----- src/gltf/user_camera.js | 13 ++++++++++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/gltf/camera.js b/src/gltf/camera.js index f9304f99..e38e8284 100644 --- a/src/gltf/camera.js +++ b/src/gltf/camera.js @@ -27,11 +27,6 @@ class gltfCamera extends GltfObject this.node = nodeIndex; } - setVerticalFoV(yfov) - { - this.yfov = yfov; - } - initGl(gltf, webGlContext) { super.initGl(gltf, webGlContext); diff --git a/src/gltf/user_camera.js b/src/gltf/user_camera.js index fad2b918..255f18ac 100644 --- a/src/gltf/user_camera.js +++ b/src/gltf/user_camera.js @@ -40,10 +40,21 @@ class UserCamera extends gltfCamera position: toJs(this.getPosition()), pitch: this.pitch, yaw: this.yaw, - zoom: this.zoom + zoom: this.zoom, + znear: this.znear, + zfar: this.zfar, + yfov: this.yfov, + xmag: this.xmag, + ymag: this.ymag, + aspectRatio: this.aspectRatio } } + setVerticalFoV(yfov) + { + this.yfov = yfov; + } + getPosition() { // calculate direction from focus to camera (assuming camera is at positive z) From 755f06b39dc2c5d3030b1852f0dd345ae61933e2 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 15:28:26 +0100 Subject: [PATCH 20/43] Include view and projection matrix in camera description --- source/gltf/user_camera.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index 255f18ac..1d68342f 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -33,11 +33,15 @@ class UserCamera extends gltfCamera // Returns a JSON object describing the user camera's current values. getDescription() { - const toJs = vec => [vec[0], vec[1], vec[2]]; + const vecToJs = vec => [vec[0], vec[1], vec[2]]; + const matToJs = mat => [mat[0], mat[1], mat[2], mat[3], + mat[4], mat[5], mat[6], mat[7], + mat[8], mat[9], mat[10], mat[11], + mat[12], mat[13], mat[14], mat[15]]; return { - target: toJs(this.target), - position: toJs(this.getPosition()), + target: vecToJs(this.target), + position: vecToJs(this.getPosition()), pitch: this.pitch, yaw: this.yaw, zoom: this.zoom, @@ -46,7 +50,9 @@ class UserCamera extends gltfCamera yfov: this.yfov, xmag: this.xmag, ymag: this.ymag, - aspectRatio: this.aspectRatio + aspectRatio: this.aspectRatio, + viewMatrix: matToJs(this.viewMatrix()), + projectionMatrix: matToJs(this.projectionMatrix()), } } From 4407bb55e46e099ff1d621b41f6f0dbd779fc524 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 15:46:48 +0100 Subject: [PATCH 21/43] camera descriptor creates valid gltf --- source/gltf/camera.js | 40 ++++++++++++++++++++++++++++++++++++++ source/gltf/user_camera.js | 26 ------------------------- 2 files changed, 40 insertions(+), 26 deletions(-) diff --git a/source/gltf/camera.js b/source/gltf/camera.js index e38e8284..7ae8c89a 100644 --- a/source/gltf/camera.js +++ b/source/gltf/camera.js @@ -171,6 +171,46 @@ class gltfCamera extends GltfObject { return gltf.nodes[this.node]; } + + // Returns a JSON object describing the user camera's current values. + getDescription(gltf) + { + const camera = { + "name": this.name, + "type": this.type + }; + + if (this.type === "perspective") + { + camera["perspective"]["aspectRatio"] = this.aspectRatio; + camera["perspective"]["yfov"] = this.yfov; + camera["perspective"]["zfar"] = this.zfar; + camera["perspective"]["ynear"] = this.ynear; + } + else if (this.type === "orthographic") + { + camera["orthographic"]["xmag"] = this.xmag; + camera["orthographic"]["ymag"] = this.ymag; + camera["orthographic"]["zfar"] = this.zfar; + camera["orthographic"]["ynear"] = this.ynear; + } + + const mat = this.getViewMatrix(gltf); + + const node = { + "name": this.name, + "camera": 0, + "matrix": [mat[0], mat[1], mat[2], mat[3], + mat[4], mat[5], mat[6], mat[7], + mat[8], mat[9], mat[10], mat[11], + mat[12], mat[13], mat[14], mat[15]] + }; + + return { + "node": node, + "camera": camera + } + } } export { gltfCamera }; diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index 1d68342f..7a6b5292 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -30,32 +30,6 @@ class UserCamera extends gltfCamera }; } - // Returns a JSON object describing the user camera's current values. - getDescription() - { - const vecToJs = vec => [vec[0], vec[1], vec[2]]; - const matToJs = mat => [mat[0], mat[1], mat[2], mat[3], - mat[4], mat[5], mat[6], mat[7], - mat[8], mat[9], mat[10], mat[11], - mat[12], mat[13], mat[14], mat[15]]; - - return { - target: vecToJs(this.target), - position: vecToJs(this.getPosition()), - pitch: this.pitch, - yaw: this.yaw, - zoom: this.zoom, - znear: this.znear, - zfar: this.zfar, - yfov: this.yfov, - xmag: this.xmag, - ymag: this.ymag, - aspectRatio: this.aspectRatio, - viewMatrix: matToJs(this.viewMatrix()), - projectionMatrix: matToJs(this.projectionMatrix()), - } - } - setVerticalFoV(yfov) { this.yfov = yfov; From ec8af56c1800afdf828c8c1f08b38fd40991d936 Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Thu, 21 Jan 2021 16:00:05 +0100 Subject: [PATCH 22/43] disabled log; fixed transmission error --- source/Renderer/renderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/Renderer/renderer.js b/source/Renderer/renderer.js index b9cd7b24..82ff8dba 100644 --- a/source/Renderer/renderer.js +++ b/source/Renderer/renderer.js @@ -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); From aab99cb329c7752b0a0678979c418ba8d0939df2 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 16:02:13 +0100 Subject: [PATCH 23/43] rename zoom to distance --- source/gltf/user_camera.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index 7a6b5292..5b636936 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -13,14 +13,14 @@ class UserCamera extends gltfCamera target = [0, 0, 0], yaw = 0, pitch = 0, - zoom = 1) + distance = 1) { super(); this.target = jsToGl(target); this.yaw = yaw; this.pitch = pitch; - this.zoom = zoom; + this.distance = distance; this.zoomFactor = 1.04; this.orbitSpeed = 1 / 180; this.panSpeed = 1; @@ -39,7 +39,7 @@ class UserCamera extends gltfCamera { // calculate direction from focus to camera (assuming camera is at positive z) // pitch rotates *around* x-axis, yaw rotates *around* y-axis - const direction = vec3.fromValues(0, 0, this.zoom); + const direction = vec3.fromValues(0, 0, this.distance); this.toGlobalOrientation(direction); const position = vec3.create(); @@ -63,7 +63,7 @@ class UserCamera extends gltfCamera this.pitch = vec3.angle(difference, projectedDifference); this.yaw = vec3.angle(projectedDifference, vec3.fromValues(1.0, 0.0, 0.0)); - this.zoom = vec3.length(difference); + this.distance = vec3.length(difference); } setPosition(position) @@ -73,7 +73,8 @@ class UserCamera extends gltfCamera setTarget(target) { - this.lookAt(target, this.getPosition()); + //this.lookAt(target, this.getPosition()); + this.target = target; } setRotation(yaw, pitch) @@ -82,9 +83,9 @@ class UserCamera extends gltfCamera this.pitch = pitch; } - setZoom(zoom) + setZoom(distance) { - this.zoom = zoom; + this.distance = distance; } reset(gltf, sceneIndex) @@ -98,11 +99,11 @@ class UserCamera extends gltfCamera { if (value > 0) { - this.zoom *= this.zoomFactor; + this.distance *= this.zoomFactor; } else { - this.zoom /= this.zoomFactor; + this.distance /= this.zoomFactor; } this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); } @@ -141,7 +142,7 @@ class UserCamera extends gltfCamera this.fitCameraTargetToExtents(this.sceneExtents.min, this.sceneExtents.max); this.fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); - const direction = vec3.fromValues(0, 0, this.zoom); + const direction = vec3.fromValues(0, 0, this.distance); vec3.add(this.getPosition(), this.target, direction); this.fitPanSpeedToScene(this.sceneExtents.min, this.sceneExtents.max); @@ -158,7 +159,7 @@ class UserCamera extends gltfCamera fitZoomToExtents(min, max) { const maxAxisLength = Math.max(max[0] - min[0], max[1] - min[1]); - this.zoom = this.getFittingZoom(maxAxisLength); + this.distance = this.getFittingZoom(maxAxisLength); } fitCameraTargetToExtents(min, max) @@ -171,12 +172,12 @@ class UserCamera extends gltfCamera fitCameraPlanesToExtents(min, max) { - // depends only on scene min/max and the camera zoom + // depends only on scene min/max and the camera distance // Manually increase scene extent just for the camera planes to avoid camera clipping in most situations. const longestDistance = 10 * vec3.distance(min, max); - let zNear = this.zoom - (longestDistance * 0.6); - let zFar = this.zoom + (longestDistance * 0.6); + let zNear = this.distance - (longestDistance * 0.6); + let zFar = this.distance + (longestDistance * 0.6); // minimum near plane value needs to depend on far plane value to avoid z fighting or too large near planes zNear = Math.max(zNear, zFar / MaxNearFarRatio); From a250e2948a84a640a03e2e435e2b1e94a4a5f58f Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Thu, 21 Jan 2021 16:07:15 +0100 Subject: [PATCH 24/43] changing scene changes camera to user camera --- app_web/src/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app_web/src/main.js b/app_web/src/main.js index 0ec3cb77..41a8ba27 100644 --- a/app_web/src/main.js +++ b/app_web/src/main.js @@ -56,6 +56,7 @@ async function main() 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); From 6e5834c844094786895c914f72c13fac0a2d6209 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 16:15:41 +0100 Subject: [PATCH 25/43] check if properties are defined --- source/gltf/camera.js | 22 ++++++++++++++++++---- source/gltf/user_camera.js | 1 - 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/source/gltf/camera.js b/source/gltf/camera.js index 7ae8c89a..58db22c5 100644 --- a/source/gltf/camera.js +++ b/source/gltf/camera.js @@ -176,15 +176,25 @@ class gltfCamera extends GltfObject getDescription(gltf) { const camera = { - "name": this.name, "type": this.type }; + if (this.name != undefined) + { + camera["name"] = this.name; + } + if (this.type === "perspective") { - camera["perspective"]["aspectRatio"] = this.aspectRatio; + if (this.aspectRatio != undefined) + { + camera["perspective"]["aspectRatio"] = this.aspectRatio; + } camera["perspective"]["yfov"] = this.yfov; - camera["perspective"]["zfar"] = this.zfar; + if (this.zfar != undefined) + { + camera["perspective"]["zfar"] = this.zfar; + } camera["perspective"]["ynear"] = this.ynear; } else if (this.type === "orthographic") @@ -198,7 +208,6 @@ class gltfCamera extends GltfObject const mat = this.getViewMatrix(gltf); const node = { - "name": this.name, "camera": 0, "matrix": [mat[0], mat[1], mat[2], mat[3], mat[4], mat[5], mat[6], mat[7], @@ -206,6 +215,11 @@ class gltfCamera extends GltfObject mat[12], mat[13], mat[14], mat[15]] }; + if (this.nodeIndex != undefined && gltf.nodes[this.nodeIndex].name != undefined) + { + node["name"] = gltf.nodes[this.nodeIndex].name; + } + return { "node": node, "camera": camera diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index 5b636936..b1395a47 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -73,7 +73,6 @@ class UserCamera extends gltfCamera setTarget(target) { - //this.lookAt(target, this.getPosition()); this.target = target; } From a3f38da924e6bc973402016f75c78a0420c06279 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 16:27:27 +0100 Subject: [PATCH 26/43] zfar and aspectRatio default to undefined --- source/gltf/camera.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/gltf/camera.js b/source/gltf/camera.js index 58db22c5..8efe7fca 100644 --- a/source/gltf/camera.js +++ b/source/gltf/camera.js @@ -7,9 +7,9 @@ class gltfCamera extends GltfObject constructor( type = "perspective", znear = 0.01, - zfar = 10000.0, + zfar = undefined, yfov = 45.0 * Math.PI / 180.0, - aspectRatio = 16.0 / 9.0, + aspectRatio = undefined, xmag = 1.0, ymag = 1.0, name = undefined, From d704c24d785ca33bf774ffb6545a6a528cf9c9eb Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 16:29:37 +0100 Subject: [PATCH 27/43] input is ignored if non-user camera is selected --- app_web/src/main.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/app_web/src/main.js b/app_web/src/main.js index 1c833e74..f995fec4 100644 --- a/app_web/src/main.js +++ b/app_web/src/main.js @@ -164,15 +164,24 @@ async function main() input.setupCanvasInputBindings(canvas); input.onRotate = (deltaX, deltaY) => { - state.userCamera.orbit(deltaX, deltaY); + if (state.cameraIndex === undefined) + { + state.userCamera.orbit(deltaX, deltaY); + } }; input.onPan = (deltaX, deltaY) => { - state.userCamera.pan(deltaX, deltaY); + if (state.cameraIndex === undefined) + { + state.userCamera.pan(deltaX, deltaY); + } }; input.onZoom = (delta) => { - state.userCamera.zoomBy(delta); + if (state.cameraIndex === undefined) + { + state.userCamera.zoomBy(delta); + } }; await view.startRendering(state, canvas); From a1177c799f9a6c93617a77b580ad1bd673b3c985 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 16:44:02 +0100 Subject: [PATCH 28/43] reset user camera when changing scene --- source/gltf/user_camera.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index b1395a47..9bbc71e4 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -87,13 +87,6 @@ class UserCamera extends gltfCamera this.distance = distance; } - reset(gltf, sceneIndex) - { - this.yaw = 0; - this.pitch = 0; - this.fitViewToScene(gltf, sceneIndex, true); - } - zoomBy(value) { if (value > 0) @@ -135,6 +128,14 @@ class UserCamera extends gltfCamera this.panSpeed = longestDistance / PanSpeedDenominator; } + reset() + { + this.yaw = 0; + this.pitch = 0; + fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); + fitCameraTargetToExtents(this.sceneExtents.min, this.sceneExtents.max); + } + fitViewToScene(gltf, sceneIndex) { getSceneExtents(gltf, sceneIndex, this.sceneExtents.min, this.sceneExtents.max); @@ -146,6 +147,9 @@ class UserCamera extends gltfCamera this.fitPanSpeedToScene(this.sceneExtents.min, this.sceneExtents.max); this.fitCameraPlanesToExtents(this.sceneExtents.min, this.sceneExtents.max); + + this.yaw = 0; + this.pitch = 0; } // Converts orientation from camera space to global space From 91112814919f0b625294e1805d5aeb74e4a6e4e6 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 16:53:51 +0100 Subject: [PATCH 29/43] fix naming --- source/gltf/user_camera.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index 9bbc71e4..a1ac667c 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -132,7 +132,7 @@ class UserCamera extends gltfCamera { this.yaw = 0; this.pitch = 0; - fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); + fitDistanceToExtents(this.sceneExtents.min, this.sceneExtents.max); fitCameraTargetToExtents(this.sceneExtents.min, this.sceneExtents.max); } @@ -140,7 +140,7 @@ class UserCamera extends gltfCamera { getSceneExtents(gltf, sceneIndex, this.sceneExtents.min, this.sceneExtents.max); this.fitCameraTargetToExtents(this.sceneExtents.min, this.sceneExtents.max); - this.fitZoomToExtents(this.sceneExtents.min, this.sceneExtents.max); + this.fitDistanceToExtents(this.sceneExtents.min, this.sceneExtents.max); const direction = vec3.fromValues(0, 0, this.distance); vec3.add(this.getPosition(), this.target, direction); @@ -159,10 +159,10 @@ class UserCamera extends gltfCamera vec3.rotateY(vector, vector, VecZero, -this.yaw); } - fitZoomToExtents(min, max) + fitDistanceToExtents(min, max) { const maxAxisLength = Math.max(max[0] - min[0], max[1] - min[1]); - this.distance = this.getFittingZoom(maxAxisLength); + this.distance = this.getFittingDistance(maxAxisLength); } fitCameraTargetToExtents(min, max) @@ -189,7 +189,7 @@ class UserCamera extends gltfCamera this.zfar = zFar; } - getFittingZoom(axisLength) + getFittingDistance(axisLength) { const yfov = this.yfov; const xfov = this.yfov * this.aspectRatio; From 5ec05ad1a191812e148a206af2cdf33ad56c6183 Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 17:07:42 +0100 Subject: [PATCH 30/43] inline function --- source/gltf/user_camera.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/source/gltf/user_camera.js b/source/gltf/user_camera.js index a1ac667c..3bcf317e 100644 --- a/source/gltf/user_camera.js +++ b/source/gltf/user_camera.js @@ -162,7 +162,13 @@ class UserCamera extends gltfCamera fitDistanceToExtents(min, max) { const maxAxisLength = Math.max(max[0] - min[0], max[1] - min[1]); - this.distance = this.getFittingDistance(maxAxisLength); + const yfov = this.yfov; + const xfov = this.yfov * this.aspectRatio; + + const yZoom = maxAxisLength / 2 / Math.tan(yfov / 2); + const xZoom = maxAxisLength / 2 / Math.tan(xfov / 2); + + this.distance = Math.max(xZoom, yZoom); } fitCameraTargetToExtents(min, max) @@ -188,17 +194,6 @@ class UserCamera extends gltfCamera this.znear = zNear; this.zfar = zFar; } - - getFittingDistance(axisLength) - { - const yfov = this.yfov; - const xfov = this.yfov * this.aspectRatio; - - const yZoom = axisLength / 2 / Math.tan(yfov / 2); - const xZoom = axisLength / 2 / Math.tan(xfov / 2); - - return Math.max(xZoom, yZoom); - } } export { UserCamera }; From cbd9f97f20e402f4d10af233f48629625e3e796d Mon Sep 17 00:00:00 2001 From: Jim Eckerlein Date: Thu, 21 Jan 2021 17:15:03 +0100 Subject: [PATCH 31/43] fix default values, initialize aspect ratio of user camera --- app_web/src/main.js | 1 + source/gltf/camera.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app_web/src/main.js b/app_web/src/main.js index f995fec4..6e48dcb4 100644 --- a/app_web/src/main.js +++ b/app_web/src/main.js @@ -41,6 +41,7 @@ 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.animationIndices = [0]; state.animationTimer.start(); diff --git a/source/gltf/camera.js b/source/gltf/camera.js index 8efe7fca..fd274ba8 100644 --- a/source/gltf/camera.js +++ b/source/gltf/camera.js @@ -7,7 +7,7 @@ class gltfCamera extends GltfObject constructor( type = "perspective", znear = 0.01, - zfar = undefined, + zfar = Infinity, yfov = 45.0 * Math.PI / 180.0, aspectRatio = undefined, xmag = 1.0, @@ -191,7 +191,7 @@ class gltfCamera extends GltfObject camera["perspective"]["aspectRatio"] = this.aspectRatio; } camera["perspective"]["yfov"] = this.yfov; - if (this.zfar != undefined) + if (this.zfar != Infinity) { camera["perspective"]["zfar"] = this.zfar; } From a095af6cb31912c0579a5174a4ad4c3e604c6084 Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Fri, 22 Jan 2021 12:14:49 +0100 Subject: [PATCH 32/43] variants now always in their own line --- app_web/index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app_web/index.html b/app_web/index.html index e4bbd9af..0777459e 100644 --- a/app_web/index.html +++ b/app_web/index.html @@ -146,10 +146,11 @@

Models

 - - {{ item.title }} - + + + {{ item.title }} + + From 67128e7100168eb099874d2b86b2a2d39a4462af Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Fri, 22 Jan 2021 12:22:51 +0100 Subject: [PATCH 33/43] statistics now work if primitive has no indices --- source/GltfView/gltf_view.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/source/GltfView/gltf_view.js b/source/GltfView/gltf_view.js index 5c1c4989..113b8f30 100644 --- a/source/GltfView/gltf_view.js +++ b/source/GltfView/gltf_view.js @@ -28,12 +28,12 @@ class GltfView } canvas.height = canvas.clientHeight; } - + updateViewport(width, height) { this.renderer.resize(width, height); } - + renderFrame(state) { @@ -92,7 +92,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; From 752bff1f2835348e6423d159dca86d7f27f8d5cd Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Fri, 22 Jan 2021 13:06:58 +0100 Subject: [PATCH 34/43] made tab content scrollable --- app_web/index.html | 265 ++++++++++++++++++++++++--------------------- app_web/ui.css | 20 +++- 2 files changed, 158 insertions(+), 127 deletions(-) diff --git a/app_web/index.html b/app_web/index.html index e4bbd9af..468c1317 100644 --- a/app_web/index.html +++ b/app_web/index.html @@ -106,123 +106,137 @@
diff --git a/app_web/ui.css b/app_web/ui.css index 13e08b69..2f166745 100644 --- a/app_web/ui.css +++ b/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 { @@ -261,8 +277,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; } From 13a6bf6c67c0e39cd2eea21bf32726bf3e46fb20 Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Fri, 22 Jan 2021 15:15:58 +0100 Subject: [PATCH 35/43] turned scene change into multicasts --- app_web/src/logic/uimodel.js | 7 ++++--- app_web/src/main.js | 10 ++++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js index da9e77d7..f29a9ff9 100644 --- a/app_web/src/logic/uimodel.js +++ b/app_web/src/logic/uimodel.js @@ -1,5 +1,5 @@ -import { bindCallback, fromEvent, merge } from 'rxjs'; -import { map, filter, startWith, pluck } from 'rxjs/operators'; +import { Subject, fromEvent, merge } from 'rxjs'; +import { map, filter, startWith, pluck, multicast } from 'rxjs/operators'; import { glTF, ToneMaps, DebugOutput } from 'gltf-sample-viewer'; import { gltfInput } from '../input.js'; @@ -26,7 +26,8 @@ class UIModel map( value => ({mainFile: value, additionalFiles: undefined})), ); this.flavour = app.flavourChanged$.pipe(pluck("event", "msg")); // TODO gltfModelPathProvider needs to be changed to accept flavours explicitely - this.scene = app.sceneChanged$.pipe(pluck("event", "msg")); + const sceneSubject = new Subject(); + this.scene = app.sceneChanged$.pipe(pluck("event", "msg"), multicast(sceneSubject)); this.camera = app.cameraChanged$.pipe(pluck("event", "msg")); this.environment = app.environmentChanged$.pipe(pluck("event", "msg")); this.environmentRotation = app.environmentRotationChanged$.pipe(pluck("event", "msg")); diff --git a/app_web/src/main.js b/app_web/src/main.js index ad3a5b8f..cfc8b233 100644 --- a/app_web/src/main.js +++ b/app_web/src/main.js @@ -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) => { @@ -50,10 +50,10 @@ async function main() ); }), // 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; @@ -61,7 +61,9 @@ async function main() scene.applyTransformHierarchy(state.gltf); computePrimitiveCentroids(state.gltf); state.userCamera.fitViewToScene(state.gltf, state.sceneIndex); - })); + }), + multicast(sceneChangedSubject) + ); const statisticsUpdateObservableTemp = merge( gltfLoadedMulticast, From 209b7efb9c25ad78fdc97c233e1c67087dd983e2 Mon Sep 17 00:00:00 2001 From: Mathias Kanzler Date: Fri, 22 Jan 2021 15:37:43 +0100 Subject: [PATCH 36/43] convert clearcoat normal to correct space and apply clearcoat normal scaling --- source/Renderer/shaders/pbr.frag | 22 ++++++++++++++++------ source/Renderer/shaders/textures.glsl | 1 + source/gltf/material.js | 2 ++ 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/source/Renderer/shaders/pbr.frag b/source/Renderer/shaders/pbr.frag index c6b35884..8ca020fd 100644 --- a/source/Renderer/shaders/pbr.frag +++ b/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); diff --git a/source/Renderer/shaders/textures.glsl b/source/Renderer/shaders/textures.glsl index 43be573e..117529b4 100644 --- a/source/Renderer/shaders/textures.glsl +++ b/source/Renderer/shaders/textures.glsl @@ -57,6 +57,7 @@ uniform mat3 u_ClearcoatRoughnessUVTransform; uniform sampler2D u_ClearcoatNormalSampler; uniform int u_ClearcoatNormalUVSet; uniform mat3 u_ClearcoatNormalUVTransform; +uniform float u_ClearcoatNormalScale; // Sheen Material uniform sampler2D u_SheenColorSampler; diff --git a/source/gltf/material.js b/source/gltf/material.js index 9208f2c6..4f7d8988 100644 --- a/source/gltf/material.js +++ b/source/gltf/material.js @@ -319,6 +319,8 @@ class gltfMaterial extends GltfObject this.textures.push(this.clearcoatNormalTexture); this.defines.push("HAS_CLEARCOAT_NORMAL_MAP 1"); this.properties.set("u_ClearcoatNormalUVSet", this.clearcoatNormalTexture.texCoord); + this.properties.set("u_ClearcoatNormalScale", this.clearcoatNormalTexture.scale); + } this.properties.set("u_ClearcoatFactor", clearcoatFactor); this.properties.set("u_ClearcoatRoughnessFactor", clearcoatRoughnessFactor); From 6513adfc4aab60d6a7a084d134b31b9a4bcd7736 Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Fri, 22 Jan 2021 16:01:54 +0100 Subject: [PATCH 37/43] replaced ui with width parameter --- app_web/src/main.js | 2 +- source/GltfView/gltf_view.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app_web/src/main.js b/app_web/src/main.js index ad3a5b8f..68b45f16 100644 --- a/app_web/src/main.js +++ b/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, ui.getBoundingClientRect().width); const state = view.createState(); initDracoLib(); diff --git a/source/GltfView/gltf_view.js b/source/GltfView/gltf_view.js index 5c1c4989..3ce4b737 100644 --- a/source/GltfView/gltf_view.js +++ b/source/GltfView/gltf_view.js @@ -4,10 +4,10 @@ import { GL } from '../Renderer/webgl.js'; class GltfView { - constructor(context, ui) + constructor(context, uiWidth = 0) { - this.ui = ui; this.context = context; + this.uiWidth = uiWidth; this.renderer = new gltfRenderer(this.context); } @@ -18,9 +18,9 @@ class GltfView updateCanvas(canvas) { - if(this.ui !== undefined) + if(this.uiWidth !== undefined) { - canvas.width = window.innerWidth - this.ui.getBoundingClientRect().width; + canvas.width = window.innerWidth - this.uiWidth; } else { @@ -28,12 +28,12 @@ class GltfView } canvas.height = canvas.clientHeight; } - + updateViewport(width, height) { this.renderer.resize(width, height); } - + renderFrame(state) { From 666be608065172c51d0e44046e37e5aa9f54efd7 Mon Sep 17 00:00:00 2001 From: Phillip Hohenester Date: Fri, 22 Jan 2021 16:08:15 +0100 Subject: [PATCH 38/43] replaced call with callback --- app_web/src/main.js | 3 ++- source/GltfView/gltf_view.js | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app_web/src/main.js b/app_web/src/main.js index 68b45f16..2c292b87 100644 --- a/app_web/src/main.js +++ b/app_web/src/main.js @@ -13,7 +13,8 @@ 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.getBoundingClientRect().width); + const uiSizeCallback = function() { return window.innerWidth - ui.getBoundingClientRect().width; } + const view = new GltfView(context, uiSizeCallback); const state = view.createState(); initDracoLib(); diff --git a/source/GltfView/gltf_view.js b/source/GltfView/gltf_view.js index 3ce4b737..a5710414 100644 --- a/source/GltfView/gltf_view.js +++ b/source/GltfView/gltf_view.js @@ -4,10 +4,10 @@ import { GL } from '../Renderer/webgl.js'; class GltfView { - constructor(context, uiWidth = 0) + constructor(context, canvasWithUIDimensionsCallback) { this.context = context; - this.uiWidth = uiWidth; + this.canvasWithUIDimensionsCallback = canvasWithUIDimensionsCallback; this.renderer = new gltfRenderer(this.context); } @@ -18,9 +18,9 @@ class GltfView updateCanvas(canvas) { - if(this.uiWidth !== undefined) + if(this.canvasWithUIDimensionsCallback !== undefined) { - canvas.width = window.innerWidth - this.uiWidth; + canvas.width = this.canvasWithUIDimensionsCallback(); } else { From dee81d562e884822c9c4a82b2f1b937a01b42329 Mon Sep 17 00:00:00 2001 From: Moritz Willy Becher Date: Mon, 25 Jan 2021 11:17:59 +0100 Subject: [PATCH 39/43] made models tab item scrollable --- app_web/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app_web/index.html b/app_web/index.html index 062d9ffb..c99dce8f 100644 --- a/app_web/index.html +++ b/app_web/index.html @@ -106,7 +106,7 @@