From 063dfc2609ce4d9e6d0ba1ec7e7510a463fefad7 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Fri, 23 Apr 2021 16:28:19 +0200 Subject: [PATCH] - test overlay on TinLayer --- src/js/controls/BoreholePopup.ts | 1 - src/js/layer/DemBlock.js | 2 + src/js/layer/DemLayer.js | 95 ++++++++++++----------- src/js/layer/TinLayer.ts | 127 ++++++++++++++++++++++++++----- src/js/main.js | 2 +- 5 files changed, 158 insertions(+), 69 deletions(-) diff --git a/src/js/controls/BoreholePopup.ts b/src/js/controls/BoreholePopup.ts index d9f6ba9..b38e75d 100644 --- a/src/js/controls/BoreholePopup.ts +++ b/src/js/controls/BoreholePopup.ts @@ -15,7 +15,6 @@ interface BoreholePopupOptions { export class BoreholePopup extends Control { - // default options options: BoreholePopupOptions = { position: 'topleft', width: '300px', diff --git a/src/js/layer/DemBlock.js b/src/js/layer/DemBlock.js index 4b4de4c..698772a 100644 --- a/src/js/layer/DemBlock.js +++ b/src/js/layer/DemBlock.js @@ -5,6 +5,8 @@ import { Mesh } from 'three/src/objects/Mesh'; export class DemBlock { + layer; + constructor(params) { //properties for (var k in params) { diff --git a/src/js/layer/DemLayer.js b/src/js/layer/DemLayer.js index 77da4d3..b202386 100644 --- a/src/js/layer/DemLayer.js +++ b/src/js/layer/DemLayer.js @@ -5,7 +5,8 @@ import { DemBlock } from './DemBlock'; // 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 { Vector3 } from 'three/src/math/Vector3'; @@ -31,10 +32,23 @@ export class DemLayer extends Layer { type: "esri" } ]; - + q; + objectGroup; + visible; + opacity; + materialParameter; + materialsArray; + material; queryableObjects; borderVisible; + mainMesh; uniforms; + blocks; + baseExtent = { + min: { x: 0, y: 0 }, + max: { x: 0, y: 0 } + }; + index; constructor(params) { super(); @@ -42,7 +56,7 @@ export class DemLayer extends Layer { this.opacity = 1; this.material; this.materialParameter = []; - this.materials = []; + this.materialsArray = []; for (var k in params) { this[k] = params[k]; } @@ -66,25 +80,29 @@ export class DemLayer extends Layer { async initMaterials() { if (this.materialParameter.length === 0) return; - // 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; for (let i = 0, l = this.materialParameter.length; i < l; i++) { let m = this.materialParameter[i]; - - let opt = {}; - //if (m.ds && !Gba3D.isIE) opt.side = THREE.DoubleSide; + let opt = { + opacity: null, + side: null, + // shading: null, + transparent: null, + wireframe: null, + uniforms: null, + vertexShader: null, + fragmentShader: null + }; if (m.ds && !browser.ie) opt.side = DoubleSide; - if (m.flat) opt.shading = FlatShading; + // if (m.flat) opt.shading = FlatShading; //m.i = 1; let image; if (m.i !== undefined) { image = this.images[m.i]; if (image.texture === undefined) { if (image.src !== undefined) { - image.texture = THREE.ImageUtils._loadTexture(image.src); + // image.texture = THREE.ImageUtils._loadTexture(image.src); } else { if (image.type == "esri") { @@ -106,13 +124,7 @@ export class DemLayer extends Layer { } if (m.t) opt.transparent = true; if (m.w) opt.wireframe = true; - //opt.wireframe = 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 = { @@ -131,35 +143,20 @@ 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; - opt.uniforms = this.uniforms.clipping; + opt.uniforms = 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; - // mat = new THREE.MeshPhongMaterial(opt); - // } - // else if (m.materialtype === MaterialType.LineBasic) { - // opt.color = m.color; - // mat = new THREE.LineBasicMaterial(opt); - // } - else { - if (m.color !== undefined) opt.color = m.color; - this.material = new MeshStandardMaterial(opt); - } + } m.mat = this.material; - //if (m.side !== undefined) { - // m. - //} - this.materials.push(this.material); + this.materialsArray.push(this.material); sum_opacity += this.material.opacity; } // layer opacity is the average opacity of materials - this.opacity = sum_opacity / this.materials.length; + this.opacity = sum_opacity / this.materialsArray.length; } scaleZ(z) { @@ -174,15 +171,15 @@ export class DemLayer extends Layer { } addBlock(params, clipped = false) { - let BlockClass = clipped ? ClippedDEMBlock : DemBlock; - var block = new BlockClass(params); + // let BlockClass = clipped ? ClippedDEMBlock : DemBlock; + let block = new DemBlock(params); block.layer = this; this.blocks.push(block); return block; } setWireframeMode(wireframe) { - this.materials.forEach(function (mat) { + this.materialsArray.forEach(function (mat) { //if (m.w) return; //m.mat.wireframe = wireframe; mat.wireframe = wireframe; @@ -229,13 +226,11 @@ export class DemLayer extends Layer { async loadTextureWms(url, imageParameter) { let dest = new proj4.Proj("EPSG:3857"); let source = new proj4.Proj("EPSG:3034"); - let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]); - let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]); + let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]); + let p2 = proj4.toPoint([this.baseExtent.max.x, this.baseExtent.max.y]); proj4.transform(source, dest, p1); proj4.transform(source, dest, p2); - - // let bbox = this.baseExtent.x.min + "," + this.baseExtent.y.min + "," + this.baseExtent.x.max + "," + this.baseExtent.y.max; let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y; let params = { @@ -272,6 +267,10 @@ export class DemLayer extends Layer { } async onAdd(map) { + this.baseExtent.min.x = map.baseExtent.x.min; + this.baseExtent.min.y = map.baseExtent.y.min; + this.baseExtent.max.x = map.baseExtent.x.max; + this.baseExtent.max.y = map.baseExtent.y.max; //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation; await this.initMaterials(); this.build(this.getScene()); @@ -279,6 +278,10 @@ export class DemLayer extends Layer { this.emit('add'); } + onRemove(map) { + map.scene.remove(this.objectGroup); + } + build(app_scene) { //var opt = Gba3D.Options; this.blocks.forEach(function (block) { @@ -356,8 +359,8 @@ export class DemLayer extends Layer { async requestImage(url, imageParameter) { let dest = new proj4.Proj("EPSG:3857"); let source = new proj4.Proj("EPSG:3034"); - let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]); - let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]); + let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]); + let p2 = proj4.toPoint([this.baseExtent.max.x, this.baseExtent.max.y]); proj4.transform(source, dest, p1); proj4.transform(source, dest, p2); diff --git a/src/js/layer/TinLayer.ts b/src/js/layer/TinLayer.ts index dc3aa04..a3904f4 100644 --- a/src/js/layer/TinLayer.ts +++ b/src/js/layer/TinLayer.ts @@ -13,12 +13,17 @@ import { Group } from 'three/src/objects/Group'; // import { Texture } from 'three/src/textures/Texture'; import { TextureLoader } from 'three/src/loaders/TextureLoader'; import proj4 from 'proj4/dist/proj4'; +import { ShaderMaterial } from 'three/src/materials/ShaderMaterial'; +import { shader } from '../clip/shader'; +import { Material } from 'three/src/materials/Material'; +import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial'; const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/'; const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/'; class TinLayer extends Layer { + name: string; q: boolean; queryableObjects; borderVisible; @@ -28,16 +33,36 @@ class TinLayer extends Layer { opacity: number; materialParameter: Array; materialsArray: Array; - material: MyMeshStandardMaterial; + material: Material; featuregeom_id: number; color: string; mainMesh; - uniforms: Object; + uniforms = { + clipping: {} + }; public baseExtent = { min: { x: 0, y: 0 }, max: { x: 0, y: 0 } }; index: number; + images = [{ + width: 405, + // "url": "https://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms", + url: " https://ows.terrestris.de/osm/service", + height: 549, + bboxSR: 3857, + type: "wms", + texture: undefined + }, + { + width: 405, + url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export", + height: 549, //509 + bboxSR: 3034, + type: "esri", + texture: undefined + } + ]; constructor(params) { super(); @@ -85,10 +110,23 @@ class TinLayer extends Layer { map.scene.remove(this.objectGroup); } + async initMaterials() { + } + async build(app_scene) { let geometry = new BufferGeometry(); - let posArray = await (this.points(this.featuregeom_id)); - let positions = new Float32BufferAttribute(posArray, 3); + let vertices = await (this.points(this.featuregeom_id)); + // const positions = []; + // const normals = []; + // const uvs = []; + // for (let i = 0; i < vertices.length; i = i +3) { + // // positions.push(...vertex.pos); + // // normals.push(...vertex.norm); + // uvs.push([0,0]); + // uvs.push([1, 0]); + // uvs.push([0, 1]); + // } + let positions = new Float32BufferAttribute(vertices, 3); geometry.setAttribute('position', positions); //var TypeArray = this.idx.length > 65535 ? Uint32Array : Uint16Array; @@ -98,6 +136,11 @@ class TinLayer extends Layer { let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true); geometry.setIndex(indices); + // const uvNumComponents = 2; + // geometry.setAttribute( + // 'uv', + // new Float32BufferAttribute(new Float32Array(uvs), uvNumComponents)); + geometry.scale(1, 1, 1); geometry.computeBoundingSphere(); geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f @@ -121,24 +164,66 @@ class TinLayer extends Layer { // }); // this.materialsArray.push(this.material); - 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) } + + + if (this.name == "test") { + let image = this.images[0]; + if (image.texture === undefined) { + + // if (image.type == "esri") { + // // image.texture = this._loadTextureData(image.data); + // let data = await this.requestImage(image.url, image); + + // // image.texture = await new TextureLoader().load(data.href); + // image.texture = await this.loadTexture(data.href); + // } + if (image.type == "wms") { + image.texture = await this.loadTextureWms(image.url, image); + } + } - }; - this.material = new MyMeshStandardMaterial({ - color: color, - metalness: 0.1, - roughness: 0.75, - flatShading: true, - side: DoubleSide, - // clippingPlanes: [this.xLocalPlane, this.yLocalPlane], - // clipIntersection: false, - // clipShadows: true, - }, uniforms.clipping); + 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 } + } + }; + + // this.material = new MeshLambertMaterial({ + // map: image.texture, + // transparent: true, + // side: DoubleSide, + // }); + this.material = new ShaderMaterial({ + transparent: true, + side: DoubleSide, + uniforms: this.uniforms.clipping, + vertexShader: shader.vertexClipping, + fragmentShader: shader.fragmentClippingFront, + }); + + } else { + 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) } + } + }; + + this.material = new MyMeshStandardMaterial({ + color: color, + metalness: 0.1, + roughness: 0.75, + flatShading: true, + side: DoubleSide + }, uniforms.clipping); + } + this.materialsArray.push(this.material); let mesh = this.mainMesh = new Mesh(geometry, this.material); mesh.userData.layerId = this.index; diff --git a/src/js/main.js b/src/js/main.js index d3faedb..97b10cb 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -192,7 +192,7 @@ class Application { this.northArrow = new NorthArrow({ headLength: 1, headWidth: 1 }).addTo(this.map); let demLayer = new DemLayer({ - q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457, "baseExtent": this.map.baseExtent, + q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457, "materialParameter": [{ "i": 0, "materialtypee": 0,