Implement API 1.1.0 and fix flickering with markers when zoomed out

.gitignore

@@ -14,6 +14,10 @@ bin/
 bin/*
 */bin/*
 
+doc/
+doc/*
+*/doc/*
+
 .classpath
 */.classpath
 

BlueMapAPI

@@ -1 +1 @@
-Subproject commit ead819422f495b4ab6d15bd7aed7fa59fec17ceb
+Subproject commit 161fc1c96808594d0ad522536c36ef237f69df93

BlueMapCommon/src/main/java/de/bluecolored/bluemap/common/api/marker/ShapeMarkerImpl.java

@@ -42,6 +42,7 @@ public class ShapeMarkerImpl extends MarkerImpl implements ShapeMarker {
 
 	private Shape shape;
 	private float height;
+	private boolean depthTest;
 	private Color borderColor, fillColor;
 
 	private boolean hasUnsavedChanges;
@@ -82,6 +83,16 @@ public class ShapeMarkerImpl extends MarkerImpl implements ShapeMarker {
 		this.height = height;
 		this.hasUnsavedChanges = true;
 	}
+	
+	@Override
+	public boolean isDepthTestEnabled() {
+		return this.depthTest;
+	}
+
+	@Override
+	public void setDepthTestEnabled(boolean enabled) {
+		this.depthTest = enabled;
+	}
 
 	@Override
 	public Color getBorderColor() {
@@ -118,6 +129,7 @@ public class ShapeMarkerImpl extends MarkerImpl implements ShapeMarker {
 		
 		this.shape = readShape(markerNode.getNode("shape"));
 		this.height = markerNode.getNode("height").getFloat(64);
+		this.depthTest = markerNode.getNode("depthTest").getBoolean(true);
 		this.borderColor = readColor(markerNode.getNode("borderColor"));
 		this.fillColor = readColor(markerNode.getNode("fillColor"));
 	}
@@ -128,6 +140,7 @@ public class ShapeMarkerImpl extends MarkerImpl implements ShapeMarker {
 
 		writeShape(markerNode.getNode("shape"), this.shape);
 		markerNode.getNode("height").setValue(Math.round(height * 1000f) / 1000f);
+		markerNode.getNode("depthTest").setValue(this.depthTest);
 		writeColor(markerNode.getNode("borderColor"), this.borderColor);
 		writeColor(markerNode.getNode("fillColor"), this.fillColor);
 		

BlueMapCore/src/main/webroot/js/libs/BlueMap.js

@@ -80,7 +80,7 @@ export default class BlueMap {
 		this.skyColor = {
 			value: new Vector3(0, 0, 0)
 		};
-		this.debugInfo = false;
+		this.debugInfo = this.loadUserSetting("debugInfo", true);
 
 		this.fileLoader = new FileLoader();
 		this.blobLoader = new FileLoader();
@@ -99,6 +99,7 @@ export default class BlueMap {
 			await this.loadHiresMaterial();
 			await this.loadLowresMaterial();
 
+			this.debugInfo = false;
 			this.loadUserSettings();
 			this.handleContainerResize();
 
@@ -107,7 +108,7 @@ export default class BlueMap {
 			await this.ui.load();
 			this.start();
 		}).catch(error => {
-			this.onLoadError(error.toString());
+			this.onLoadError("Initialization: " + error.toString());
 		});
 	}
 
@@ -310,21 +311,25 @@ export default class BlueMap {
 	async loadSettings() {
 		return new Promise(resolve => {
 			this.fileLoader.load(this.dataRoot + 'settings.json', settings => {
-				this.settings = JSON.parse(settings);
+				try {
-				this.maps = [];
+					this.settings = JSON.parse(settings);
-				for (let map in this.settings.maps) {
+					this.maps = [];
-					if (this.settings["maps"].hasOwnProperty(map) && this.settings.maps[map].enabled){
+					for (let map in this.settings.maps) {
-						this.maps.push(map);
+						if (this.settings["maps"].hasOwnProperty(map) && this.settings.maps[map].enabled) {
+							this.maps.push(map);
+						}
 					}
+
+					this.maps.sort((map1, map2) => {
+						let sort = this.settings.maps[map1].ordinal - this.settings.maps[map2].ordinal;
+						if (isNaN(sort)) return 0;
+						return sort;
+					});
+
+					resolve();
+				} catch (e) {
+					reject(e);
 				}
-
-				this.maps.sort((map1, map2) => {
-					var sort = this.settings.maps[map1].ordinal - this.settings.maps[map2].ordinal;
-					if (isNaN(sort)) return 0;
-					return sort;
-				});
-
-				resolve();
 			});
 		});
 	}
@@ -334,11 +339,10 @@ export default class BlueMap {
 		this.quality = 1;
 
 		this.renderer = new WebGLRenderer({
-			alpha: true,
 			antialias: true,
 			sortObjects: true,
 			preserveDrawingBuffer: true,
-			logarithmicDepthBuffer: false,
+			logarithmicDepthBuffer: true,
 		});
 		this.renderer.autoClear = false;
 
@@ -374,6 +378,7 @@ export default class BlueMap {
 		this.quality = this.loadUserSetting("renderQuality", this.quality);
 		this.hiresViewDistance = this.loadUserSetting("hiresViewDistance", this.hiresViewDistance);
 		this.lowresViewDistance = this.loadUserSetting("lowresViewDistance", this.lowresViewDistance);
+		this.controls.settings.zoom.max = this.loadUserSetting("maxZoomDistance", this.controls.settings.zoom.max);
 		this.debugInfo = this.loadUserSetting("debugInfo", this.debugInfo);
 	}
 
@@ -387,6 +392,7 @@ export default class BlueMap {
 		this.saveUserSetting("renderQuality", this.quality);
 		this.saveUserSetting("hiresViewDistance", this.hiresViewDistance);
 		this.saveUserSetting("lowresViewDistance", this.lowresViewDistance);
+		this.saveUserSetting("maxZoomDistance", this.controls.settings.zoom.max);
 		this.saveUserSetting("debugInfo", this.debugInfo);
 	}
 

BlueMapCore/src/main/webroot/js/libs/hud/HudInfo.js

@@ -66,8 +66,11 @@ export default class HudInfo {
 
 		//check markers first
 		let intersects = this.raycaster.intersectObjects( this.blueMap.shapeScene.children );
-		console.log(intersects);
 		if (intersects.length !== 0){
+			if (this.blueMap.debugInfo){
+				console.debug("Tapped position data: ", intersects[0]);
+			}
+
 			try {
 				intersects[0].object.userData.marker.onClick(intersects[0].point);
 			} catch (ignore) {}
@@ -163,7 +166,7 @@ export default class HudInfo {
 			//add block marker
 			if (hiresData){
 				this.blockMarker.position.set(block.x, block.y, block.z);
-				this.blueMap.hiresScene.add(this.blockMarker);
+				this.blueMap.shapeScene.add(this.blockMarker);
 				this.blockMarker.needsUpdate = true;
 			}
 
@@ -182,7 +185,7 @@ export default class HudInfo {
 					this.onClose = undefined;
 				}
 			});
-			this.blueMap.hiresScene.remove(this.blockMarker);
+			this.blueMap.shapeScene.remove(this.blockMarker);
 			this.blueMap.updateFrame = true;
 		}
 	};

BlueMapCore/src/main/webroot/js/libs/hud/MarkerManager.js

@@ -2,6 +2,7 @@ import MarkerSet from "./MarkerSet";
 import $ from "jquery";
 import ToggleButton from "../ui/ToggleButton";
 import Label from "../ui/Label";
+import {cachePreventionNr} from "../utils";
 
 export default class MarkerManager {
 
@@ -13,7 +14,9 @@ export default class MarkerManager {
 
 		this.readyPromise =
 			this.loadMarkerData()
-				.catch(ignore => {})
+				.catch(ignore => {
+					if (this.blueMap.debugInfo) console.debug("Failed load markers:", ignore);
+				})
 				.then(this.loadMarkers);
 
 		$(document).on('bluemap-map-change', this.onBlueMapMapChange);
@@ -21,10 +24,14 @@ export default class MarkerManager {
 
 	loadMarkerData() {
 		return new Promise((resolve, reject) => {
-			this.blueMap.fileLoader.load(this.blueMap.dataRoot + 'markers.json',
+			this.blueMap.fileLoader.load(this.blueMap.dataRoot + 'markers.json?' + cachePreventionNr(),
 				markerData => {
-					this.markerData = JSON.parse(markerData);
+					try {
-					resolve();
+						this.markerData = JSON.parse(markerData);
+						resolve();
+					} catch (e){
+						reject(e);
+					}
 				},
 				xhr => {},
 				error => {

BlueMapCore/src/main/webroot/js/libs/hud/ShapeMarker.js

@@ -27,17 +27,19 @@ export default class ShapeMarker extends Marker {
 
 		this.fillColor = this.prepareColor(markerData.fillColor);
 		this.borderColor = this.prepareColor(markerData.borderColor);
+		this.depthTest = !!markerData.depthTest;
 
 		//fill
 		let shape = new Shape(points);
 		let fillGeo = new ShapeBufferGeometry(shape, 1);
 		fillGeo.rotateX(Math.PI * 0.5);
-		fillGeo.translate(0, this.height + 0.0172, 0);
+		fillGeo.translate(0, this.height + 0.01456, 0);
 		let fillMaterial = new MeshBasicMaterial({
 			color: this.fillColor.rgb,
 			opacity: this.fillColor.a,
 			transparent: true,
 			side: DoubleSide,
+			depthTest: this.depthTest,
 		});
 		let fill = new Mesh( fillGeo, fillMaterial );
 
@@ -45,7 +47,7 @@ export default class ShapeMarker extends Marker {
 		points.push(points[0]);
 		let lineGeo = new BufferGeometry().setFromPoints(points);
 		lineGeo.rotateX(Math.PI * 0.5);
-		lineGeo.translate(0, this.height + 0.0072, 0);
+		lineGeo.translate(0, this.height + 0.01456, 0);
 		let lineMaterial = new LineBasicMaterial({
 			color: this.borderColor.rgb,
 			opacity: this.borderColor.a,
@@ -54,8 +56,12 @@ export default class ShapeMarker extends Marker {
 		});
 		let line = new Line( lineGeo, lineMaterial );
 
-		this.renderObject = fill;
+		if (this.fillColor.a > 0 || this.borderColor.a <= 0) {
-		fill.add(line);
+			this.renderObject = fill;
+			fill.add(line);
+		} else {
+			this.renderObject = line;
+		}
 
 		this.renderObject.userData = {
 			marker: this,

BlueMapCore/src/main/webroot/js/libs/shaders/HiresFragmentShader.js

@@ -22,8 +22,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+import { ShaderChunk } from 'three';
 
 const HIRES_FRAGMENT_SHADER = `
+${ShaderChunk.logdepthbuf_pars_fragment}
+
 uniform sampler2D texture;
 uniform float sunlightStrength;
 uniform float ambientLight;
@@ -75,6 +78,8 @@ void main() {
 	color.rgb *= max(light / 15.0, ambientLight);
 	
 	gl_FragColor = color;
+	
+	${ShaderChunk.logdepthbuf_fragment}
 }
 `;
 

BlueMapCore/src/main/webroot/js/libs/shaders/HiresVertexShader.js

@@ -22,8 +22,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+import { ShaderChunk } from 'three';
 
 const HIRES_VERTEX_SHADER = `
+${ShaderChunk.logdepthbuf_pars_vertex}
+
 attribute float ao;
 attribute float sunlight;
 attribute float blocklight;
@@ -51,7 +54,9 @@ void main() {
 		projectionMatrix *
 		viewMatrix *
 		modelMatrix *
-		vec4(position, 1); 
+		vec4(position, 1);
+	
+	${ShaderChunk.logdepthbuf_vertex} 
 }
 `;
 

BlueMapCore/src/main/webroot/js/libs/shaders/LowresFragmentShader.js

@@ -22,8 +22,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+import { ShaderChunk } from 'three';
 
 const LOWRES_FRAGMENT_SHADER = `
+${ShaderChunk.logdepthbuf_pars_fragment}
+
 uniform float sunlightStrength;
 uniform float ambientLight;
 
@@ -41,6 +44,8 @@ void main() {
 	color *= max(sunlightStrength, ambientLight);
 
 	gl_FragColor = color;
+	
+	${ShaderChunk.logdepthbuf_fragment}
 }
 `;
 

BlueMapCore/src/main/webroot/js/libs/shaders/LowresVertexShader.js

@@ -22,8 +22,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+import { ShaderChunk } from 'three';
 
 const LOWRES_VERTEX_SHADER = `
+${ShaderChunk.logdepthbuf_pars_vertex}
+
 varying vec3 vPosition;
 varying vec3 vNormal;
 varying vec2 vUv;
@@ -39,6 +42,8 @@ void main() {
     	projectionMatrix *
 		modelViewMatrix *
 		vec4(position, 1);
+		
+	${ShaderChunk.logdepthbuf_vertex}
 }
 `;
 

BlueMapCore/src/main/webroot/js/libs/ui/UI.js

@@ -93,6 +93,10 @@ export default class UI {
 			this.blueMap.lowresTileManager.setViewDistance(this.blueMap.lowresViewDistance);
 			this.blueMap.lowresTileManager.update();
 		});
+		let extendedZoom = new ToggleButton("extended zoom", this.blueMap.controls.settings.zoom.max > 2000, button => {
+			this.blueMap.controls.settings.zoom.max = button.isSelected() ? 8000 : 2000;
+			this.blueMap.controls.targetDistance = Math.min(this.blueMap.controls.targetDistance, this.blueMap.controls.settings.zoom.max);
+		});
 		let debugInfo = new ToggleButton("debug-info", this.blueMap.debugInfo, button => {
 			this.blueMap.debugInfo = button.isSelected();
 		});
@@ -122,6 +126,7 @@ export default class UI {
 		this.menu.addElement(hiresSlider);
 		this.menu.addElement(new Label('lowres render-distance (blocks):'));
 		this.menu.addElement(lowresSlider);
+		this.menu.addElement(extendedZoom);
 		this.menu.addElement(new Separator());
 		this.menu.addElement(debugInfo);
 		this.menu.update();

BlueMapCore/src/main/webroot/js/libs/utils.js

@@ -25,6 +25,10 @@
 
 import { Vector2, Vector3 } from 'three';
 
+export const cachePreventionNr = () => {
+	return Math.floor(Math.random() * 100000000);
+};
+
 export const stringToImage = string => {
 	let image = document.createElementNS('http://www.w3.org/1999/xhtml', 'img');
 	image.src = string;