- npm updates

- filtering via ShaderMaterial

src/js/clip/Selection.js

@@ -15,8 +15,10 @@ export class Selection {
     vertices;
     touchMeshes; displayMeshes; meshGeometries; selectables;
     faces;
+    map;
 
-    constructor(low, high) {
+    constructor(low, high, map) {
+        this.map = map;
         this.limitLow = low;
         this.limitHigh = high;
         this.limit = {
@@ -122,7 +124,22 @@ export class Selection {
     setUniforms() {
         let unif = uniforms.clipping;
         unif.clippingLow.value.copy(this.limitLow);
-        unif.clippingHigh.value.copy(this.limitHigh);
+        unif.clippingHigh.value.copy(this.limitHigh);   
+    //    let test =  this.map.layers[20];
+    
+      
+
+
+    if ( this.map.layers){
+       for (const [key, layer] of   Object.entries(this.map.layers)) {
+        if (layer.uniforms) {
+            layer.uniforms.clipping.clippingLow.value.copy(this.limitLow); 
+            layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh); 
+           }
+       }
+    }
+    
+       
     }
 
     setValue(axis, value) {

src/js/clip/material.js

@@ -11,6 +11,14 @@ let capMaterial = new ShaderMaterial({
     fragmentShader: shader.fragment
 });
 
+let frontStencilMaterial = new ShaderMaterial( {
+    uniforms:      uniforms.clipping,
+    vertexShader:   shader.vertexClipping,
+    fragmentShader: shader.fragmentClippingFront,
+    // colorWrite: false,
+    // depthWrite: false,
+} );
+
 let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true });
 let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 });
 // yellow select color
@@ -24,6 +32,7 @@ let Invisible = new ShaderMaterial({
 
 export {
     capMaterial,
+    frontStencilMaterial,
     BoxBackFace,
     BoxWireframe,
     BoxWireActive,

src/js/clip/shader.js

@@ -13,6 +13,25 @@ let shader = {
 			\
 		}',
 
+	vertexClipping: '\
+		uniform vec3 color;\
+		uniform vec3 clippingLow;\
+		uniform vec3 clippingHigh;\
+		\
+		varying vec3 pixelNormal;\
+		varying vec4 worldPosition;\
+		varying vec3 camPosition;\
+		\
+		void main() {\
+			\
+			pixelNormal = normal;\
+			worldPosition = modelMatrix * vec4( position, 1.0 );\
+			camPosition = cameraPosition;\
+			\
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
+			\
+		}',
+
 	fragment: '\
 		uniform vec3 color;\
 		varying vec3 pixelNormal;\
@@ -29,6 +48,43 @@ let shader = {
 			\
 		}',
 
+	fragmentClippingFront: '\
+		uniform vec3 color;\
+		uniform vec3 clippingLow;\
+		uniform vec3 clippingHigh;\
+		\
+		varying vec3 pixelNormal;\
+		varying vec4 worldPosition;\
+		varying vec3 camPosition;\
+		\
+		void main( void ) {\
+			\
+			float shade = (\
+				  3.0 * pow ( abs ( pixelNormal.y ), 2.0 )\
+				+ 2.0 * pow ( abs ( pixelNormal.z ), 2.0 )\
+				+ 1.0 * pow ( abs ( pixelNormal.x ), 2.0 )\
+			) / 3.0;\
+			\
+			if (\
+				   worldPosition.x < clippingLow.x  && camPosition.x < clippingLow.x\
+				|| worldPosition.x > clippingHigh.x && camPosition.x > clippingHigh.x\
+				|| worldPosition.y < clippingLow.y  && camPosition.y < clippingLow.y\
+				|| worldPosition.y > clippingHigh.y && camPosition.y > clippingHigh.y\
+				|| worldPosition.z < clippingLow.z  && camPosition.z < clippingLow.z\
+				|| worldPosition.z > clippingHigh.z && camPosition.z > clippingHigh.z\
+			) {\
+				\
+				discard;\
+				\
+			} else {\
+				\
+				gl_FragColor = vec4( color * shade, 1.0 );\
+				\
+			}\
+			\
+		}',
+
+
 	invisibleVertexShader: '\
 		void main() {\
 			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\

src/js/layer/TinLayer.js

@@ -8,6 +8,11 @@ import { Layer } from './Layer';
 import { BitStream } from '../lib/bitstream';
 import { Plane } from 'three/src/math/Plane';
 import { Vector3 } from 'three/src/math/Vector3';
+import * as material from '../clip/material';
+import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
+import { uniforms } from "../clip/uniforms";
+import { shader } from '../clip/shader';
+import { Color } from 'three/src/math/Color';
 
 const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
 const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
@@ -85,16 +90,33 @@ class TinLayer extends Layer {
         this.yLocalPlane = new Plane(new Vector3(0, 1, 0), this._map.y.max);
 
         let color = parseInt(this.color, 16);
-        this.material = new MeshStandardMaterial({
+        // this.material = new MeshStandardMaterial({
-            color: color,
+        //     color: color,
-            metalness: 0.1,
+        //     metalness: 0.1,
-            roughness: 0.75,
+        //     roughness: 0.75,
-            flatShading: true,
+        //     flatShading: true,
-            side: DoubleSide,
+        //     side: DoubleSide,
-            clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
+        //     clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
-            clipIntersection: false,
+        //     clipIntersection: false,
-            clipShadows: true,
+        //     clipShadows: true,
-        });
+        // });
+        // this.materialsArray.push(this.material);
+        let uniforms = this.uniforms = {
+
+            clipping: {
+                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) }
+            }        
+        };
+       
+        this.material = new ShaderMaterial( {
+            uniforms:      uniforms.clipping,
+            vertexShader:   shader.vertexClipping,
+            fragmentShader: shader.fragmentClippingFront,
+            // colorWrite: false,
+            // depthWrite: false,
+        } );
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);
         // mesh.userData.layerId = this.index;

src/js/main.js

@@ -168,18 +168,28 @@ class Application {
         // create map 
         // let map = this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20');
 
-        this.selection = new Selection(
+        // this.selection = new Selection(
-            // new Vector3(-7, -14, -14),
+        //     // new Vector3(-7, -14, -14),
-            // new Vector3(14, 9, 3)
+        //     // new Vector3(14, 9, 3)
-            new Vector3(x.min, y.min, z.min),
+        //     new Vector3(x.min, y.min, z.min),
-            new Vector3(x.max, y.max, z.max)
+        //     new Vector3(x.max, y.max, z.max)
-        );
+        // );
-        new Picking(size, center, this);
+        // new Picking(size, center, this);
 
         let map = this.map = await Map.build(x, y, z, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=20');
         this.mapTitle = document.querySelector('#map-title');
         this.mapTitle.innerHTML += map.title;
 
+        this.selection = new Selection(
+            // new Vector3(-7, -14, -14),
+            // new Vector3(14, 9, 3)
+            new Vector3(x.min, y.min, z.min),
+            new Vector3(x.max, y.max, z.max),
+            map            
+        );
+        
+        new Picking(size, center, this);
+        
         // let boxLayer = new BoxLayer({ 
         //     width: 10000, height: 10000, depth: 10000, name: 'center-box', color: 800080 , center: center
         // });
@@ -251,6 +261,7 @@ class Application {
         this.capsScene.add(this.selection.boxMesh);
         this.scene.add(this.selection.displayMeshes);
         this.scene.add(this.selection.touchMeshes);
+        this.selection.setUniforms();
 
         // domEvent.on(window, 'resize', this.onWindowResize, this);
         // domEvent.on(window, 'keydown', this.keydown, this);