- 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
This commit is contained in:
Arno Kaimbacher 2021-03-31 18:14:23 +02:00
parent 67d6b61ed6
commit 8df9ff69df
8 changed files with 75 additions and 46 deletions

View File

@ -170,12 +170,11 @@ export class Selection extends Layer {
if (this.map.layers) { if (this.map.layers) {
for (const [key, layer] of Object.entries(this.map.layers)) { for (const [key, layer] of Object.entries(this.map.layers)) {
if (layer.uniforms) { if (layer.uniforms ) {
let scale = Number(this.scale); let scale = Number(this.scale);
layer.uniforms.clipping.clippingLow.value.copy(this.limitLow); layer.uniforms.clipping.clippingLow.value.copy(this.limitLow);
layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh); layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh);
layer.uniforms.clipping.clippingScale.value = scale; layer.uniforms.clipping.clippingScale.value = scale;
} }
} }
} }

View File

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

View File

@ -2,16 +2,18 @@
.gba-control-basemap-toggle { .gba-control-basemap-toggle {
width: 30px; width: 30px;
height: 30px; height: 30px;
border: 1px solid #bbb;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
cursor: pointer; 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; display: block;
background-color: #bbb;
text-align: center;
color: #ffffff;
} }
.gba_basemap_img { .gba_basemap_img {

View File

@ -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 // 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); 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.href = '#';
link.title = 'Base Layers'; link.title = 'Base Layers';

View File

@ -13,9 +13,15 @@
display: block; display: block;
height: 30px; height: 30px;
width: 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; float: left;
} }
.fas
{
vertical-align: middle;
}
.measure-enabled .gba-maptool-control a{ .measure-enabled .gba-maptool-control a{
background-color:skyblue; background-color:skyblue;
} }

View File

@ -1,19 +1,18 @@
import { Group } from 'three/src/objects/Group'; 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 { Layer } from './Layer';
import { DemBlock } from './DemBlock'; 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 { DoubleSide, FlatShading, LinearFilter } from 'three/src/constants';
import * as browser from '../core/browser'; import * as browser from '../core/browser';
import { Texture } from 'three/src/textures/Texture'; import { Texture } from 'three/src/textures/Texture';
import { TextureLoader } from 'three/src/loaders/TextureLoader'; import { TextureLoader } from 'three/src/loaders/TextureLoader';
import { Plane } from 'three/src/math/Plane'; import { Plane } from 'three/src/math/Plane';
import { Vector3 } from 'three/src/math/Vector3'; import { Vector3 } from 'three/src/math/Vector3';
import { Color } from 'three/src/math/Color';
import proj4 from 'proj4/dist/proj4'; import proj4 from 'proj4/dist/proj4';
import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
import { shader } from '../clip/shader';
export class DemLayer extends Layer { export class DemLayer extends Layer {
@ -36,11 +35,10 @@ export class DemLayer extends Layer {
queryableObjects; queryableObjects;
borderVisible; borderVisible;
uniforms;
constructor(params) { constructor(params) {
super(); super();
//this.features = [];
this.visible = true; this.visible = true;
this.opacity = 1; this.opacity = 1;
this.material; this.material;
@ -69,9 +67,8 @@ export class DemLayer extends Layer {
async initMaterials() { async initMaterials() {
if (this.materialParameter.length === 0) return; 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; let sum_opacity = 0;
this.material; this.material;
@ -83,8 +80,9 @@ export class DemLayer extends Layer {
if (m.ds && !browser.ie) opt.side = DoubleSide; if (m.ds && !browser.ie) opt.side = DoubleSide;
if (m.flat) opt.shading = FlatShading; if (m.flat) opt.shading = FlatShading;
//m.i = 1; //m.i = 1;
let image;
if (m.i !== undefined) { if (m.i !== undefined) {
let image = this.images[m.i]; image = this.images[m.i];
if (image.texture === undefined) { if (image.texture === undefined) {
if (image.src !== undefined) { if (image.src !== undefined) {
image.texture = THREE.ImageUtils._loadTexture(image.src); 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) { if (m.o !== undefined && m.o < 1) {
opt.opacity = m.o; opt.opacity = m.o;
@ -111,10 +109,22 @@ export class DemLayer extends Layer {
if (m.w) opt.wireframe = true; if (m.w) opt.wireframe = true;
//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 }; 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 = opt.ambient = m.color;
if (m.color !== undefined) opt.color = m.color; if (m.color !== undefined) opt.color = m.color;
//opt.skinning = true; //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) { // else if (m.materialtype === MaterialType.MeshPhong) {
// if (m.color !== undefined) opt.color = opt.ambient = m.color; // 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) { scaleZ(z) {
this.objectGroup.scale.z = 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 //configure the material now that we have all of the data
this.mainMesh.material.map = image.texture; this.mainMesh.material.map = image.texture;
this.uniforms.clipping.map.value = image.texture;
this.mainMesh.material.needsUpdate = true; this.mainMesh.material.needsUpdate = true;
if (this.visible === false) { if (this.visible === false) {
this.setVisible(true); this.setVisible(true);
@ -263,10 +279,8 @@ export class DemLayer extends Layer {
}); });
} }
async onAdd(map) { async onAdd(map) {
//this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation; //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
await this.initMaterials(); await this.initMaterials();
this.build(this.getScene()); this.build(this.getScene());
map.update(); map.update();
@ -398,7 +412,6 @@ export class DemLayer extends Layer {
}); });
} }
_loadTextureData(imageData) { _loadTextureData(imageData) {
let texture; let texture;
let image = document.createElement('img'); let image = document.createElement('img');

View File

@ -34,11 +34,12 @@ export class GridLayer extends Layer {
} }
setWireframeMode(wireframe) { 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) { setVisible(visible) {

View File

@ -133,9 +133,9 @@ class TinLayer extends Layer {
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,
}, uniforms.clipping); }, uniforms.clipping);
this.materialsArray.push(this.material); this.materialsArray.push(this.material);
let mesh = this.mainMesh = new Mesh(geometry, this.material); let mesh = this.mainMesh = new Mesh(geometry, this.material);