Implement API 1.1.0 and fix flickering with markers when zoomed out

This commit is contained in:
Blue (Lukas Rieger) 2020-04-23 18:08:19 +02:00
parent 341c1591fd
commit b6c0d64d62
13 changed files with 98 additions and 30 deletions

4
.gitignore vendored
View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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