From b6c0d64d62cc7ec49b64cd6043a9491dbdda9a7e Mon Sep 17 00:00:00 2001 From: "Blue (Lukas Rieger)" Date: Thu, 23 Apr 2020 18:08:19 +0200 Subject: [PATCH] Implement API 1.1.0 and fix flickering with markers when zoomed out --- .gitignore | 4 ++ BlueMapAPI | 2 +- .../common/api/marker/ShapeMarkerImpl.java | 13 ++++++ .../src/main/webroot/js/libs/BlueMap.js | 40 +++++++++++-------- .../src/main/webroot/js/libs/hud/HudInfo.js | 9 +++-- .../main/webroot/js/libs/hud/MarkerManager.js | 15 +++++-- .../main/webroot/js/libs/hud/ShapeMarker.js | 14 +++++-- .../js/libs/shaders/HiresFragmentShader.js | 5 +++ .../js/libs/shaders/HiresVertexShader.js | 7 +++- .../js/libs/shaders/LowresFragmentShader.js | 5 +++ .../js/libs/shaders/LowresVertexShader.js | 5 +++ BlueMapCore/src/main/webroot/js/libs/ui/UI.js | 5 +++ BlueMapCore/src/main/webroot/js/libs/utils.js | 4 ++ 13 files changed, 98 insertions(+), 30 deletions(-) diff --git a/.gitignore b/.gitignore index d36fc987..1ea6ffe2 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,10 @@ bin/ bin/* */bin/* +doc/ +doc/* +*/doc/* + .classpath */.classpath diff --git a/BlueMapAPI b/BlueMapAPI index ead81942..161fc1c9 160000 --- a/BlueMapAPI +++ b/BlueMapAPI @@ -1 +1 @@ -Subproject commit ead819422f495b4ab6d15bd7aed7fa59fec17ceb +Subproject commit 161fc1c96808594d0ad522536c36ef237f69df93 diff --git a/BlueMapCommon/src/main/java/de/bluecolored/bluemap/common/api/marker/ShapeMarkerImpl.java b/BlueMapCommon/src/main/java/de/bluecolored/bluemap/common/api/marker/ShapeMarkerImpl.java index cff14def..2d2cd025 100644 --- a/BlueMapCommon/src/main/java/de/bluecolored/bluemap/common/api/marker/ShapeMarkerImpl.java +++ b/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); diff --git a/BlueMapCore/src/main/webroot/js/libs/BlueMap.js b/BlueMapCore/src/main/webroot/js/libs/BlueMap.js index dc82985f..b94afaa9 100644 --- a/BlueMapCore/src/main/webroot/js/libs/BlueMap.js +++ b/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); - this.maps = []; - for (let map in this.settings.maps) { - if (this.settings["maps"].hasOwnProperty(map) && this.settings.maps[map].enabled){ - this.maps.push(map); + try { + this.settings = JSON.parse(settings); + this.maps = []; + for (let map in this.settings.maps) { + 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); } diff --git a/BlueMapCore/src/main/webroot/js/libs/hud/HudInfo.js b/BlueMapCore/src/main/webroot/js/libs/hud/HudInfo.js index daaed65a..ba33699b 100644 --- a/BlueMapCore/src/main/webroot/js/libs/hud/HudInfo.js +++ b/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; } }; diff --git a/BlueMapCore/src/main/webroot/js/libs/hud/MarkerManager.js b/BlueMapCore/src/main/webroot/js/libs/hud/MarkerManager.js index 1d4de058..ea722a8e 100644 --- a/BlueMapCore/src/main/webroot/js/libs/hud/MarkerManager.js +++ b/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); - resolve(); + try { + this.markerData = JSON.parse(markerData); + resolve(); + } catch (e){ + reject(e); + } }, xhr => {}, error => { diff --git a/BlueMapCore/src/main/webroot/js/libs/hud/ShapeMarker.js b/BlueMapCore/src/main/webroot/js/libs/hud/ShapeMarker.js index 42668fd0..4d3c6eb1 100644 --- a/BlueMapCore/src/main/webroot/js/libs/hud/ShapeMarker.js +++ b/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; - fill.add(line); + if (this.fillColor.a > 0 || this.borderColor.a <= 0) { + this.renderObject = fill; + fill.add(line); + } else { + this.renderObject = line; + } this.renderObject.userData = { marker: this, diff --git a/BlueMapCore/src/main/webroot/js/libs/shaders/HiresFragmentShader.js b/BlueMapCore/src/main/webroot/js/libs/shaders/HiresFragmentShader.js index 68b455d5..602f48e8 100644 --- a/BlueMapCore/src/main/webroot/js/libs/shaders/HiresFragmentShader.js +++ b/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} } `; diff --git a/BlueMapCore/src/main/webroot/js/libs/shaders/HiresVertexShader.js b/BlueMapCore/src/main/webroot/js/libs/shaders/HiresVertexShader.js index b6fd3f41..0feab341 100644 --- a/BlueMapCore/src/main/webroot/js/libs/shaders/HiresVertexShader.js +++ b/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} } `; diff --git a/BlueMapCore/src/main/webroot/js/libs/shaders/LowresFragmentShader.js b/BlueMapCore/src/main/webroot/js/libs/shaders/LowresFragmentShader.js index f1760f1a..d8615c13 100644 --- a/BlueMapCore/src/main/webroot/js/libs/shaders/LowresFragmentShader.js +++ b/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} } `; diff --git a/BlueMapCore/src/main/webroot/js/libs/shaders/LowresVertexShader.js b/BlueMapCore/src/main/webroot/js/libs/shaders/LowresVertexShader.js index 9c90afef..ae9a4485 100644 --- a/BlueMapCore/src/main/webroot/js/libs/shaders/LowresVertexShader.js +++ b/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} } `; diff --git a/BlueMapCore/src/main/webroot/js/libs/ui/UI.js b/BlueMapCore/src/main/webroot/js/libs/ui/UI.js index b8bb6ab8..2a623745 100644 --- a/BlueMapCore/src/main/webroot/js/libs/ui/UI.js +++ b/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(); diff --git a/BlueMapCore/src/main/webroot/js/libs/utils.js b/BlueMapCore/src/main/webroot/js/libs/utils.js index 070f0613..087fa9a5 100644 --- a/BlueMapCore/src/main/webroot/js/libs/utils.js +++ b/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;