geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- not set wireframe mode for GridLayer.js

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/clip/Selection.js
View File

@ -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;
}
}
}

14
src/js/clip/shader.js
View File

@ -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;
}

10
src/js/controls/BasemapControl.css
View File

@ -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;
border-radius: 4px;
display: block;
background-color: #bbb;
text-align: center;
color: #ffffff;
}
.gba_basemap_img {

2
src/js/controls/BasemapControl.js
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
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';

8
src/js/controls/BoreholeControl.css
View File

@ -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;
}

63
src/js/layer/DemLayer.js
View File

@ -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');

11
src/js/layer/GridLayer.js
View File

@ -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) {

6
src/js/layer/TinLayer.js
View File

@ -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);