@realsee/dnalogel 2.9.0-1 → 2.9.0-alpha.1

package/libs/PanoVideoPlugin/Controller.js

@@ -1,127 +0,0 @@
-var f = Object.defineProperty, g = Object.defineProperties;
-var D = Object.getOwnPropertyDescriptors;
-var h = Object.getOwnPropertySymbols;
-var m = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable;
-var n = (t, e, r) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, l = (t, e) => {
-  for (var r in e || (e = {}))
-    m.call(e, r) && n(t, r, e[r]);
-  if (h)
-    for (var r of h(e))
-      B.call(e, r) && n(t, r, e[r]);
-  return t;
-}, a = (t, e) => g(t, D(e));
-var u = (t, e, r) => (n(t, typeof e != "symbol" ? e + "" : e, r), r);
-import { VideoMeshController as p } from "./VideoMeshController.js";
-import { Controller as A } from "../base/BasePlugin.js";
-import "./utils/shader.js";
-import "hammerjs";
-import "three";
-import "@realsee/five";
-import "@tweenjs/tween.js";
-import "../CSS3DRenderPlugin/CSS3DRender.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
-import "three/examples/jsm/renderers/CSS3DRenderer";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
-import "../CSS3DRenderPlugin/utils/even.js";
-import "../shared-utils/Subscribe.js";
-import "../CSS3DRenderPlugin/utils/positionToVector3.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/centerPoint.js";
-import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "../shared-utils/animationFrame/index.js";
-import "../shared-utils/animationFrame/BetterTween.js";
-class L extends A {
-  constructor(r) {
-    super(r);
-    u(this, "enabled", !0);
-    u(this, "controllerMap", /* @__PURE__ */ new Map());
-    u(this, "_disposed", !1);
-    this.five = r;
-  }
-  get state() {
-    return {
-      enabled: this.enabled
-    };
-  }
-  get disposed() {
-    return this._disposed;
-  }
-  load(r, o) {
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    r.list.forEach((i) => {
-      const s = i.pano_index, c = i.render_id;
-      i.video_list.forEach((d) => {
-        this.controllerMap.set(
-          d.render_id,
-          new p(this.five, a(l({}, d), { panoIndex: s, renderID: c, initialState: o == null ? void 0 : o.initialState }))
-        );
-      });
-    });
-  }
-  enable(r) {
-    var i;
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    if (this.enabled)
-      return;
-    this._disposed = !1, Array.from(this.controllerMap.values()).forEach((s) => s.enable());
-    const o = (i = r == null ? void 0 : r.userAction) != null ? i : !0;
-    this.hooks.emit("enable", { userAction: o });
-  }
-  disable(r) {
-    var i;
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    if (!this.enabled)
-      return;
-    this._disposed = !0, Array.from(this.controllerMap.values()).forEach((s) => s.disable());
-    const o = (i = r == null ? void 0 : r.userAction) != null ? i : !0;
-    this.hooks.emit("disable", { userAction: o });
-  }
-  add(r, o) {
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    o.forEach((i) => {
-      if (this.controllerMap.get(i.render_id))
-        return this.logWarning(`ID \u4E3A ${i.render_id} \u7684\u70B9\u4F4D\u89C6\u9891\u5DF2\u5B58\u5728`);
-      const s = i.render_id;
-      this.controllerMap.set(
-        i.render_id,
-        new p(this.five, a(l({}, i), {
-          panoIndex: r,
-          renderID: s,
-          initialState: { enabled: this.enabled }
-        }))
-      );
-    });
-  }
-  removeByRenderID(r) {
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    const o = this.controllerMap.get(r);
-    if (!o)
-      return this.logWarning(`ID \u4E3A ${r} \u7684\u70B9\u4F4D\u89C6\u9891\u4E0D\u5B58\u5728`);
-    o.dispose(), this.controllerMap.delete(r);
-  }
-  clear() {
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    Array.from(this.controllerMap.values()).forEach((r) => r.dispose()), this.controllerMap.clear();
-  }
-  dispose() {
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u88AB\u9500\u6BC1");
-    this._disposed = !0, Array.from(this.controllerMap.values()).forEach((r) => r.dispose()), this.controllerMap.clear();
-  }
-  logWarning(r) {
-    console.warn("\u26D4 ==> [PanoVideoPluginController]:", r);
-  }
-}
-export {
-  L as PanoVideoPluginController
-};

package/libs/PanoVideoPlugin/VideoMeshController.d.ts

@@ -1,85 +0,0 @@
-import type { Five } from '@realsee/five';
-import type { VideoMeshParams } from './typings';
-/** 点位视频控制器
- * @description 控制器存在副作用，包括：
- * - 对 Five 事件的监听。
- * - 对 DOM 原生事件的监听。
- * - 用于播放视频的模型。
- * - 视频实例。
- * @description 清除副作用的力度从弱到强：
- * - 隐藏：hide，用于隐藏 UI 元素；不销毁多媒体资源。用于临时隐藏。
- * - 取消挂载：unmount，销毁视频资源；移除模型。用于不符合自身展示条件时执行。
- * - 禁用：disable，销毁视频资源；移除模型；取消监听。用于外部条件变换导致的功能禁用。
- * - 销毁：dispose，用于彻底销毁实例，dispose 之后将不响应任何事件。
- */
-export declare class VideoMeshController {
-    /** 传入的 ID，不可更改 */
-    get renderID(): string;
-    /** 是否已经销毁 */
-    get disposed(): boolean;
-    /** 是否已经启用 */
-    get enabled(): boolean;
-    private _id;
-    /** 视频资源地址 */
-    private url;
-    /** Five Instance */
-    private five;
-    /** 视频对应的点位 */
-    private panoIndex;
-    /** 视频在球面的 uv：[left, top, width, height] */
-    private origin;
-    /** Video DOM */
-    private video;
-    /** Video Mesh */
-    private videoMesh;
-    private _enabled;
-    private _disposed;
-    /** 视频是否曾经播放过 */
-    private hasVideoEverPlayed;
-    /** 自动 render five 的销毁函数
-     * @remark 由于 render video 依赖 Five render，因此需要自动 render five。
-     */
-    private renderFiveDisposer?;
-    /** 初始化视频、模型以及相关事件监听。 */
-    constructor(five: Five, params: VideoMeshParams);
-    /** 彻底销毁，不响应之后的任何事件 */
-    dispose(): void;
-    enable(): void;
-    /** 禁用插件 */
-    disable(): void;
-    /** 添加时间监听 */
-    private addEventListeners;
-    /** 移除事件监听 */
-    private removeEventListeners;
-    /** 如果满足 mount 条件，mount */
-    private mountIfNeeded;
-    /** 挂载：加载视频资源；添加模型。 */
-    private mount;
-    /** 卸载：销毁视频资源；移除模型。 */
-    private unmount;
-    /** 暂停视频，去除模型。 */
-    private hide;
-    /** Five 数据加载后需要根据点位位姿调整点位模型位置 */
-    private onFiveDataLoaded;
-    /** 兼容视频播放 */
-    private onFiveWantsMoveToPano;
-    /** 走到某个点位上时，挂载/卸载视频 */
-    private onFivePanoArrived;
-    private onFivePanoWillArrive;
-    /** Five 模型变化 */
-    private onFiveModeChange;
-    /** Five mode change 动画结束 */
-    private onFiveInitAnimationEnded;
-    /** video playing 事件触发
-     * @remarks
-     * 事件触发时机：
-     * - video is ready to start after having been paused.
-     * - video is ready to play after delayed due to lack of data.
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
-     */
-    private onVideoPlaying;
-    /** video pause 事件触发 */
-    private onVideoPaused;
-    /** 控制台打印警告 */
-    private logWarning;
-}

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -1,152 +0,0 @@
-var l = Object.defineProperty;
-var f = (o, e, t) => e in o ? l(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var i = (o, e, t) => (f(o, typeof e != "symbol" ? e + "" : e, t), t);
-import { vertexShader as p, fragmentShader as m } from "./utils/shader.js";
-import "hammerjs";
-import { VideoTexture as g, LinearFilter as v, ShaderMaterial as F, Vector4 as c, SphereBufferGeometry as E, Mesh as A, Quaternion as D, Vector3 as I } from "three";
-import "@realsee/five";
-import "@tweenjs/tween.js";
-import "../CSS3DRenderPlugin/CSS3DRender.js";
-import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import { requestAnimationFrameInterval as M } from "../shared-utils/animationFrame/index.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
-import "three/examples/jsm/renderers/CSS3DRenderer";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
-import "../CSS3DRenderPlugin/utils/even.js";
-import "../shared-utils/Subscribe.js";
-import "../CSS3DRenderPlugin/utils/positionToVector3.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/centerPoint.js";
-import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "../shared-utils/animationFrame/BetterTween.js";
-class j {
-  constructor(e, t) {
-    i(this, "_id");
-    i(this, "url");
-    i(this, "five");
-    i(this, "panoIndex");
-    i(this, "origin");
-    i(this, "video");
-    i(this, "videoMesh");
-    i(this, "_enabled", !0);
-    i(this, "_disposed", !1);
-    i(this, "hasVideoEverPlayed", !1);
-    i(this, "renderFiveDisposer");
-    i(this, "onFiveDataLoaded", () => {
-      var d;
-      const e = (d = this.five.work) == null ? void 0 : d.observers[this.panoIndex];
-      if (!e)
-        return this.logWarning(`\u70B9\u4F4D ${this.panoIndex} \u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 Five \u6570\u636E\u662F\u5426\u6B63\u5E38\u3002`);
-      const { x: t, y: n, z: r, w: h } = e.quaternion, a = new D(t, n, r, h), s = e.position;
-      this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new I(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(a);
-    });
-    i(this, "onFiveWantsMoveToPano", (e) => {
-      e === this.panoIndex && (this.hasVideoEverPlayed || this.video.play().catch((t) => {
-        console.log("\u{1F436} ==> error:", t);
-      }));
-    });
-    i(this, "onFivePanoArrived", (e) => {
-      if (this.disposed)
-        return this.logWarning("\u5B9E\u4F8B\u5DF2\u88AB\u9500\u6BC1");
-      !this.enabled || this.panoIndex === e && this.mount();
-    });
-    i(this, "onFivePanoWillArrive", (e) => {
-      if (e !== this.panoIndex)
-        return this.unmount();
-      this.panoIndex !== e && this.unmount();
-    });
-    i(this, "onFiveModeChange", (e) => {
-      e !== "Panorama" && this.hide();
-    });
-    i(this, "onFiveInitAnimationEnded", () => {
-      const e = this.five.getCurrentState();
-      e.mode === "Panorama" && e.panoIndex === this.panoIndex && this.mount();
-    });
-    i(this, "onVideoPlaying", () => {
-      this.hasVideoEverPlayed = !0, this.video.src !== "" && (this.renderFiveDisposer = M(() => {
-        this.five.needsRender = !0;
-      }), this.five.scene.add(this.videoMesh));
-    });
-    i(this, "onVideoPaused", () => {
-      var e;
-      (e = this.renderFiveDisposer) == null || e.call(this);
-    });
-    var d, u;
-    this.five = e, this.panoIndex = t.panoIndex, this._id = t.renderID, this.url = t.url, this.origin = t.origin.slice(), this._enabled = (u = (d = t.initialState) == null ? void 0 : d.enabled) != null ? u : !0;
-    const n = document.createElement("video");
-    n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !1, n.playsInline = !0, this.video = n;
-    const r = new g(this.video);
-    r.minFilter = v, r.magFilter = v;
-    const h = new F({
-      vertexShader: p,
-      fragmentShader: m,
-      uniforms: {
-        map: { value: r },
-        size: {
-          value: new c(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
-        }
-      },
-      depthTest: !0,
-      transparent: !0
-    }), a = new E(1, 64, 64);
-    a.scale(-1, 1, 1);
-    const s = new A(a, h);
-    s.name = "pano-video", this.videoMesh = s, this.five.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded();
-  }
-  get renderID() {
-    return this._id;
-  }
-  get disposed() {
-    return this._disposed;
-  }
-  get enabled() {
-    return this._enabled;
-  }
-  dispose() {
-    this.disposed || (this.disable(), this._disposed = !0);
-  }
-  enable() {
-    this.disposed || this.enabled || (this._enabled = !0, this.addEventListeners(), this.mountIfNeeded());
-  }
-  disable() {
-    this.disposed || !this.enabled || (this._enabled = !1, this.removeEventListeners(), this.unmount());
-  }
-  addEventListeners() {
-    this.five.on("loaded", this.onFiveDataLoaded), this.five.on("modeChange", this.onFiveModeChange), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("panoWillArrive", this.onFivePanoWillArrive), this.five.on("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.on("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.addEventListener("playing", this.onVideoPlaying);
-  }
-  removeEventListeners() {
-    this.five.off("loaded", this.onFiveDataLoaded), this.five.off("modeChange", this.onFiveModeChange), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive), this.five.off("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.off("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.removeEventListener("playing", this.onVideoPlaying);
-  }
-  mountIfNeeded() {
-    const e = this.five.getCurrentState();
-    e.mode === "Panorama" && e.panoIndex === this.panoIndex && this.enabled && this.mount();
-  }
-  mount() {
-    if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u7ECF\u9500\u6BC1\uFF0C\u65E0\u6CD5\u6302\u8F7D\u3002");
-    if (this.url === "")
-      return this.logWarning("\u89C6\u9891\u8D44\u6E90\u4E0D\u5B58\u5728\u3002");
-    this.video.src !== this.url && (this.video.src = this.url), this.video.paused && this.video.play().catch((e) => {
-      this.logWarning(e instanceof Error ? e.message : "\u89C6\u9891\u64AD\u653E\u5931\u8D25\u3002"), this.five.once("gesture", () => {
-        this.video.play().catch((t) => {
-          this.logWarning(t instanceof Error ? t.message : "\u81EA\u52A8\u64AD\u653E\u89C6\u9891\u5931\u8D25\u3002");
-        });
-      });
-    });
-  }
-  unmount() {
-    this.video.pause(), this.video.src !== "" && (this.video.src = ""), this.five.scene.remove(this.videoMesh);
-  }
-  hide() {
-    this.video.pause(), this.five.scene.remove(this.videoMesh);
-  }
-  logWarning(e) {
-    console.warn("\u26D4 ==> [VideoMeshController]:", e);
-  }
-}
-export {
-  j as VideoMeshController
-};

package/libs/PanoVideoPlugin/index.d.ts

@@ -1,16 +0,0 @@
-import type { FivePlugin } from '@realsee/five';
-import { PanoVideoPluginController } from './Controller';
-import * as _PanoVideoPluginType from './typings';
-/** 点位视频播放插件
- * - 支持一次性加载多组数据。
- * - 走到点位上时播放视频（可能是多个）。
- * - 走出点位时销毁视频。
- * - 允许动态开启和禁用功能。
- * - 视频只能在全景模式且点位一致时才会播放。不满足条件会自动销毁。
- * - 不做多媒体缓存，缓解内存占用。
- */
-export declare const PanoVideoPlugin: FivePlugin<undefined, PanoVideoPluginController>;
-export { _PanoVideoPluginType as PanoVideoPluginType };
-export declare type PanoVideoPluginParameterType = undefined;
-export declare type PanoVideoPluginReturnType = InstanceType<typeof PanoVideoPluginController>;
-export default PanoVideoPlugin;

package/libs/PanoVideoPlugin/index.js

@@ -1,31 +0,0 @@
-import { PanoVideoPluginController as r } from "./Controller.js";
-import { typings as z } from "./typings/index.js";
-import "./VideoMeshController.js";
-import "./utils/shader.js";
-import "hammerjs";
-import "three";
-import "@realsee/five";
-import "@tweenjs/tween.js";
-import "../CSS3DRenderPlugin/CSS3DRender.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
-import "three/examples/jsm/renderers/CSS3DRenderer";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
-import "../CSS3DRenderPlugin/utils/even.js";
-import "../shared-utils/Subscribe.js";
-import "../CSS3DRenderPlugin/utils/positionToVector3.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/centerPoint.js";
-import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "../shared-utils/animationFrame/index.js";
-import "../shared-utils/animationFrame/BetterTween.js";
-import "../base/BasePlugin.js";
-const k = (o) => new r(o);
-export {
-  k as PanoVideoPlugin,
-  z as PanoVideoPluginType,
-  k as default
-};

package/libs/PanoVideoPlugin/typings/index.js

@@ -1,6 +0,0 @@
-const e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  e as typings
-};

package/libs/PanoVideoPlugin/typings.d.ts

@@ -1,64 +0,0 @@
-import type * as BasePlugin from '../base/BasePlugin';
-/** 单个视频元素 */
-export interface VideoItem {
-    /** client render ID
-     * @remarks 为什么不用 id 作为唯一标识？
-     * - id 是后端生成的，而 render_id 是前端生成的，在编辑时为了保证在请求后端数据之前也能进行渲染，使用额外的 id 进行渲染。
-     * - 为了保证两端的数据一致性，插件里使用 render_id 作为唯一 ID。
-     */
-    render_id: string;
-    /** 文件地址 */
-    url: string;
-    /** 算法处理的视频 uv 信息
-     * @description [left, top, width, height]
-     */
-    origin: number[];
-}
-/** 点位视频元素 */
-export interface PanoVideoItem {
-    /** client render ID */
-    render_id: string;
-    /** 视频播放点位 */
-    pano_index: number;
-    /** 视频列表 */
-    video_list: VideoItem[];
-}
-/** 点位视频模型参数 */
-export interface VideoMeshParams {
-    /** client render ID */
-    renderID: string;
-    /** video 文件地址 */
-    url: string;
-    /** 算法处理的视频 uv 信息
-     * @description [left, top, width, height]
-     */
-    origin: number[];
-    /** 视频播放点位 */
-    panoIndex: number;
-    /** 初始状态 */
-    initialState?: {
-        enabled?: boolean;
-    };
-}
-/** 加载数据时的额外参数 */
-export interface LoadParams {
-    initialState?: {
-        enabled?: boolean;
-    };
-}
-export interface PluginState {
-    enabled: boolean;
-}
-export interface PluginData {
-    list: PanoVideoItem[];
-}
-export interface PluginEventMap extends BasePlugin.EventMap<PluginState> {
-    /** 点位视频模型开启 */
-    enable: (params: {
-        userAction: boolean;
-    }) => void;
-    /** 点位视频模型关闭 */
-    disable: (params: {
-        userAction: boolean;
-    }) => void;
-}

package/libs/PanoVideoPlugin/typings.js

@@ -1 +0,0 @@
-

package/libs/PanoVideoPlugin/utils/shader.d.ts

@@ -1,2 +0,0 @@
-export declare const vertexShader = "\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  vec4 mvPosition = modelViewMatrix * vec4(position, 1);\n  gl_Position = projectionMatrix * mvPosition;\n}\n";
-export declare const fragmentShader = "\nuniform sampler2D map;\nuniform vec4 size;\nvarying vec2 vUv;\n\nvoid main() {\n  vec2 uv = vec2((vUv.x - size[0]) / size[2], (vUv.y - size[1]) / size[3]);\n  float a = 0.1;\n  float transX = uv.x < a ? 1.0 / a * uv.x : (uv.x > (1.0 - a) ? 1.0 / a * (1.0 - uv.x) : 1.0);\n  float transY = uv.y < a ? 1.0 / a * uv.y : (uv.y > (1.0 - a) ? 1.0 / a * (1.0 - uv.y) : 1.0);\n\tfloat match = (1.0 - step(0.5, abs(uv.x - 0.5))) * (1.0 - step(0.5, abs(uv.y - 0.5))) * (transX < transY ? transX : transY);\n  gl_FragColor = vec4(texture2D(map, uv).xyz, match);\n}\n";

package/libs/PanoVideoPlugin/utils/shader.js

@@ -1,25 +0,0 @@
-const v = `
-varying vec2 vUv;
-void main() {
-  vUv = uv;
-  vec4 mvPosition = modelViewMatrix * vec4(position, 1);
-  gl_Position = projectionMatrix * mvPosition;
-}
-`, a = `
-uniform sampler2D map;
-uniform vec4 size;
-varying vec2 vUv;
-
-void main() {
-  vec2 uv = vec2((vUv.x - size[0]) / size[2], (vUv.y - size[1]) / size[3]);
-  float a = 0.1;
-  float transX = uv.x < a ? 1.0 / a * uv.x : (uv.x > (1.0 - a) ? 1.0 / a * (1.0 - uv.x) : 1.0);
-  float transY = uv.y < a ? 1.0 / a * uv.y : (uv.y > (1.0 - a) ? 1.0 / a * (1.0 - uv.y) : 1.0);
-	float match = (1.0 - step(0.5, abs(uv.x - 0.5))) * (1.0 - step(0.5, abs(uv.y - 0.5))) * (transX < transY ? transX : transY);
-  gl_FragColor = vec4(texture2D(map, uv).xyz, match);
-}
-`;
-export {
-  a as fragmentShader,
-  v as vertexShader
-};