UNPKG

photo-sphere-viewer

Version:

A JavaScript library to display Photo Sphere panoramas

553 lines (467 loc) 15.9 kB
import { BoxGeometry, Frustum, ImageLoader, MathUtils, Matrix4, Mesh, MeshBasicMaterial, Vector2, Vector3 } from 'three'; import { CONSTANTS, PSVError, utils } from '../..'; import { CUBE_HASHMAP, CubemapAdapter } from '../cubemap'; import { Queue } from '../shared/Queue'; import { Task } from '../shared/Task'; import { buildErrorMaterial, createBaseTexture } from '../shared/tiles-utils'; if (!CubemapAdapter) { throw new PSVError('CubemapAdapter is missing, please load cubemap.js before cubemap-tiles.js'); } /** * @callback TileUrl * @summary Function called to build a tile url * @memberOf PSV.adapters.CubemapTilesAdapter * @param {'left'|'front'|'right'|'back'|'top'|'bottom'} face * @param {int} col * @param {int} row * @returns {string} */ /** * @typedef {Object} PSV.adapters.CubemapTilesAdapter.Panorama * @summary Configuration of a tiled cubemap * @property {PSV.adapters.CubemapAdapter.Cubemap} [baseUrl] - low resolution panorama loaded before tiles * @property {int} faceSize - size of a face * @property {int} nbTiles - number of tiles on a side of a face * @property {PSV.adapters.CubemapTilesAdapter.TileUrl} tileUrl - function to build a tile url */ /** * @typedef {Object} PSV.adapters.CubemapTilesAdapter.Options * @property {boolean} [flipTopBottom=false] - set to true if the top and bottom faces are not correctly oriented * @property {boolean} [showErrorTile=true] - shows a warning sign on tiles that cannot be loaded * @property {boolean} [baseBlur=true] - applies a blur to the low resolution panorama */ /** * @typedef {Object} PSV.adapters.CubemapTilesAdapter.Tile * @private * @property {int} face * @property {int} col * @property {int} row * @property {float} angle */ const CUBE_SEGMENTS = 16; const NB_VERTICES_BY_FACE = 6; const NB_VERTICES_BY_PLANE = NB_VERTICES_BY_FACE * CUBE_SEGMENTS * CUBE_SEGMENTS; const NB_VERTICES = 6 * NB_VERTICES_BY_PLANE; const NB_GROUPS_BY_FACE = CUBE_SEGMENTS * CUBE_SEGMENTS; const ATTR_UV = 'uv'; const ATTR_ORIGINAL_UV = 'originaluv'; const ATTR_POSITION = 'position'; function tileId(tile) { return `${tile.face}:${tile.col}x${tile.row}`; } const frustum = new Frustum(); const projScreenMatrix = new Matrix4(); const vertexPosition = new Vector3(); /** * @summary Adapter for tiled cubemaps * @memberof PSV.adapters * @extends PSV.adapters.AbstractAdapter */ export class CubemapTilesAdapter extends CubemapAdapter { static id = 'cubemap-tiles'; static supportsDownload = false; static supportsOverlay = false; /** * @param {PSV.Viewer} psv * @param {PSV.adapters.CubemapTilesAdapter.Options} options */ constructor(psv, options) { super(psv); /** * @member {PSV.adapters.CubemapTilesAdapter.Options} * @private */ this.config = { flipTopBottom: false, showErrorTile: true, baseBlur : true, ...options, }; /** * @member {PSV.adapters.Queue} * @private */ this.queue = new Queue(); /** * @type {Object} * @property {int} tileSize - size in pixels of a tile * @property {int} facesByTile - number of mesh faces by tile * @property {Record<string, boolean>} tiles - loaded tiles * @property {external:THREE.BoxGeometry} geom * @property {external:THREE.MeshBasicMaterial[]} materials * @property {external:THREE.MeshBasicMaterial} errorMaterial * @private */ this.prop = { tileSize : 0, facesByTile : 0, tiles : {}, geom : null, materials : [], errorMaterial: null, }; /** * @member {external:THREE.ImageLoader} * @private */ this.loader = null; if (this.psv.config.requestHeaders) { utils.logWarn('CubemapTilesAdapter fallbacks to file loader because "requestHeaders" where provided. ' + 'Consider removing "requestHeaders" if you experience performances issues.'); } else { this.loader = new ImageLoader(); if (this.psv.config.withCredentials) { this.loader.setWithCredentials(true); } } this.psv.on(CONSTANTS.EVENTS.POSITION_UPDATED, this); this.psv.on(CONSTANTS.EVENTS.ZOOM_UPDATED, this); } /** * @override */ destroy() { this.psv.off(CONSTANTS.EVENTS.POSITION_UPDATED, this); this.psv.off(CONSTANTS.EVENTS.ZOOM_UPDATED, this); this.__cleanup(); this.prop.errorMaterial?.map?.dispose(); this.prop.errorMaterial?.dispose(); delete this.queue; delete this.loader; delete this.prop.geom; delete this.prop.errorMaterial; super.destroy(); } /** * @private */ handleEvent(e) { /* eslint-disable */ switch (e.type) { case CONSTANTS.EVENTS.POSITION_UPDATED: case CONSTANTS.EVENTS.ZOOM_UPDATED: this.__refresh(); break; } /* eslint-enable */ } /** * @summary Clears loading queue, dispose all materials * @private */ __cleanup() { this.queue.clear(); this.prop.tiles = {}; this.prop.materials.forEach((mat) => { mat?.map?.dispose(); mat?.dispose(); }); this.prop.materials.length = 0; } /** * @override */ supportsTransition(panorama) { return !!panorama.baseUrl; } /** * @override */ supportsPreload(panorama) { return !!panorama.baseUrl; } /** * @override * @param {PSV.adapters.CubemapTilesAdapter.Panorama} panorama * @returns {Promise.<PSV.TextureData>} */ loadTexture(panorama) { if (typeof panorama !== 'object' || !panorama.faceSize || !panorama.nbTiles || !panorama.tileUrl) { return Promise.reject(new PSVError('Invalid panorama configuration, are you using the right adapter?')); } if (panorama.nbTiles > CUBE_SEGMENTS) { return Promise.reject(new PSVError(`Panorama nbTiles must not be greater than ${CUBE_SEGMENTS}.`)); } if (!MathUtils.isPowerOfTwo(panorama.nbTiles)) { return Promise.reject(new PSVError('Panorama nbTiles must be power of 2.')); } if (panorama.baseUrl) { return super.loadTexture(panorama.baseUrl) .then(textureData => ({ panorama: panorama, texture : textureData.texture, })); } else { return Promise.resolve({ panorama }); } } /** * @override */ createMesh(scale = 1) { const cubeSize = CONSTANTS.SPHERE_RADIUS * 2 * scale; const geometry = new BoxGeometry(cubeSize, cubeSize, cubeSize, CUBE_SEGMENTS, CUBE_SEGMENTS, CUBE_SEGMENTS) .scale(1, 1, -1) .toNonIndexed(); geometry.clearGroups(); for (let i = 0, k = 0; i < NB_VERTICES; i += NB_VERTICES_BY_FACE) { geometry.addGroup(i, NB_VERTICES_BY_FACE, k++); } geometry.setAttribute(ATTR_ORIGINAL_UV, geometry.getAttribute(ATTR_UV).clone()); return new Mesh(geometry, []); } /** * @summary Applies the base texture and starts the loading of tiles * @override */ setTexture(mesh, textureData, transition) { const { panorama, texture } = textureData; if (transition) { this.__setTexture(mesh, texture); return; } this.__cleanup(); this.__setTexture(mesh, texture); this.prop.materials = mesh.material; this.prop.geom = mesh.geometry; this.prop.geom.setAttribute(ATTR_UV, this.prop.geom.getAttribute(ATTR_ORIGINAL_UV).clone()); this.prop.tileSize = panorama.faceSize / panorama.nbTiles; this.prop.facesByTile = CUBE_SEGMENTS / panorama.nbTiles; // this.psv.renderer.scene.add(createWireFrame(this.prop.geom)); setTimeout(() => this.__refresh(true)); } /** * @private */ __setTexture(mesh, texture) { for (let i = 0; i < 6; i++) { let material; if (texture) { if (this.config.flipTopBottom && (i === 2 || i === 3)) { texture[i].center = new Vector2(0.5, 0.5); texture[i].rotation = Math.PI; } material = new MeshBasicMaterial({ map: texture[i] }); } else { material = new MeshBasicMaterial({ opacity: 0, transparent: true }); } for (let j = 0; j < NB_GROUPS_BY_FACE; j++) { mesh.material.push(material); } } } /** * @override */ setTextureOpacity(mesh, opacity) { for (let i = 0; i < 6; i++) { mesh.material[i * NB_GROUPS_BY_FACE].opacity = opacity; mesh.material[i * NB_GROUPS_BY_FACE].transparent = opacity < 1; } } /** * @summary Compute visible tiles and load them * @private */ __refresh(init = false) { // eslint-disable-line no-unused-vars if (!this.prop.geom) { return; } const camera = this.psv.renderer.camera; camera.updateMatrixWorld(); projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); frustum.setFromProjectionMatrix(projScreenMatrix); const panorama = this.psv.config.panorama; const verticesPosition = this.prop.geom.getAttribute(ATTR_POSITION); const tilesToLoad = []; for (let face = 0; face < 6; face++) { for (let col = 0; col < panorama.nbTiles; col++) { for (let row = 0; row < panorama.nbTiles; row++) { // for each tile, find the vertices corresponding to the four corners // if at least one vertex is visible, the tile must be loaded // for larger tiles we also test the four edges centers and the tile center const verticesIndex = []; // top-left const v0 = face * NB_VERTICES_BY_PLANE + row * this.prop.facesByTile * CUBE_SEGMENTS * NB_VERTICES_BY_FACE + col * this.prop.facesByTile * NB_VERTICES_BY_FACE; // bottom-left const v1 = v0 + CUBE_SEGMENTS * NB_VERTICES_BY_FACE * (this.prop.facesByTile - 1) + 1; // bottom-right const v2 = v1 + this.prop.facesByTile * NB_VERTICES_BY_FACE - 3; // top-right const v3 = v0 + this.prop.facesByTile * NB_VERTICES_BY_FACE - 1; verticesIndex.push(v0, v1, v2, v3); if (this.prop.facesByTile >= CUBE_SEGMENTS / 2) { // top-center const v4 = v0 + this.prop.facesByTile / 2 * NB_VERTICES_BY_FACE - 1; // bottom-center const v5 = v1 + this.prop.facesByTile / 2 * NB_VERTICES_BY_FACE - 3; // left-center const v6 = v0 + CUBE_SEGMENTS * NB_VERTICES_BY_FACE * (this.prop.facesByTile / 2 - 1) + 1; // right-center const v7 = v6 + this.prop.facesByTile * NB_VERTICES_BY_FACE - 3; // center-center const v8 = v6 + this.prop.facesByTile / 2 * NB_VERTICES_BY_FACE; verticesIndex.push(v4, v5, v6, v7, v8); } // if (init && face === 5 && col === 0 && row === 0) { // verticesIndex.forEach((vertexIdx) => { // this.psv.renderer.scene.add(createDot( // verticesPosition.getX(vertexIdx), // verticesPosition.getY(vertexIdx), // verticesPosition.getZ(vertexIdx) // )); // }); // } const vertexVisible = verticesIndex.some((vertexIdx) => { vertexPosition.set( verticesPosition.getX(vertexIdx), verticesPosition.getY(vertexIdx), verticesPosition.getZ(vertexIdx) ); vertexPosition.applyEuler(this.psv.renderer.meshContainer.rotation); return frustum.containsPoint(vertexPosition); }); if (vertexVisible) { const angle = vertexPosition.angleTo(this.psv.prop.direction); tilesToLoad.push({ face, col, row, angle }); } } } } this.__loadTiles(tilesToLoad); } /** * @summary Loads tiles and change existing tiles priority * @param {PSV.adapters.CubemapTilesAdapter.Tile[]} tiles * @private */ __loadTiles(tiles) { this.queue.disableAllTasks(); tiles.forEach((tile) => { const id = tileId(tile); if (this.prop.tiles[id]) { this.queue.setPriority(id, tile.angle); } else { this.prop.tiles[id] = true; this.queue.enqueue(new Task(id, tile.angle, task => this.__loadTile(tile, task))); } }); this.queue.start(); } /** * @summary Loads and draw a tile * @param {PSV.adapters.CubemapTilesAdapter.Tile} tile * @param {PSV.adapters.Task} task * @return {Promise} * @private */ __loadTile(tile, task) { const panorama = this.psv.config.panorama; let { col, row } = tile; if (this.config.flipTopBottom && (tile.face === 2 || tile.face === 3)) { col = panorama.nbTiles - col - 1; row = panorama.nbTiles - row - 1; } const url = panorama.tileUrl(CUBE_HASHMAP[tile.face], col, row); return this.__loadImage(url) .then((image) => { if (!task.isCancelled()) { const material = new MeshBasicMaterial({ map: utils.createTexture(image) }); this.__swapMaterial(tile.face, tile.col, tile.row, material); this.psv.needsUpdate(); } }) .catch(() => { if (!task.isCancelled() && this.config.showErrorTile) { if (!this.prop.errorMaterial) { this.prop.errorMaterial = buildErrorMaterial(this.prop.tileSize, this.prop.tileSize); } this.__swapMaterial(tile.face, tile.col, tile.row, this.prop.errorMaterial); this.psv.needsUpdate(); } }); } /** * @private */ __loadImage(url) { if (this.loader) { return new Promise((resolve, reject) => { this.loader.load(url, resolve, undefined, reject); }); } else { return this.psv.textureLoader.loadImage(url); } } /** * @summary Applies a new texture to the faces * @param {int} face * @param {int} col * @param {int} row * @param {external:THREE.MeshBasicMaterial} material * @private */ __swapMaterial(face, col, row, material) { const uvs = this.prop.geom.getAttribute(ATTR_UV); for (let c = 0; c < this.prop.facesByTile; c++) { for (let r = 0; r < this.prop.facesByTile; r++) { // position of the face (two triangles of the same square) const faceCol = col * this.prop.facesByTile + c; const faceRow = row * this.prop.facesByTile + r; // first vertex for this face (6 vertices in total) const firstVertex = NB_VERTICES_BY_PLANE * face + 6 * (CUBE_SEGMENTS * faceRow + faceCol); // swap material const matIndex = this.prop.geom.groups.find(g => g.start === firstVertex).materialIndex; this.prop.materials[matIndex] = material; // define new uvs let top = 1 - r / this.prop.facesByTile; let bottom = 1 - (r + 1) / this.prop.facesByTile; let left = c / this.prop.facesByTile; let right = (c + 1) / this.prop.facesByTile; if (this.config.flipTopBottom && (face === 2 || face === 3)) { top = 1 - top; bottom = 1 - bottom; left = 1 - left; right = 1 - right; } uvs.setXY(firstVertex, left, top); uvs.setXY(firstVertex + 1, left, bottom); uvs.setXY(firstVertex + 2, right, top); uvs.setXY(firstVertex + 3, left, bottom); uvs.setXY(firstVertex + 4, right, bottom); uvs.setXY(firstVertex + 5, right, top); } } uvs.needsUpdate = true; } /** * @summary Create the texture for the base image * @param {HTMLImageElement} img * @return {external:THREE.Texture} * @override * @private */ __createCubemapTexture(img) { if (img.width !== img.height) { utils.logWarn('Invalid base image, the width should equals the height'); } return createBaseTexture(img, this.config.baseBlur, w => w); } }