From 87496903e653bfb94b1bdb4983188bc4dd0ab7da Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 11 Mar 2021 09:45:05 +0100 Subject: [PATCH] - bug: exaggeration slicing box - npm updates --- package-lock.json | 76 +++++++++++++-------------- src/js/clip/MyMeshStandardMaterial.js | 1 + src/js/clip/Selection.js | 13 +++-- src/js/clip/shader.js | 19 +++++-- src/js/layer/TinLayer.js | 15 +++++- 5 files changed, 75 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b4e5d0..8f77cbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1370,9 +1370,9 @@ "peer": true }, "node_modules/@types/node": { - "version": "14.14.32", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz", - "integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==", + "version": "14.14.33", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz", + "integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==", "dev": true }, "node_modules/@types/normalize-package-data": { @@ -1976,9 +1976,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001197", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001197.tgz", - "integrity": "sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw==", + "version": "1.0.30001198", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz", + "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA==", "dev": true }, "node_modules/caseless": { @@ -2339,16 +2339,16 @@ } }, "node_modules/css-loader": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.1.tgz", - "integrity": "sha512-5FfhpjwtuRgxqmusDidowqmLlcb+1HgnEDMsi2JhiUrZUcoc+cqw+mUtMIF/+OfeMYaaFCLYp1TaIt9H6I/fKA==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.2.tgz", + "integrity": "sha512-T7vTXHSx0KrVEg/xjcl7G01RcVXpcw4OELwDPvkr7izQNny85A84dK3dqrczuEfBcu7Yg7mdTjJLSTibRUoRZg==", "dev": true, "dependencies": { "camelcase": "^6.2.0", "cssesc": "^3.0.0", "icss-utils": "^5.1.0", "loader-utils": "^2.0.0", - "postcss": "^8.2.6", + "postcss": "^8.2.8", "postcss-modules-extract-imports": "^3.0.0", "postcss-modules-local-by-default": "^4.0.0", "postcss-modules-scope": "^3.0.0", @@ -2578,9 +2578,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.683", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz", - "integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A==", + "version": "1.3.685", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz", + "integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ==", "dev": true }, "node_modules/emoji-regex": { @@ -4499,9 +4499,9 @@ } }, "node_modules/postcss": { - "version": "8.2.7", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz", - "integrity": "sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==", + "version": "8.2.8", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz", + "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==", "dev": true, "dependencies": { "colorette": "^1.2.2", @@ -6527,9 +6527,9 @@ } }, "node_modules/yargs-parser": { - "version": "20.2.6", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.6.tgz", - "integrity": "sha512-AP1+fQIWSM/sMiET8fyayjx/J+JmTPt2Mr0FkrgqB4todtfa53sOsrSAcIrJRD5XS20bKUwaDIuMkWKCEiQLKA==", + "version": "20.2.7", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz", + "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==", "dev": true, "engines": { "node": ">=10" @@ -7701,9 +7701,9 @@ "peer": true }, "@types/node": { - "version": "14.14.32", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz", - "integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==", + "version": "14.14.33", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz", + "integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==", "dev": true }, "@types/normalize-package-data": { @@ -8200,9 +8200,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001197", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001197.tgz", - "integrity": "sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw==", + "version": "1.0.30001198", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz", + "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA==", "dev": true }, "caseless": { @@ -8506,16 +8506,16 @@ } }, "css-loader": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.1.tgz", - "integrity": "sha512-5FfhpjwtuRgxqmusDidowqmLlcb+1HgnEDMsi2JhiUrZUcoc+cqw+mUtMIF/+OfeMYaaFCLYp1TaIt9H6I/fKA==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.2.tgz", + "integrity": "sha512-T7vTXHSx0KrVEg/xjcl7G01RcVXpcw4OELwDPvkr7izQNny85A84dK3dqrczuEfBcu7Yg7mdTjJLSTibRUoRZg==", "dev": true, "requires": { "camelcase": "^6.2.0", "cssesc": "^3.0.0", "icss-utils": "^5.1.0", "loader-utils": "^2.0.0", - "postcss": "^8.2.6", + "postcss": "^8.2.8", "postcss-modules-extract-imports": "^3.0.0", "postcss-modules-local-by-default": "^4.0.0", "postcss-modules-scope": "^3.0.0", @@ -8667,9 +8667,9 @@ } }, "electron-to-chromium": { - "version": "1.3.683", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz", - "integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A==", + "version": "1.3.685", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz", + "integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ==", "dev": true }, "emoji-regex": { @@ -10146,9 +10146,9 @@ } }, "postcss": { - "version": "8.2.7", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz", - "integrity": "sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==", + "version": "8.2.8", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz", + "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==", "dev": true, "requires": { "colorette": "^1.2.2", @@ -11729,9 +11729,9 @@ } }, "yargs-parser": { - "version": "20.2.6", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.6.tgz", - "integrity": "sha512-AP1+fQIWSM/sMiET8fyayjx/J+JmTPt2Mr0FkrgqB4todtfa53sOsrSAcIrJRD5XS20bKUwaDIuMkWKCEiQLKA==", + "version": "20.2.7", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz", + "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==", "dev": true }, "yocto-queue": { diff --git a/src/js/clip/MyMeshStandardMaterial.js b/src/js/clip/MyMeshStandardMaterial.js index 75a11d6..4b6fef0 100644 --- a/src/js/clip/MyMeshStandardMaterial.js +++ b/src/js/clip/MyMeshStandardMaterial.js @@ -12,6 +12,7 @@ export class MyMeshStandardMaterial extends MeshStandardMaterial { m_shader.uniforms.clippingLow = this.uniforms.clippingLow; // { type: "v3", value: new Vector3(0, 0, 0) }; m_shader.uniforms.clippingHigh = this.uniforms.clippingHigh; // { type: "v3", value: new Vector3(0, 0, 0) }; + m_shader.uniforms.clippingScale = this.uniforms.clippingScale; // { type: "f", value: 1.0 }; diff --git a/src/js/clip/Selection.js b/src/js/clip/Selection.js index 3a9fb43..c2de665 100644 --- a/src/js/clip/Selection.js +++ b/src/js/clip/Selection.js @@ -38,7 +38,7 @@ export class Selection extends Layer { z1: low.z - 5000, z2: high.z + 5000 } - this.scale = 1; + this.scale = 1.0; this.box = new BoxGeometry(1, 1, 1); this.boxMesh = new Mesh(this.box, material.capMaterial); @@ -113,10 +113,10 @@ export class Selection extends Layer { scaleZ(z) { this.scale = z; - // this.boxMesh.scale.z = z; - // this.displayMeshes.scale.z = z; - this.displayMeshes.scale.set(1, 1, z); - // this.touchMeshes.scale.z = z; + this.boxMesh.scale.z = z; + this.displayMeshes.scale.z = z; + this.touchMeshes.scale.z = z; + this.setUniforms(); } updateVertices() { @@ -172,8 +172,11 @@ export class Selection extends Layer { if (this.map.layers) { for (const [key, layer] of Object.entries(this.map.layers)) { if (layer.uniforms) { + let scale = Number(this.scale); layer.uniforms.clipping.clippingLow.value.copy(this.limitLow); layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh); + layer.uniforms.clipping.clippingScale.value = scale; + } } } diff --git a/src/js/clip/shader.js b/src/js/clip/shader.js index e07ab88..64cf6f7 100644 --- a/src/js/clip/shader.js +++ b/src/js/clip/shader.js @@ -131,10 +131,11 @@ let shader = { vertexMeshStandard: ` #define STANDARD - + uniform float scale; varying vec3 vViewPosition; varying vec4 worldPosition; + #include #include #include @@ -170,14 +171,20 @@ let shader = { #include vViewPosition = - mvPosition.xyz; - worldPosition = modelMatrix * vec4( position, 1.0 ); + // position.z = position.z * scale; + worldPosition = modelMatrix * vec4( position, 1.0 ); + #include #include #include }`, fragmentClippingMeshStandard: ` + #ifdef GL_ES + precision highp float; + #endif + #define STANDARD uniform vec3 diffuse; @@ -186,9 +193,11 @@ let shader = { uniform float metalness; uniform float opacity; + varying vec3 vViewPosition; uniform vec3 clippingLow; - uniform vec3 clippingHigh; + uniform vec3 clippingHigh; + uniform float clippingScale; varying vec4 worldPosition; #include @@ -266,8 +275,8 @@ let shader = { || worldPosition.x > clippingHigh.x || worldPosition.y < clippingLow.y || worldPosition.y > clippingHigh.y - || worldPosition.z < clippingLow.z - || worldPosition.z > clippingHigh.z + || (worldPosition.z) < (clippingLow.z * clippingScale) + || (worldPosition.z) > (clippingHigh.z * clippingScale) ) { discard; } else { diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.js index 5676e00..12ce2ab 100644 --- a/src/js/layer/TinLayer.js +++ b/src/js/layer/TinLayer.js @@ -8,6 +8,7 @@ import { Plane } from 'three/src/math/Plane'; import { Vector3 } from 'three/src/math/Vector3'; import { Color } from 'three/src/math/Color'; import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial'; +import { Object3D } from 'three/src/core/Object3D'; const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/'; @@ -29,6 +30,7 @@ class TinLayer extends Layer { this.queryableObjects = []; this.borderVisible = false; + this.scale = 1; } setWireframeMode(wireframe) { @@ -46,7 +48,17 @@ class TinLayer extends Layer { } scaleZ(z) { + this.scale = z; this.mainMesh.scale.z = z; + // let highObject = new Object3D(); + // highObject.position.copy(this.uniforms.clipping.clippingHigh.value); + // let lowObject = new Object3D(); + // lowObject.position.copy(this.uniforms.clipping.clippingLow.value); + // highObject.scale.z =z; + // lowObject.scale.z = z; + // this.uniforms.clipping.clippingHigh.value.z = highObject.position.z; + // this.uniforms.clipping.clippingLow.value.z = lowObject.position.z; + // this.uniforms.clipping.scale.value = z; } async onAdd(map) { @@ -95,6 +107,7 @@ class TinLayer extends Layer { let uniforms = this.uniforms = { clipping: { + clippingScale: { type: "f", value: 1.0 }, color: { type: "c", value: new Color(color) }, clippingLow: { type: "v3", value: new Vector3(0, 0, 0) }, clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) } @@ -103,7 +116,7 @@ class TinLayer extends Layer { this.material = new MyMeshStandardMaterial({ color: color, metalness: 0.1, - roughness: 0.75, + roughness: 0.75, flatShading: true, side: DoubleSide, clippingPlanes: [this.xLocalPlane, this.yLocalPlane],