WIP overlay plugin

mistic100 · Oct 6, 2023 · c99e03f · c99e03f
1 parent 8132556
commit c99e03f
Show file tree

Hide file tree

Showing 21 changed files with 620 additions and 76 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -62,6 +62,7 @@ <h5 class="card-title">Plugins</h5>
                             <a href="plugin-markers.html" class="list-group-item list-group-item-action">Markers</a>
                             <a href="plugin-markers-layers.html" class="list-group-item list-group-item-action">Markers layers</a>
                             <a href="plugin-markers-cubemap.html" class="list-group-item list-group-item-action">Markers (cubemap)</a>
+                            <a href="plugin-overlay.html" class="list-group-item list-group-item-action">Overlay</a>
                             <a href="plugin-resolution.html" class="list-group-item list-group-item-action">Resolution</a>
                             <a href="plugin-settings.html" class="list-group-item list-group-item-action">Settings</a>
                             <a href="adapter-equirectangular-video.html" class="list-group-item list-group-item-action">Video</a>

diff --git a/examples/plugin-overlay-cubemap.html b/examples/plugin-overlay-cubemap.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PhotoSphereViewer - overlay cubemap demo</title>
+
+        <link rel="stylesheet" href="/dist/core/index.css" />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div id="photosphere"></div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
+                    "@photo-sphere-viewer/cubemap-adapter": "/dist/cubemap-adapter/index.module.js",
+                    "@photo-sphere-viewer/overlay-plugin": "/dist/overlay-plugin/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { Viewer } from '@photo-sphere-viewer/core';
+            import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';
+            import { OverlayPlugin } from '@photo-sphere-viewer/overlay-plugin';
+
+            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+
+            const viewer = new Viewer({
+                container: 'photosphere',
+                adapter: CubemapAdapter,
+                panorama: {
+                    left: baseUrl + 'cubemap/px.jpg',
+                    front: baseUrl + 'cubemap/nz.jpg',
+                    right: baseUrl + 'cubemap/nx.jpg',
+                    back: baseUrl + 'cubemap/pz.jpg',
+                    top: baseUrl + 'cubemap/py.jpg',
+                    bottom: baseUrl + 'cubemap/ny.jpg',
+                },
+                caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
+                loadingImg: baseUrl + 'loader.gif',
+                plugins: [
+                    [OverlayPlugin, {
+                        overlays: [
+                            {
+                                id: 'xray',
+                                path: {
+                                    left: baseUrl + 'cubemap-overlay/px.png',
+                                    front: baseUrl + 'cubemap-overlay/nz.png',
+                                    right: baseUrl + 'cubemap-overlay/nx.png',
+                                    back: baseUrl + 'cubemap-overlay/pz.png',
+                                    top: baseUrl + 'cubemap-overlay/py.png',
+                                    bottom: baseUrl + 'cubemap-overlay/ny.png',
+                                },
+                                opacity: .8,
+                                zIndex: 1,
+                            },
+                        ],
+                    }],
+                ],
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>
diff --git a/examples/plugin-overlay.html b/examples/plugin-overlay.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PhotoSphereViewer - overlay demo</title>
+
+        <link rel="stylesheet" href="/dist/core/index.css" />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div id="photosphere"></div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
+                    "@photo-sphere-viewer/overlay-plugin": "/dist/overlay-plugin/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { Viewer } from '@photo-sphere-viewer/core';
+            import { OverlayPlugin } from '@photo-sphere-viewer/overlay-plugin';
+
+            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+
+            const viewer = new Viewer({
+                container: 'photosphere',
+                panorama: baseUrl + 'sphere.jpg',
+                caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
+                loadingImg: baseUrl + 'loader.gif',
+                plugins: [
+                    [OverlayPlugin, {
+                        overlays: [
+                            {
+                                id: 'xray',
+                                path: baseUrl + 'sphere-overlay.png',
+                                opacity: .8,
+                                zIndex: 1,
+                            },
+                            {
+                                path: baseUrl + 'sphere-small.jpg',
+                                opacity: 0.5,
+                                yaw: -0.81,
+                                pitch: 0.19,
+                                width: 0.8,
+                                height: 0.4,
+                                zIndex: 2,
+                            },
+                            {
+                                id: 'rick',
+                                path: baseUrl + 'pictos/rick.webm',
+                                type: 'video',
+                                yaw: 0,
+                                pitch: 0.19,
+                                width: 0.2,
+                                height: 0.4,
+                                zIndex: 3,
+                            }
+                        ],
+                    }],
+                ],
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>
diff --git a/packages/core/src/Viewer.ts b/packages/core/src/Viewer.ts
@@ -460,6 +460,7 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
 
     /**
      * Loads a new overlay
+     * @deprecated Use the `overlay` plugin instead
      */
     setOverlay(path: any, opacity = this.config.overlayOpacity): Promise<void> {
         const supportsOverlay = (this.adapter.constructor as typeof AbstractAdapter).supportsOverlay;
@@ -490,6 +491,7 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
                             croppedY: r * p.croppedY,
                         };
                     },
+                    false,
                     false
                 )
                 .then((textureData) => {

diff --git a/packages/core/src/adapters/AbstractAdapter.ts b/packages/core/src/adapters/AbstractAdapter.ts
@@ -20,6 +20,7 @@ export abstract class AbstractAdapter<TPanorama, TTexture> {
 
     /**
      * Indicates if the adapter can display an additional transparent image above the panorama
+     * @deprecated
      */
     static readonly supportsOverlay: boolean = false;
 
@@ -61,6 +62,7 @@ export abstract class AbstractAdapter<TPanorama, TTexture> {
     abstract loadTexture(
         panorama: TPanorama,
         newPanoData?: PanoData | PanoDataProvider,
+        loader?: boolean,
         useXmpPanoData?: boolean
     ): Promise<TextureData<TTexture, TPanorama>>;
 
@@ -86,6 +88,7 @@ export abstract class AbstractAdapter<TPanorama, TTexture> {
 
     /**
      * Applies the overlay to the mesh
+     * @deprecated
      */
     abstract setOverlay(mesh: Mesh, textureData: TextureData<TTexture, TPanorama>, opacity: number): void;
 

diff --git a/packages/core/src/adapters/EquirectangularAdapter.ts b/packages/core/src/adapters/EquirectangularAdapter.ts
@@ -1,4 +1,4 @@
-import { BufferGeometry, MathUtils, Mesh, ShaderMaterial, SphereGeometry, Texture } from 'three';
+import { MathUtils, Mesh, ShaderMaterial, SphereGeometry, Texture } from 'three';
 import { PSVError } from '../PSVError';
 import type { Viewer } from '../Viewer';
 import { SPHERE_RADIUS } from '../data/constants';
@@ -38,7 +38,7 @@ export type EquirectangularAdapterConfig = {
     blur?: boolean;
 };
 
-type EquirectangularMesh = Mesh<BufferGeometry, ShaderMaterial>;
+type EquirectangularMesh = Mesh<SphereGeometry, ShaderMaterial>;
 type EquirectangularTexture = TextureData<Texture, string>;
 
 const getConfig = getConfigParser<EquirectangularAdapterConfig>(
@@ -71,8 +71,8 @@ export class EquirectangularAdapter extends AbstractAdapter<string, Texture> {
 
     private interpolationWorker: Worker;
 
-    private readonly SPHERE_SEGMENTS: number;
-    private readonly SPHERE_HORIZONTAL_SEGMENTS: number;
+    readonly SPHERE_SEGMENTS: number;
+    readonly SPHERE_HORIZONTAL_SEGMENTS: number;
 
     constructor(viewer: Viewer, config?: EquirectangularAdapterConfig) {
         super(viewer);
@@ -114,14 +114,15 @@ export class EquirectangularAdapter extends AbstractAdapter<string, Texture> {
 
     async loadTexture(
         panorama: string,
-        newPanoData: PanoData | PanoDataProvider,
+        newPanoData?: PanoData | PanoDataProvider,
+        loader = true,
         useXmpPanoData = this.config.useXmpData
     ): Promise<EquirectangularTexture> {
         if (typeof panorama !== 'string') {
             return Promise.reject(new PSVError('Invalid panorama url, are you using the right adapter?'));
         }
 
-        const blob = await this.viewer.textureLoader.loadFile(panorama, (p) => this.viewer.loader.setProgress(p), panorama);
+        const blob = await this.viewer.textureLoader.loadFile(panorama, loader ? (p) => this.viewer.loader.setProgress(p) : null, panorama);
         const xmpPanoData = useXmpPanoData ? await this.loadXMP(blob) : null;
         const img = await this.viewer.textureLoader.blobToImage(blob);
 
@@ -290,7 +291,7 @@ export class EquirectangularAdapter extends AbstractAdapter<string, Texture> {
             this.SPHERE_SEGMENTS,
             this.SPHERE_HORIZONTAL_SEGMENTS,
             -Math.PI / 2
-        ).scale(-1, 1, 1) as SphereGeometry;
+        ).scale(-1, 1, 1);
 
         const material = AbstractAdapter.createOverlayMaterial();
 

diff --git a/packages/core/src/data/config.ts b/packages/core/src/data/config.ts
@@ -1,10 +1,10 @@
 import { MathUtils } from 'three';
+import { PSVError } from '../PSVError';
 import { adapterInterop } from '../adapters/AbstractAdapter';
 import { EquirectangularAdapter } from '../adapters/EquirectangularAdapter';
 import { ParsedViewerConfig, ReadonlyViewerConfig, ViewerConfig } from '../model';
 import { pluginInterop } from '../plugins/AbstractPlugin';
-import { PSVError } from '../PSVError';
-import { clone, ConfigParsers, getConfigParser, logWarn, parseAngle } from '../utils';
+import { ConfigParsers, clone, getConfigParser, logWarn, parseAngle } from '../utils';
 import { ACTIONS, KEY_CODES } from './constants';
 
 /**
@@ -244,6 +244,12 @@ export const CONFIG_PARSERS: ConfigParsers<ViewerConfig, ParsedViewerConfig> = {
         }
         return canvasBackground;
     },
+    overlay: (overlay) => {
+        if (overlay !== null) {
+            logWarn(`"overlay" option is deprecated, use "@photo-sphere-viewer/overlay-plugin" instead.`);
+        }
+        return overlay;
+    },
 };
 
 /**

diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -149,11 +149,11 @@ export type PanoramaOptions = Partial<ExtendedPosition> & {
      */
     panoData?: PanoData | PanoDataProvider;
     /**
-     * new overlay to apply to the panorama
+     * @deprecated Use the `overlay` plugin instead
      */
     overlay?: any;
     /**
-     * new overlay opacity
+     * @deprecated Use the `overlay` plugin instead
      */
     overlayOpacity?: number;
 };
@@ -287,8 +287,9 @@ export type NavbarCustomButton = {
 export type ViewerConfig = {
     container: HTMLElement | string;
     panorama?: any;
+    /** @deprecated Use the `overlay` plugin instead */
     overlay?: any;
-    /** @default 1 */
+    /** @deprecated Use the `overlay` plugin instead */
     overlayOpacity?: number;
     /** @default equirectangular */
     adapter?: AdapterConstructor | [AdapterConstructor, any];