@zenvor/view360 4.0.0-beta.7-fork.1

package/src/type/events.ts

@@ -0,0 +1,389 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import View360 from "../View360";
+import Projection, { ProjectionOptions } from "../projection/Projection";
+
+/**
+ * An event that fires when the component is initialized.
+ * This will be called once after {@link View360#init init()} is called.
+ * @ko 컴포넌트 초기화시 발생하는 이벤트
+ * 이 이벤트는 {@link View360#init init()}가 호출된 이후 단 1회만 호출됩니다.
+ * @eventName ready
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface ReadyEvent {
+  /**
+   * A type of the event.
+   * This value is equal to event's name.
+   * @ko 이벤트 타입.
+   * 이벤트 이름과 값이 같습니다.
+   * @since 4.0.0
+   * @example
+   * ```ts
+   * viewer.on("ready", evt => {
+   *   console.log(evt.type); // "ready"
+   * });
+   * ```
+   */
+  type: string;
+  /**
+   * An instance of the component that triggered this event.
+   * @ko 이벤트를 발생시킨 컴포넌트의 인스턴스.
+   * @since 4.0.0
+   * @example
+   * ```ts
+   * viewer.on("ready", evt => {
+   *   console.log(evt.target); // = viewer
+   * });
+   * ```
+   */
+  target: View360;
+}
+
+/**
+ * An event that fires before loading the content.
+ * @ko 콘텐츠 로드를 시작하기 전에 발생하는 이벤트.
+ * @eventName loadStart
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface LoadStartEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * Source URL / HTMLElement to load
+   * @ko 로드할 콘텐츠의 URL / HTMLElement
+   * @since 4.0.0
+   * @see ProjectionOptions#src
+   */
+  src: ProjectionOptions["src"];
+  /**
+   * Source's video option
+   * @ko 로드할 콘텐츠의 비디오 옵션
+   * @since 4.0.0
+   * @see ProjectionOptions#video
+   */
+  video: ProjectionOptions["video"];
+}
+
+/**
+ * An event that fires right after the content is loaded & before showing it.
+ * @ko 콘텐츠가 로드된 직후 발생하는 이벤트.
+ * @eventName load
+ * @eventOf View360
+ * @since 4.0.0
+ * @group Event
+ */
+export interface LoadEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * @copy LoadStartEvent#src
+   */
+  src: ProjectionOptions["src"];
+  /**
+   * @copy LoadStartEvent#video
+   */
+  video: ProjectionOptions["video"];
+}
+
+/**
+ * An event that fires after projection changes
+ * @ko 프로젝션이 변경되었을 때 발생하는 이벤트
+ * @eventName projectionChange
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface ProjectionChangeEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * An instance of new projection applied
+   * @ko 새로 적용된 프로젝션의 인스턴스
+   * @since 4.0.0
+   */
+  projection: Projection;
+}
+
+/**
+ * An event that fires when {@link View360#resize} is called.
+ * @ko {@link View360#resize}가 호출되었을 때 발생하는 이벤트
+ * @eventName resize
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface ResizeEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * New width of the canvas. (=`canvas.clientWidth`)
+   * @ko 변경된 캔버스의 너비. (=`canvas.clientWidth`)
+   * @since 4.0.0
+   */
+  width: number;
+  /**
+   * New height of the canvas. (=`canvas.clientHeight`)
+   * @ko 변경된 캔버스의 높이. (=`canvas.clientHeight`)
+   * @since 4.0.0
+   */
+  height: number;
+}
+
+/**
+ * An event that fires before rendering a frame.
+ * @ko 새로운 프레임 렌더 직전에 발생하는 이벤트
+ * @eventName beforeRender
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface BeforeRenderEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+}
+
+/**
+ * An event that fires after rendering a frame.
+ * @ko 새로운 프레임 렌더 직후에 발생하는 이벤트
+ * @eventName render
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface RenderEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+}
+
+/**
+ * An event that fires on input start.
+ * @ko 사용자 입력 시작 시점에 발생하는 이벤트.
+ * @eventName inputStart
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface InputStartEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * Source {@link https://developer.mozilla.org/en-US/docs/Web/API/Event Event} of the input.
+   * @ko 사용자 입력의 {@link https://developer.mozilla.org/en-US/docs/Web/API/Event Event} 인스턴스.
+   * @since 4.0.0
+   */
+  srcEvent: MouseEvent | TouchEvent | KeyboardEvent;
+  /**
+   * Type of the input.
+   * @ko 사용자 입력의 종류.
+   * @since 4.0.0
+   */
+  inputType: "rotate" | "zoom";
+  /**
+   * Whether the input was touch.
+   * @ko 사용자 입력이 터치를 통한 것이었는지 여부를 나타내는 값.
+   * @since 4.0.0
+   */
+  isTouch: boolean;
+  /**
+   * Whether the input was keyboard.
+   * @ko 사용자 입력이 키보드를 통한 것이었는지 여부를 나타내는 값.
+   * @since 4.0.0
+   */
+  isKeyboard: boolean;
+}
+
+/**
+ * An event that fires on input end.
+ * @ko 사용자 입력이 끝날 때 발생하는 이벤트.
+ * @eventName inputEnd
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface InputEndEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * @copy InputStartEvent#inputType
+   */
+  inputType: "rotate" | "zoom";
+  /**
+   * @copy InputStartEvent#isTouch
+   */
+  isTouch: boolean;
+  /**
+   * @copy InputStartEvent#isKeyboard
+   */
+  isKeyboard: boolean;
+  /**
+   * Whether the page scroll triggered during the input on the touch devices.
+   * When the page has scrolled, input itself is blocked so you can ignore the input sequence when this value is `true`.
+   * @ko 터치 디바이스에서 입력 도중 스크롤이 발생하였는지 여부.
+   * 이 경우 실제로 카메라 회전은 블락되어 일어나지 않기 때문에, 해당 입력 시퀀스는 무시해도 좋습니다.
+   * @since 4.0.0
+   */
+  scrolling: boolean;
+}
+
+/**
+ * An event that fires on camera view direction change.
+ * This is triggered only on frame render.
+ * In other words, even if the actual camera orientation changes several times between frame renderings, the actual event is triggered only with the camera's direction at the time the screen is updated.
+ * @ko 카메라가 보는 방향이 변경되었을 때 발생하는 이벤트.
+ * 이 이벤트는 프레임이 렌더링되었을때만 발생합니다.
+ * 즉, 프레임 렌더 사이에 실제 카메라 방향이 여러번 변경되더라도 실제 이벤트는 화면 갱신이 이루어지는 시점에 바라보는 값으로만 트리거됩니다.
+ * @eventName viewChange
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface ViewChangeEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * Camera's new yaw value.
+   * @ko 갱신된 카메라의 yaw 값.
+   * @since 4.0.0
+   */
+  yaw: number;
+  /**
+   * Camera's new pitch value.
+   * @ko 갱신된 카메라의 pitch 값.
+   * @since 4.0.0
+   */
+  pitch: number;
+  /**
+   * Camera's new zoom value.
+   * @ko 갱신된 카메라의 zoom 값.
+   * @since 4.0.0
+   */
+  zoom: number;
+  /**
+   * Camera's new quaternion value. (x, y, z, w)
+   * @ko 갱신된 카메라의 회전 quaternion 값. (x, y, z, w)
+   * @since 4.0.0
+   */
+  quaternion: number[];
+}
+
+/**
+ * An event that fires after clicking on canvas element without dragging.
+ * @ko 캔버스 엘리먼트를 드래그하지 않고 클릭했을 때 발생하는 이벤트.
+ * @eventName staticClick
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface StaticClickEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+  /**
+   * @copy InputStartEvent#isTouch
+   */
+  isTouch: boolean;
+}
+
+/**
+ * An event that fires after entering VR mode
+ * @ko VR 세션에 진입한 직후에 발생하는 이벤트
+ * @eventName vrStart
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface VRStartEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+}
+
+/**
+ * An event that fires after exiting VR mode
+ * @ko VR 세션이 끝난 이후에 발생하는 이벤트
+ * @eventName vrEnd
+ * @eventOf View360
+ * @group Event
+ * @since 4.0.0
+ */
+export interface VREndEvent {
+  /**
+   * @copy ReadyEvent#type
+   */
+  type: string;
+  /**
+   * @copy ReadyEvent#target
+   */
+  target: View360;
+}

package/src/type/external.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import type Hls from "hls.js";
+export * from "./events";
+
+/**
+ * Config for the video source, mainly standard attributes for the video element.
+ * @ko 비디오 타입의 파노라마 소스에 적용할 옵션, 대부분 비디오 엘리먼트의 어트리뷰트에 적용할 값들입니다.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes
+ * @since 4.0.0
+ */
+export interface VideoConfig {
+  /**
+   * Whether to initially set video silenced.
+   * :::caution
+   * This should be `true` to enable {@link VideoConfig#autoplay}.
+   * :::
+   * @ko 비디오를 음소거한 상태로 재생을 시작할지 여부.
+   * :::caution
+   * {@link VideoConfig#autoplay}를 사용하기 위해서는 반드시 `true`로 설정되어야 합니다.
+   * :::
+   * @since 4.0.0
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-muted
+   */
+  muted: boolean;
+  /**
+   * If `true`, the browser will automatically seek back to the start upon reaching the end of the video.
+   * @ko `true`일 경우 비디오가 끝날 때 자동으로 처음부터 다시 재생합니다.
+   * @since 4.0.0
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-loop
+   */
+  loop: boolean;
+  /**
+   * If `true`, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
+   * :::caution
+   * {@link VideoConfig#muted} should be `true` to enable this option.
+   * :::
+   * @ko `true`일 경우, 뷰어가 로딩된 다음에 바로 비디오를 재생합니다.
+   * :::caution
+   * {@link VideoConfig#muted}가 `true`여야만 사용 가능합니다.
+   * :::
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
+   */
+  autoplay: boolean;
+  /**
+   * Initial volume. (0~1)
+   * @ko 비디오 초기화시 적용할 볼륨값. (0~1)
+   * @since 4.0.0
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume
+   */
+  volume: number;
+  /**
+   * HLS configuration for m3u8 playback.
+   * @ko m3u8 재생을 위한 HLS 설정.
+   * @since 4.0.0
+   */
+  hlsConfig?: {
+    /**
+     * Whether to enable HLS support for this video.
+     * @ko HLS 사용 여부.
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Force HLS initialization even when the source does not end with .m3u8.
+     * @ko 소스가 .m3u8이 아니어도 HLS를 강제로 활성화할지 여부.
+     * @default false
+     */
+    force?: boolean;
+    /**
+     * Options passed to hls.js constructor.
+     * @ko hls.js 생성자 옵션.
+     */
+    config?: Hls.Config;
+  };
+}

package/src/type/internal.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import CameraControl from "../control/CameraControl";
+import Uniform from "../uniform/Uniform";
+import UniformMatrix from "../uniform/UniformMatrix";
+import { CONTROL_EVENTS } from "../const/internal";
+
+export interface CommonUniforms {
+  uMVMatrix: UniformMatrix
+  uPMatrix: UniformMatrix
+}
+
+export type UniformLocations<T extends Record<string, Uniform | null>> = {
+  [key in keyof (T & CommonUniforms)]: WebGLUniformLocation
+};
+
+export interface InputEvents<DeltaType, BrowserEvent = MouseEvent | TouchEvent | KeyboardEvent> {
+  [CONTROL_EVENTS.INPUT_START]: {
+    srcEvent: BrowserEvent;
+    isTouch: boolean;
+    isKeyboard: boolean;
+  };
+  [CONTROL_EVENTS.CHANGE]: {
+    delta: DeltaType;
+    isTouch: boolean;
+    isKeyboard: boolean;
+  };
+  [CONTROL_EVENTS.INPUT_END]: {
+    isTouch: boolean;
+    isKeyboard: boolean;
+    scrolling: boolean;
+  };
+  [CONTROL_EVENTS.STATIC_CLICK]: {
+    isTouch: boolean;
+  };
+  [CONTROL_EVENTS.ENABLE]: {
+    control: CameraControl;
+    updateCursor: boolean;
+  };
+  [CONTROL_EVENTS.DISABLE]: {
+    updateCursor: boolean
+  };
+}
+
+export interface ControlEvents<DeltaType> extends InputEvents<DeltaType> {
+  [CONTROL_EVENTS.INPUT_START]: { inputType: "rotate" | "zoom" }
+    & InputEvents<DeltaType>[typeof CONTROL_EVENTS.INPUT_START];
+  [CONTROL_EVENTS.INPUT_END]: { inputType: "rotate" | "zoom" }
+    & InputEvents<DeltaType>[typeof CONTROL_EVENTS.INPUT_END];
+}
+
+export type VAO = WebGLVertexArrayObject | WebGLVertexArrayObjectOES;

package/src/type/utils.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+export type ValueOf<T> = T[keyof T];
+export type LiteralUnion<T extends U, U = string> = T | (Pick<U, never> & {_?: never});
+export type NoBoolean<T> = T extends boolean ? never : T;
+
+export interface Range {
+  min: number;
+  max: number;
+}
+
+export type TypedArray =
+  | Int8Array
+  | Uint8Array
+  | Uint8ClampedArray
+  | Int16Array
+  | Uint16Array
+  | Int32Array
+  | Uint32Array
+  | Float32Array
+  | Float64Array;
+
+export type EventParams<T extends Record<string, any>, K extends keyof T> = Omit<T[K], "type" | "target"> extends Record<string, never>
+  ? never
+  : [Omit<T[K], "type" | "target">];

package/src/types/hls.d.ts

@@ -0,0 +1,78 @@
+declare module "hls.js" {
+  export interface HlsConfig {
+    [key: string]: any;
+    algoDataEnabled?: boolean;
+    algoSegmentPattern?: RegExp | string;
+    algoPreloadCount?: number;
+    algoCacheSize?: number;
+    algoFrameRate?: number;
+  }
+
+  type AutoCameraItem = {
+    x: number;
+    y: number;
+    focus: number;
+    reserved?: number[];
+  };
+
+  type TrackItem = {
+    trackId: number;
+    score: number;
+    box: [number, number, number, number];
+    reserved?: number[];
+  };
+
+  type DetItem = {
+    classId: number;
+    score: number;
+    box: [number, number, number, number];
+    reserved?: number[];
+  };
+
+  type FrameItem = {
+    frameIdx: number;
+    autoCameras: AutoCameraItem;
+    tracks: TrackItem[];
+    detections: DetItem[];
+  };
+
+  type AlgoChunk = {
+    fragSn: number;
+    algoUrl: string;
+    chunkIndex: number;
+    frameSize: number;
+    frameRate: number;
+    startFrameIndex: number;
+    frames: FrameItem[];
+  };
+
+  type AlgoDataLoadedEvent = {
+    chunk: AlgoChunk;
+  };
+
+  class Hls {
+    public static isSupported(): boolean;
+    public constructor(config?: HlsConfig);
+    public loadSource(url: string): void;
+    public attachMedia(media: HTMLMediaElement): void;
+    public destroy(): void;
+    public on(eventName: string, handler: (...args: any[]) => void): void;
+    public off(eventName: string, handler: (...args: any[]) => void): void;
+    public getAlgoFrameByTime(time: number): FrameItem | null;
+    public getAlgoFrameByIndex(frameIdx: number): FrameItem | null;
+    public isAlgoDataReady(time: number): boolean;
+    public isAlgoDataReadyByIndex(frameIdx: number): boolean;
+    public getAllCachedAlgoChunks(): AlgoChunk[];
+  }
+
+  namespace Hls {
+    type Config = HlsConfig;
+    const Events: {
+      ALGO_DATA_LOADING: string;
+      ALGO_DATA_LOADED: string;
+      ALGO_DATA_ERROR: string;
+    };
+  }
+
+  export default Hls;
+}

package/src/uniform/Uniform.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+abstract class Uniform {
+  public needsUpdate: boolean;
+
+  public constructor() {
+    this.needsUpdate = true;
+  }
+
+  public abstract update(gl: WebGLRenderingContext | WebGL2RenderingContext, location: WebGLUniformLocation, isWebGL2: boolean): void;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public destroy(gl: WebGLRenderingContext | WebGL2RenderingContext) {
+    // DO_NOTHING
+  }
+}
+
+export default Uniform;

package/src/uniform/UniformBoolean.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Uniform from "./Uniform";
+
+class UniformBoolean extends Uniform {
+  public val: boolean;
+
+  public constructor(val: boolean) {
+    super();
+
+    this.val = val;
+  }
+
+  public update(gl: WebGLRenderingContext | WebGL2RenderingContext, location: WebGLUniformLocation) {
+    gl.uniform1f(location, this.val ? 1 : 0);
+
+    this.needsUpdate = false;
+  }
+}
+
+export default UniformBoolean;

package/src/uniform/UniformCanvasCube.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023-present NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import CubeTexturePainter from "../core/CubeTexturePainter";
+import Texture2D from "../texture/Texture2D";
+import WebGLContext from "../core/WebGLContext";
+import Uniform from "./Uniform";
+
+class UniformCanvasCube extends Uniform {
+  private _webglTexture: WebGLTexture;
+  private _painter: CubeTexturePainter;
+
+  public get texture() { return this._painter.texture; }
+
+  public constructor(ctx: WebGLContext, texture: Texture2D, cubemapOrder: string) {
+    super();
+
+    this._painter = new CubeTexturePainter(texture as Texture2D, cubemapOrder);
+    this._webglTexture = ctx.createWebGLCubeTexture(texture, this._painter.size);
+  }
+
+  public destroy(gl: WebGLRenderingContext | WebGL2RenderingContext) {
+    gl.deleteTexture(this._webglTexture);
+    this._painter.destroy();
+  }
+
+  public update(gl: WebGLRenderingContext | WebGL2RenderingContext, location: WebGLUniformLocation, isWebGL2: boolean) {
+    const texture = this.texture;
+
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    gl.uniform1i(location, 0);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_CUBE_MAP, this._webglTexture);
+
+    this._painter.draw(gl, isWebGL2);
+
+    if (!texture.isVideo()) {
+      this.needsUpdate = false;
+    }
+  }
+}
+
+export default UniformCanvasCube;