BlueMapWeb/src/MapViewer.js

432 lines
12 KiB
JavaScript
Raw Normal View History

2021-02-19 16:23:11 +01:00
/*
* This file is part of BlueMap, licensed under the MIT License (MIT).
*
* Copyright (c) Blue (Lukas Rieger) <https://bluecolored.de>
* Copyright (c) contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import {Color, PerspectiveCamera, Raycaster, Scene, Vector2, Vector3, WebGLRenderer} from "three";
2021-01-18 16:51:03 +01:00
import {Map} from "./map/Map";
import {SkyboxScene} from "./skybox/SkyboxScene";
import {ControlsManager} from "./controls/ControlsManager";
import Stats from "./util/Stats";
2021-03-18 21:05:12 +01:00
import {alert, dispatchEvent, elementOffset, generateCacheHash, htmlToElement} from "./util/Utils";
2021-01-18 16:51:03 +01:00
import {TileManager} from "./map/TileManager";
import {HIRES_VERTEX_SHADER} from "./map/hires/HiresVertexShader";
import {HIRES_FRAGMENT_SHADER} from "./map/hires/HiresFragmentShader";
import {LOWRES_VERTEX_SHADER} from "./map/lowres/LowresVertexShader";
import {LOWRES_FRAGMENT_SHADER} from "./map/lowres/LowresFragmentShader";
import {CombinedCamera} from "./util/CombinedCamera";
import {CSS2DRenderer} from "./util/CSS2DRenderer";
import {MarkerSet} from "./markers/MarkerSet";
2021-01-18 16:51:03 +01:00
export class MapViewer {
/**
* @param element {Element}
* @param events {EventTarget}
*/
2021-02-19 16:06:47 +01:00
constructor(element, events = element) {
2021-01-18 16:51:03 +01:00
Object.defineProperty( this, 'isMapViewer', { value: true } );
this.rootElement = element;
this.events = events;
this.data = {
map: null,
camera: null,
controlsManager: null,
uniforms: {
sunlightStrength: { value: 1 },
ambientLight: { value: 0 },
skyColor: { value: new Color(0.5, 0.5, 1) },
hiresTileMap: {
value: {
map: null,
size: TileManager.tileMapSize,
scale: new Vector2(1, 1),
translate: new Vector2(),
pos: new Vector2(),
}
}
},
superSampling: 1,
loadedCenter: new Vector2(0, 0),
loadedHiresViewDistance: 200,
loadedLowresViewDistance: 2000,
}
2021-03-18 21:05:12 +01:00
this.tileCacheHash = generateCacheHash();
2021-01-18 16:51:03 +01:00
this.stats = new Stats();
this.stats.hide();
// renderer
this.renderer = new WebGLRenderer({
antialias: true,
sortObjects: true,
preserveDrawingBuffer: true,
logarithmicDepthBuffer: true,
});
this.renderer.autoClear = false;
this.renderer.uniforms = this.data.uniforms;
2021-01-18 16:51:03 +01:00
// CSS2D renderer
2021-03-18 21:05:12 +01:00
this.css2dRenderer = new CSS2DRenderer(this.events);
2021-01-18 16:51:03 +01:00
this.skyboxScene = new SkyboxScene(this.data.uniforms);
2021-01-18 16:51:03 +01:00
this.camera = new CombinedCamera(75, 1, 0.1, 10000, 0);
this.skyboxCamera = new PerspectiveCamera(75, 1, 0.1, 10000);
this.controlsManager = new ControlsManager(this, this.camera);
this.raycaster = new Raycaster();
this.raycaster.layers.enableAll();
this.raycaster.params.Line2 = {threshold: 20}
/** @type {Map} */
2021-01-18 16:51:03 +01:00
this.map = null;
this.markers = new MarkerSet("bm-root");
2021-01-18 16:51:03 +01:00
this.lastFrame = 0;
// initialize
this.initializeRootElement();
2021-02-19 16:06:47 +01:00
// handle window resizes
2021-01-18 16:51:03 +01:00
window.addEventListener("resize", this.handleContainerResize);
// start render-loop
requestAnimationFrame(this.renderLoop);
}
/**
* Initializes the root-element
*/
initializeRootElement() {
this.rootElement.innerHTML = "";
let outerDiv = htmlToElement(`<div style="position: relative; width: 100%; height: 100%; overflow: hidden;"></div>`);
2021-02-19 16:06:47 +01:00
this.rootElement.appendChild(outerDiv);
2021-01-18 16:51:03 +01:00
// 3d-canvas
outerDiv.appendChild(this.renderer.domElement);
// html-markers
this.css2dRenderer.domElement.style.position = 'absolute';
this.css2dRenderer.domElement.style.top = '0';
this.css2dRenderer.domElement.style.left = '0';
this.css2dRenderer.domElement.style.pointerEvents = 'none';
outerDiv.appendChild(this.css2dRenderer.domElement);
// performance monitor
outerDiv.appendChild(this.stats.dom);
this.handleContainerResize();
}
/**
* Updates the render-resolution and aspect ratio based on the size of the root-element
*/
handleContainerResize = () => {
this.renderer.setSize(this.rootElement.clientWidth, this.rootElement.clientHeight);
this.renderer.setPixelRatio(window.devicePixelRatio * this.superSampling);
2021-01-18 16:51:03 +01:00
this.css2dRenderer.setSize(this.rootElement.clientWidth, this.rootElement.clientHeight);
this.camera.aspect = this.rootElement.clientWidth / this.rootElement.clientHeight;
this.camera.updateProjectionMatrix();
};
/**
2021-02-19 16:06:47 +01:00
* Triggers an interaction on the screen (map), e.g. a mouse-click.
*
* This will first attempt to invoke the onClick() method on the Object3D (e.g. Markers) that has been clicked.
* And if none of those consumed the event, it will fire a <code>bluemapMapInteraction</code> event.
*
* @param screenPosition {Vector2} - Clicked position on the screen (usually event.x, event.y)
* @param data {object} - Custom event data that will be added to the interaction-event
*/
2021-02-19 16:06:47 +01:00
handleMapInteraction(screenPosition, data = {}) {
let rootOffset = elementOffset(this.rootElement);
let normalizedScreenPos = new Vector2(
((screenPosition.x - rootOffset.top) / this.rootElement.clientWidth) * 2 - 1,
-((screenPosition.y - rootOffset.left) / this.rootElement.clientHeight) * 2 + 1
);
2021-01-18 16:51:03 +01:00
2021-02-19 16:06:47 +01:00
if (this.map && this.map.isLoaded){
this.raycaster.setFromCamera(normalizedScreenPos, this.camera);
2021-01-18 16:51:03 +01:00
2021-02-19 16:06:47 +01:00
// check Object3D interactions
let intersects = this.raycaster.intersectObjects([this.map.hiresTileManager.scene, this.map.lowresTileManager.scene, this.markers], true);
2021-03-09 12:57:35 +01:00
let hit = null;
let lowresHit = null;
let hiresHit = null;
2021-01-18 16:51:03 +01:00
let covered = false;
for (let i = 0; i < intersects.length; i++) {
if (intersects[i].object){
let object = intersects[i].object;
2021-02-19 16:06:47 +01:00
2021-03-09 12:57:35 +01:00
// check if deeply-visible
let parent = object;
let visible = parent.visible;
while (visible && parent.parent){
parent = parent.parent;
visible = parent.visible;
}
if (visible) {
if (!hit) hit = intersects[i];
// find root-scene
let parentRoot = object;
while(parentRoot.parent) parentRoot = parentRoot.parent;
if (parentRoot === this.map.lowresTileManager.scene) {
if (!lowresHit) lowresHit = intersects[i];
}
if (parentRoot === this.map.hiresTileManager.scene) {
if (!hiresHit) hiresHit = intersects[i];
}
if (!covered || (object.material && !object.material.depthTest)) {
2021-03-09 12:57:35 +01:00
if (object.onClick && object.onClick({
2021-02-19 16:06:47 +01:00
data: data,
intersection: intersects[i]
})) return;
2021-02-19 16:06:47 +01:00
}
if (parentRoot !== this.map.lowresTileManager.scene) {
covered = true;
}
2021-01-18 16:51:03 +01:00
}
}
}
2021-02-19 16:06:47 +01:00
// fire event
dispatchEvent(this.events, "bluemapMapInteraction", {
data: data,
2021-03-09 12:57:35 +01:00
hit: hit,
hiresHit: hiresHit,
lowresHit: lowresHit,
intersections: intersects,
ray: this.raycaster.ray
2021-02-19 16:06:47 +01:00
});
2021-01-18 16:51:03 +01:00
}
}
/**
2021-02-19 16:06:47 +01:00
* @private
2021-01-18 16:51:03 +01:00
* The render-loop to update and possibly render a new frame.
* @param now {number} the current time in milliseconds
2021-01-18 16:51:03 +01:00
*/
renderLoop = (now) => {
requestAnimationFrame(this.renderLoop);
// calculate delta time
if (this.lastFrame <= 0) this.lastFrame = now;
2021-01-18 16:51:03 +01:00
let delta = now - this.lastFrame;
this.lastFrame = now;
// update stats
this.stats.begin();
// update controls
if (this.map != null) {
this.controlsManager.update(delta, this.map);
}
// render
this.render(delta);
// update stats
this.stats.update();
};
/**
2021-02-19 16:06:47 +01:00
* @private
2021-01-18 16:51:03 +01:00
* Renders a frame
* @param delta {number}
2021-01-18 16:51:03 +01:00
*/
render(delta) {
dispatchEvent(this.events, "bluemapRenderFrame", {
delta: delta,
});
//prepare camera
this.camera.updateProjectionMatrix();
this.skyboxCamera.rotation.copy(this.camera.rotation);
this.skyboxCamera.updateProjectionMatrix();
//render
this.renderer.clear();
this.renderer.render(this.skyboxScene, this.skyboxCamera);
this.renderer.clearDepth();
if (this.map && this.map.isLoaded) {
//update uniforms
this.data.uniforms.hiresTileMap.value.pos.copy(this.map.hiresTileManager.centerTile);
2021-01-18 16:51:03 +01:00
2021-02-19 16:06:47 +01:00
this.renderer.render(this.map.lowresTileManager.scene, this.camera);
2021-01-18 16:51:03 +01:00
this.renderer.clearDepth();
2021-02-19 16:06:47 +01:00
if (this.controlsManager.distance < 2000) {
this.renderer.render(this.map.hiresTileManager.scene, this.camera);
}
2021-01-18 16:51:03 +01:00
}
// render markers
this.renderer.render(this.markers, this.camera);
this.css2dRenderer.render(this.markers, this.camera);
2021-01-18 16:51:03 +01:00
}
/**
* Changes / Sets the map that will be loaded and displayed
* @param map {Map}
2021-01-28 19:57:54 +01:00
* @returns Promise<void>
2021-01-18 16:51:03 +01:00
*/
2021-02-19 16:06:47 +01:00
switchMap(map = null) {
2021-01-18 16:51:03 +01:00
if (this.map && this.map.isMap) this.map.unload();
this.map = map;
if (this.map && this.map.isMap) {
2021-03-18 21:05:12 +01:00
return map.load(HIRES_VERTEX_SHADER, HIRES_FRAGMENT_SHADER, LOWRES_VERTEX_SHADER, LOWRES_FRAGMENT_SHADER, this.data.uniforms, this.tileCacheHash)
2021-01-18 16:51:03 +01:00
.then(() => {
2021-03-09 12:57:35 +01:00
for (let texture of this.map.loadedTextures){
this.renderer.initTexture(texture);
}
this.data.uniforms.skyColor.value = map.data.skyColor;
this.data.uniforms.ambientLight.value = map.data.ambientLight;
this.data.uniforms.hiresTileMap.value.map = map.hiresTileManager.tileMap.texture;
this.data.uniforms.hiresTileMap.value.scale.set(map.data.hires.tileSize.x, map.data.hires.tileSize.z);
this.data.uniforms.hiresTileMap.value.translate.set(map.data.hires.translate.x, map.data.hires.translate.z);
2021-01-18 16:51:03 +01:00
setTimeout(this.updateLoadedMapArea);
dispatchEvent(this.events, "bluemapMapChanged", {
map: map
});
})
.catch(error => {
alert(this.events, error, "error");
});
} else {
return Promise.resolve();
}
}
/**
2021-02-19 16:06:47 +01:00
* Loads the given area on the map (and unloads everything outside that area)
* @param centerX {number}
* @param centerZ {number}
* @param hiresViewDistance {number?}
* @param lowresViewDistance {number?}
*/
2021-01-18 16:51:03 +01:00
loadMapArea(centerX, centerZ, hiresViewDistance = -1, lowresViewDistance = -1) {
this.data.loadedCenter.set(centerX, centerZ);
if (hiresViewDistance >= 0) this.data.loadedHiresViewDistance = hiresViewDistance;
if (lowresViewDistance >= 0) this.data.loadedLowresViewDistance = lowresViewDistance;
2021-01-18 16:51:03 +01:00
this.updateLoadedMapArea();
}
2021-02-19 16:06:47 +01:00
updateLoadedMapArea = () => {
if (!this.map) return;
this.map.loadMapArea(this.data.loadedCenter.x, this.data.loadedCenter.y, this.data.loadedHiresViewDistance, this.data.loadedLowresViewDistance);
2021-02-19 16:06:47 +01:00
}
2021-03-18 21:05:12 +01:00
clearTileCache(newTileCacheHash) {
if (!newTileCacheHash) newTileCacheHash = generateCacheHash();
this.tileCacheHash = newTileCacheHash;
if (this.map) {
this.map.lowresTileManager.tileLoader.tileCacheHash = this.tileCacheHash;
this.map.hiresTileManager.tileLoader.tileCacheHash = this.tileCacheHash;
}
}
/**
* @returns {number}
*/
2021-01-18 16:51:03 +01:00
get superSampling() {
return this.data.superSampling;
2021-01-18 16:51:03 +01:00
}
/**
* @param value {number}
*/
2021-01-18 16:51:03 +01:00
set superSampling(value) {
this.data.superSampling = value;
2021-01-18 16:51:03 +01:00
this.handleContainerResize();
}
/**
* @returns {CombinedCamera}
*/
get camera() {
return this._camera;
}
/**
* @param value {CombinedCamera}
*/
set camera(value) {
this._camera = value;
this.data.camera = value.data;
}
/**
* @returns {ControlsManager}
*/
get controlsManager() {
return this._controlsManager;
}
/**
* @param value {ControlsManager}
*/
set controlsManager(value) {
this._controlsManager = value;
this.data.controlsManager = value.data;
}
/**
* @returns {Map}
*/
get map() {
return this._map;
}
/**
* @param value {Map}
*/
set map(value) {
this._map = value;
if (value) this.data.map = value.data;
}
2021-01-18 16:51:03 +01:00
}