- not set wireframe mode for GridLayer.js

- ShaderMaterial for DemLayer.js (for clipping)
- new icon for basemap selection
- shader.js: adaptions for clipping SahderMaterial with opacity and texture map
- small formating corrections in TinLayer.js and Selection.js

src/js/clip/Selection.js

@@ -175,7 +175,6 @@ export class Selection extends Layer {
                     layer.uniforms.clipping.clippingLow.value.copy(this.limitLow);
                     layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh);
                     layer.uniforms.clipping.clippingScale.value = scale;
-                    
                 }
             }
         }

src/js/clip/shader.js

@@ -25,8 +25,10 @@ let shader = {
 		varying vec3 camPosition;
 		varying vec3 vNormal;
 		varying vec3 vPosition;
+		varying vec2 vUv;
 		
 		void main() {
+			vUv = uv;
 			vec4 vPos = modelViewMatrix * vec4( position, 1.0 );
 			vPosition = vPos.xyz;
 
@@ -86,13 +88,17 @@ let shader = {
 		}`,
 
 	fragmentClippingFront: `
+		uniform sampler2D map;
 		uniform vec3 color;
 		uniform vec3 clippingLow;
 		uniform vec3 clippingHigh;
+		uniform float clippingScale;
+		uniform float percent;
 		
 		varying vec3 pixelNormal;
 		varying vec4 worldPosition;
 		varying vec3 camPosition;
+		varying vec2 vUv;
 		
 		void main( void ) {
 			
@@ -115,15 +121,17 @@ let shader = {
 				 || worldPosition.x > clippingHigh.x 
 				 || worldPosition.y < clippingLow.y  
 				 || worldPosition.y > clippingHigh.y
-				 || worldPosition.z < clippingLow.z  
+				 || worldPosition.z < (clippingLow.z * clippingScale)
-				 || worldPosition.z > clippingHigh.z 
+				 || worldPosition.z >  (clippingHigh.z * clippingScale)
 			 ) {
 				
 				discard;
 				
 			} else {
 				
-				gl_FragColor = vec4( color * shade, 1.0 );
+				//gl_FragColor = vec4( color * shade, 1.0 );
+				gl_FragColor = texture2D(map, vUv);
+				gl_FragColor.a = percent;
 				
 			}
 			

src/js/controls/BasemapControl.css

@@ -2,16 +2,18 @@
 .gba-control-basemap-toggle {
     width: 30px;
       height: 30px;
+      border: 1px solid #bbb;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       cursor: pointer;
-      border-radius: 5px;
+      border-radius: 4px;
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABLFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmVlZWWlpaXl5eYmJjT09P///+ZmZmdnZ2qqqq3t7fOzs7Pz8/Q0NDR0dHS0tKTk5PU1NTV1dWUlJTKysrMzMzNzc2kpKSlpaWpqambm5uvr6+xsbGioqK+vr7W1tbh4eHi4uLw8PD29vb4+Pj7+/v8/PygoKDY2NjIyMiurq6SkpKwsLCjo6OysrK0tLS1tbW2tracnJy4uLjLy8vZ2dna2trc3Nzf39+6urq8vLzj4+Pl5eXm5ubo6Ojp6enq6uqRkZHz8/P19fW/v7/39/fAwMDCwsKnp6f9/f3+/v6enp7FxcXGxsaampqfn5/Dw8PhTh9TAAAAFHRSTlMAAk9hdXZ+t8fJytPY3N/i7O3v8vSJ2KIAAAFdSURBVHhehZPlcuswEEadpk0Z0orNGGSGMjMz9973f4fGkI7G47rnlzRn9WlntBISqcWVX5hLCsI4i2FMWIjTk8JynJ4R0vwWOQ7i91O8RmZVXRVNHKmxKa62KW3VmIl5HUj20KIeVzJ0QtqB8jX9oVF2AKcBqJxTnrcjyYSBho50TMP0SN5ErsZFu0cjeMzmsasVGk3vCbrhwMsO0yWbwG8NOJVG+ORh0YSjztFtf9Dm7Z36tY6DzjHon6qq0eyM5P2JpuV29iD29L9dxTZ0TSGXXVd2mrqi64Z9UBE9vW/buoum2Dev3QtD0T3qZAN54S//CfEL1EFd0bylZdSqfjiDSPq0ggJfEvJcgOjnSSArZ4b3BxDrQ0KQfzEMSts5v4DYmTUGw+OAwbusWsOOs1slgCOGCYP+maHKoi95HYBgoQp9GejQICPEeKb/+gYT8Z8okZpPR7M0mxS+AQ3gZKp5dNfSAAAAAElFTkSuQmCC') /*img/layer.png*/;
-      /* background-position: 50% 50%; */
-      background-repeat: no-repeat;
     display: block;
+    background-color: #bbb;
+    text-align: center;
+    color: #ffffff;
+    
 }
 
 .gba_basemap_img {

src/js/controls/BasemapControl.js

@@ -54,7 +54,7 @@ export class BasemapControl extends Control {
         // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
         container.setAttribute('aria-haspopup', true);
 
-        let link = this._layersLink = dom.createDom('a', { "class": className + '-toggle' }, container);
+        let link = this._layersLink = dom.createDom('a', { "class": className + '-toggle', innerHTML: '<i class="fas fa-map-marked"></i>' }, container);
         link.href = '#';
         link.title = 'Base Layers';
 

src/js/controls/BoreholeControl.css

@@ -13,9 +13,15 @@
     display: block;
     height: 30px;
     width: 30px;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAAAAACYz4PQAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAAFxIAABcSAWef0lIAAACLSURBVCjPzZExGQUxCINjoB5qAge1UBvdKgIN3c8ELjqjAQu89W4g8+tG/4+QAPL9zMw+H3gXd5mtKLGfTK3x/XPsDLskyR3SyFr2wKi7cwCLiAPPqcUDhwbbmfxi2thaDjpxPoFZ4+gYSjCEOpdg2DVdmPPojcxWATlodrRNgz27np029RLx9PjWPwOEKTMp8DmSAAAAAElFTkSuQmCC') /*img/drill2.png*/;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAAAAACYz4PQAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAAFxIAABcSAWef0lIAAACLSURBVCjPzZExGQUxCINjoB5qAge1UBvdKgIN3c8ELjqjAQu89W4g8+tG/4+QAPL9zMw+H3gXd5mtKLGfTK3x/XPsDLskyR3SyFr2wKi7cwCLiAPPqcUDhwbbmfxi2thaDjpxPoFZ4+gYSjCEOpdg2DVdmPPojcxWATlodrRNgz27np029RLx9PjWPwOEKTMp8DmSAAAAAElFTkSuQmCC');
+     /* img/drill2.png; */
    float: left;
 }
+
+.fas
+{
+   vertical-align: middle;
+}
 .measure-enabled .gba-maptool-control a{
     background-color:skyblue;
 }

src/js/layer/DemLayer.js

@@ -1,19 +1,18 @@
 import { Group } from 'three/src/objects/Group';
-// import { BufferGeometry } from 'three/src/core/BufferGeometry';
-// import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
-// import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
-// import { Mesh } from 'three/src/objects/Mesh';
 import { Layer } from './Layer';
 import { DemBlock } from './DemBlock';
-import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
+// import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
-import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
+// import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
 import { DoubleSide, FlatShading, LinearFilter } from 'three/src/constants';
 import * as browser from '../core/browser';
 import { Texture } from 'three/src/textures/Texture';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
 import { Plane } from 'three/src/math/Plane';
 import { Vector3 } from 'three/src/math/Vector3';
+import { Color } from 'three/src/math/Color';
 import proj4 from 'proj4/dist/proj4';
+import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
+import { shader } from '../clip/shader';
 
 export class DemLayer extends Layer {
 
@@ -36,11 +35,10 @@ export class DemLayer extends Layer {
 
     queryableObjects;
     borderVisible;
+    uniforms;
 
     constructor(params) {
         super();
-
-        //this.features = [];        
         this.visible = true;
         this.opacity = 1;
         this.material;
@@ -69,9 +67,8 @@ export class DemLayer extends Layer {
 
     async initMaterials() {
         if (this.materialParameter.length === 0) return;
-        this.xLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max);
+        // this.xMaxLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max);
-        //this.addObject(this.xLocalPlane, false);
+        // this.yMaxLocalPlane = new Plane(new Vector3(0, -1, 0), this._map.y.max);
-        this.yLocalPlane = new Plane(new Vector3(0, 1, 0), this._map.y.max);
 
         let sum_opacity = 0;
         this.material;
@@ -83,8 +80,9 @@ export class DemLayer extends Layer {
             if (m.ds && !browser.ie) opt.side = DoubleSide;
             if (m.flat) opt.shading = FlatShading;
             //m.i = 1;
+            let image;
             if (m.i !== undefined) {
-                let image = this.images[m.i];
+                image = this.images[m.i];
                 if (image.texture === undefined) {
                     if (image.src !== undefined) {
                         image.texture = THREE.ImageUtils._loadTexture(image.src);
@@ -101,7 +99,7 @@ export class DemLayer extends Layer {
                         }
                     }
                 }
-                opt.map = image.texture;
+                // opt.map = image.texture;
             }
             if (m.o !== undefined && m.o < 1) {
                 opt.opacity = m.o;
@@ -111,10 +109,22 @@ export class DemLayer extends Layer {
             if (m.w) opt.wireframe = true;
             //opt.wireframe = true;
 
-            // Clipping setup:
+            // // Clipping setup:
-            opt.clippingPlanes = [this.xLocalPlane, this.yLocalPlane];
+            // opt.clippingPlanes = this.clippingPlanes = [this.xMinLocalPlane, this.xMaxLocalPlane, this.yMaxLocalPlane];
-            opt.clipIntersection = false;
+            // opt.clipIntersection = false;
-            opt.clipShadows = true;
+            // opt.clipShadows = true;
+
+            // let color =  parseInt("ffffff", 16);
+            // // opt.color = color;
+            let uniforms = this.uniforms = {
+                clipping: {
+                    clippingScale: { type: "f", value: 1.0 },                    
+                    clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
+                    clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
+                    map: { type: 't', value: image.texture },
+                    percent: { type: "f", value: 0.7 },
+                }
+            };
 
             let MaterialType = { MeshLambert: 0, MeshPhong: 1, LineBasic: 2, Sprite: 3, Unknown: -1 };
 
@@ -122,7 +132,11 @@ export class DemLayer extends Layer {
                 //if (m.color !== undefined) opt.color = opt.ambient = m.color;
                 if (m.color !== undefined) opt.color = m.color;
                 //opt.skinning = true;
-                this.material = new MeshLambertMaterial(opt);
+                opt.uniforms = this.uniforms.clipping;
+                opt.vertexShader = shader.vertexClipping;
+                opt.fragmentShader = shader.fragmentClippingFront;
+                this.material = new ShaderMaterial(opt);
+                // this.material = new MeshStandardMaterial(opt);                 
             }
             // else if (m.materialtype === MaterialType.MeshPhong) {
             //     if (m.color !== undefined) opt.color = opt.ambient = m.color;
@@ -150,10 +164,11 @@ export class DemLayer extends Layer {
     }
 
 
-    filterMaterial(filterX, filterY) {
+    // filterMaterial(filterXMin, filterXMax, filterYMax) {
-        this.xLocalPlane.constant = filterX;
+    //     this.xMinLocalPlane.constant = filterXMin;
-        this.yLocalPlane.constant = filterY;
+    //     this.xMaxLocalPlane.constant = filterXMax;
-    }
+    //     this.yMaxLocalPlane.constant = filterYMax;
+    // }
 
     scaleZ(z) {
         this.objectGroup.scale.z = z;
@@ -198,6 +213,7 @@ export class DemLayer extends Layer {
         }
         //configure the material now that we have all of the data
         this.mainMesh.material.map = image.texture;
+        this.uniforms.clipping.map.value = image.texture;
         this.mainMesh.material.needsUpdate = true;
         if (this.visible === false) {
             this.setVisible(true);
@@ -263,10 +279,8 @@ export class DemLayer extends Layer {
         });
     }
 
-
     async onAdd(map) {
         //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
-
         await this.initMaterials();
         this.build(this.getScene());
         map.update();
@@ -398,7 +412,6 @@ export class DemLayer extends Layer {
         });
     }
 
-
     _loadTextureData(imageData) {
         let texture;
         let image = document.createElement('img');

src/js/layer/GridLayer.js

@@ -34,11 +34,12 @@ export class GridLayer extends Layer {
     }
 
     setWireframeMode(wireframe) {
-        this.materials.forEach(function (mat) {
+        // this.materials.forEach(function (mat) {
-            //if (m.w) return;
+        //     //if (m.w) return;
-            //m.mat.wireframe = wireframe;
+        //     //m.mat.wireframe = wireframe;
-            mat.wireframe = wireframe;
+        //     mat.wireframe = wireframe;
-        });
+        // });
+        return;
     }
 
     setVisible(visible) {

src/js/layer/TinLayer.js

@@ -133,9 +133,9 @@ class TinLayer extends Layer {
             roughness: 0.75,          
             flatShading: true,
             side: DoubleSide,
-            clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
+            // clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
-            clipIntersection: false,
+            // clipIntersection: false,
-            clipShadows: true,
+            // clipShadows: true,
         }, uniforms.clipping);   
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);