From 8df9ff69df95dd9e405accbd56870555353be1df Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Wed, 31 Mar 2021 18:14:23 +0200 Subject: [PATCH] - 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 | 5 +-- src/js/clip/shader.js | 14 +++++-- src/js/controls/BasemapControl.css | 12 +++--- src/js/controls/BasemapControl.js | 2 +- src/js/controls/BoreholeControl.css | 8 +++- src/js/layer/DemLayer.js | 63 +++++++++++++++++------------ src/js/layer/GridLayer.js | 11 ++--- src/js/layer/TinLayer.js | 6 +-- 8 files changed, 75 insertions(+), 46 deletions(-) diff --git a/src/js/clip/Selection.js b/src/js/clip/Selection.js index 564aa65..8c7166a 100644 --- a/src/js/clip/Selection.js +++ b/src/js/clip/Selection.js @@ -170,12 +170,11 @@ export class Selection extends Layer { if (this.map.layers) { for (const [key, layer] of Object.entries(this.map.layers)) { - if (layer.uniforms) { + 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; - + layer.uniforms.clipping.clippingScale.value = scale; } } } diff --git a/src/js/clip/shader.js b/src/js/clip/shader.js index 64cf6f7..bc9f293 100644 --- a/src/js/clip/shader.js +++ b/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 > clippingHigh.z + || worldPosition.z < (clippingLow.z * clippingScale) + || 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; } diff --git a/src/js/controls/BasemapControl.css b/src/js/controls/BasemapControl.css index be6445f..f36fa9d 100644 --- a/src/js/controls/BasemapControl.css +++ b/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; - 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; + border-radius: 4px; + display: block; + background-color: #bbb; + text-align: center; + color: #ffffff; + } .gba_basemap_img { diff --git a/src/js/controls/BasemapControl.js b/src/js/controls/BasemapControl.js index 179c1f2..e25d7cc 100644 --- a/src/js/controls/BasemapControl.js +++ b/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: '' }, container); link.href = '#'; link.title = 'Base Layers'; diff --git a/src/js/controls/BoreholeControl.css b/src/js/controls/BoreholeControl.css index a00c724..b7920ef 100644 --- a/src/js/controls/BoreholeControl.css +++ b/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; } diff --git a/src/js/layer/DemLayer.js b/src/js/layer/DemLayer.js index 84a64bb..5f66d19 100644 --- a/src/js/layer/DemLayer.js +++ b/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 { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial'; +// import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial'; +// 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.addObject(this.xLocalPlane, false); - this.yLocalPlane = new Plane(new Vector3(0, 1, 0), this._map.y.max); + // this.xMaxLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max); + // this.yMaxLocalPlane = 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: - opt.clippingPlanes = [this.xLocalPlane, this.yLocalPlane]; - opt.clipIntersection = false; - opt.clipShadows = true; + // // Clipping setup: + // opt.clippingPlanes = this.clippingPlanes = [this.xMinLocalPlane, this.xMaxLocalPlane, this.yMaxLocalPlane]; + // opt.clipIntersection = false; + // 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) { - this.xLocalPlane.constant = filterX; - this.yLocalPlane.constant = filterY; - } + // filterMaterial(filterXMin, filterXMax, filterYMax) { + // this.xMinLocalPlane.constant = filterXMin; + // 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'); diff --git a/src/js/layer/GridLayer.js b/src/js/layer/GridLayer.js index dd7dd79..a443bfb 100644 --- a/src/js/layer/GridLayer.js +++ b/src/js/layer/GridLayer.js @@ -34,11 +34,12 @@ export class GridLayer extends Layer { } setWireframeMode(wireframe) { - this.materials.forEach(function (mat) { - //if (m.w) return; - //m.mat.wireframe = wireframe; - mat.wireframe = wireframe; - }); + // this.materials.forEach(function (mat) { + // //if (m.w) return; + // //m.mat.wireframe = wireframe; + // mat.wireframe = wireframe; + // }); + return; } setVisible(visible) { diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.js index 6df08f2..0f7353c 100644 --- a/src/js/layer/TinLayer.js +++ b/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], - clipIntersection: false, - clipShadows: true, + // clippingPlanes: [this.xLocalPlane, this.yLocalPlane], + // clipIntersection: false, + // clipShadows: true, }, uniforms.clipping); this.materialsArray.push(this.material); let mesh = this.mainMesh = new Mesh(geometry, this.material);