Skip to content

Commit

Permalink
WIP overlays plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistic100
mistic100 committed Oct 6, 2023
1 parent 8132556 commit 9b325f0
Show file tree
Hide file tree
Showing 22 changed files with 758 additions and 71 deletions.
2 changes: 2 additions & 0 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ <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-overlays.html" class="list-group-item list-group-item-action">Overlays</a>
<a href="plugin-overlays-cubemap.html" class="list-group-item list-group-item-action">Overlays (cubemap)</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>
Expand Down
75 changes: 75 additions & 0 deletions examples/plugin-overlays-cubemap.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PhotoSphereViewer - overlays 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/overlays-plugin": "/dist/overlays-plugin/index.module.js"
}
}
</script>

<script type="module">
import { Viewer } from '@photo-sphere-viewer/core';
import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';
import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-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: [
[OverlaysPlugin, {
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,
},
// {
// id: 'xray',
// path: baseUrl + 'sphere-overlay.png',
// opacity: .8,
// zIndex: 1,
// },
],
}],
],
});

window.viewer = viewer;
</script>
</body>
</html>
84 changes: 84 additions & 0 deletions examples/plugin-overlays.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PhotoSphereViewer - overlays 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/overlays-plugin": "/dist/overlays-plugin/index.module.js"
}
}
</script>

<script type="module">
import { Viewer } from '@photo-sphere-viewer/core';
import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-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: [
[OverlaysPlugin, {
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,
}
],
}],
],
});

const overlays = viewer.getPlugin('overlay');

overlays.addEventListener('overlay-click', ({overlayId}) => {
if (overlayId === 'rick') {
const video = overlays.getVideo(overlayId);
if (video.paused) {
video.play();
} else {
video.pause();
}
}
});

window.viewer = viewer;
</script>
</body>
</html>
2 changes: 2 additions & 0 deletions packages/core/src/Viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -490,6 +491,7 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
croppedY: r * p.croppedY,
};
},
false,
false
)
.then((textureData) => {
Expand Down
3 changes: 3 additions & 0 deletions packages/core/src/adapters/AbstractAdapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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>>;

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

Expand Down
15 changes: 8 additions & 7 deletions packages/core/src/adapters/EquirectangularAdapter.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>(
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);

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

Expand Down
10 changes: 8 additions & 2 deletions packages/core/src/data/config.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand Down Expand Up @@ -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;
},
};

/**
Expand Down
7 changes: 4 additions & 3 deletions packages/core/src/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down Expand Up @@ -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];
Expand Down
Loading

0 comments on commit 9b325f0

Please sign in to comment.