claygl-next - npm Package Compare versions

Comparing version 2.0.0-alpha.34 to 2.0.0-alpha.35

dist/App3D.d.ts

@@ -10,4 +10,2 @@ import Renderer from './Renderer';
 import Material, { MaterialOpts } from './Material';
-import PerspectiveCamera from './camera/Perspective';
-import OrthographicCamera from './camera/Orthographic';
 import Vector3 from './math/Vector3';
@@ -24,2 +22,3 @@ import { GLTFLoadResult } from './loader/GLTF';
 import { Notifier } from './core';
+import Camera from './Camera';
 import { EventManager, EventTriggers } from './app/EventManager';
@@ -350,4 +349,4 @@ import Shader from './Shader';
      */
-    createCamera(position: Vector3 | Vector3['array'], target: Vector3 | Vector3['array'], type: 'ortho' | 'orthographic', extent?: Vector3 | Vector3['array']): OrthographicCamera;
-    createCamera(position: Vector3 | Vector3['array'], target?: Vector3 | Vector3['array'], type?: 'perspective'): PerspectiveCamera;
+    createCamera(position: Vector3 | Vector3['array'], target: Vector3 | Vector3['array'], type: 'ortho' | 'orthographic', extent?: Vector3 | Vector3['array']): Camera<'orthographic'>;
+    createCamera(position: Vector3 | Vector3['array'], target?: Vector3 | Vector3['array'], type?: 'perspective'): Camera<'perspective'>;
     /**
@@ -354,0 +353,0 @@ * Create a directional light and add it to the scene.

dist/Camera.d.ts

@@ -8,6 +8,41 @@ import ClayNode, { ClayNodeOpts } from './Node';
 }
-interface Camera extends ClayNodeOpts {
+type CameraProjectionTypes = 'perspective' | 'orthographic';
+export declare class CameraPerspectiveProjection {
+    type: 'perspective';
+    /**
+     * Vertical field of view in degrees
+     */
+    fov: number;
+    /**
+     * Aspect ratio, typically viewport width / height
+     */
+    aspect: number;
+    /**
+     * Near bound of the frustum
+     */
+    near: number;
+    /**
+     * Far bound of the frustum
+     */
+    far: number;
 }
-declare class Camera extends ClayNode {
+export declare class CameraOrthographicProjection {
+    type: 'orthographic';
+    left: number;
+    right: number;
+    near: number;
+    far: number;
+    top: number;
+    bottom: number;
+}
+type Projections = {
+    orthographic: CameraOrthographicProjection;
+    perspective: CameraPerspectiveProjection;
+};
+declare class Camera<T extends CameraProjectionTypes = CameraProjectionTypes> extends ClayNode {
     /**
+     * Camera projection
+     */
+    projection: Projections[T];
+    /**
      * Camera projection matrix
@@ -32,2 +67,6 @@ */
     offset: Vector2;
+    /**
+     * @param type Default to be perspective
+     */
+    constructor(type?: T, opts?: Omit<Partial<Projections[T]>, 'type'>);
     update(): void;
@@ -40,6 +79,2 @@ updateOffset?: (width: number, height: number, dpr: number) => void;
     /**
-     * Decompose camera projection matrix
-     */
-    decomposeProjectionMatrix(): void;
-    /**
      * Set camera projection matrix
@@ -54,2 +89,6 @@ * @param {clay.Matrix4} projectionMatrix
     /**
+     * Decompose camera projection matrix
+     */
+    decomposeProjectionMatrix(): void;
+    /**
      * Cast a picking ray from camera near plane to far plane
@@ -62,3 +101,4 @@ * @function
     castRay(ndc: Vector2, out?: Ray): Ray;
+    clone(): any;
 }
 export default Camera;

dist/claygl.d.ts

@@ -32,3 +32,2 @@ import { setCanvasSize } from './core/util';
 export * as constants from './core/constants';
-export { Perspective as PerspectiveCamera, Orthographic as OrthographicCamera } from './camera/index';
 export { Ambient as AmbientLight, AmbientCubemap as AmbientCubemapLight, AmbientSH as AmbientSHLight, Directional as DirectionalLight, Point as PointLight, Sphere as SphereLight, Spot as SpotLight, Tube as TubeLight } from './light/index';
@@ -35,0 +34,0 @@ export { default as Light } from './Light';

dist/loader/GLTF.d.ts

@@ -10,3 +10,3 @@ import Scene from '../Scene';
 import Shader from '../Shader';
-import type Camera from '../Camera';
+import Camera from '../Camera';
 type GLTFFormat = any;
@@ -13,0 +13,0 @@ interface ParsedLib {

dist/plugin/OrbitControl.d.ts

@@ -5,6 +5,6 @@ import Vector2 from '../math/Vector2';
 import Timeline from '../Timeline';
-import ClayNode from '../Node';
 import type { vec3 } from '../glmatrix';
 import type { AnimationEasing } from '../animation/easing';
 import type ProceduralKeyframeAnimator from '../animation/ProceduralKeyframeAnimator';
+import Camera from '../Camera';
 type AnimatableControlOpts = Pick<OrbitControlOpts, 'distance' | 'orthographicSize' | 'alpha' | 'beta' | 'center'>;
@@ -15,3 +15,3 @@ type MouseButtons = 'left' | 'right' | 'middle';
 interface OrbitControlOpts {
-    target: ClayNode;
+    target: Camera;
     timeline?: Timeline;
@@ -122,4 +122,4 @@ domElement: HTMLElement;
     set autoRotate(val: boolean);
-    get target(): ClayNode | undefined;
-    set target(val: ClayNode | undefined);
+    get target(): Camera | undefined;
+    set target(val: Camera | undefined);
     /**
@@ -225,5 +225,2 @@ * Initialize.
         target: any;
-        /**
-         * Only available when camera is orthographic
-         */
         event: PinchEvent;
@@ -230,0 +227,0 @@ } | undefined;

dist/prePass/EnvironmentMap.d.ts

 import Vector3 from '../math/Vector3';
-import PerspectiveCamera from '../camera/Perspective';
 import TextureCube, { CubeTarget } from '../TextureCube';
@@ -7,2 +6,3 @@ import type ShadowMapPass from './ShadowMap';
 import type Scene from '../Scene';
+import Camera from '../Camera';
 interface EnvironmentMapPassOpts {
@@ -76,3 +76,3 @@ /**
     constructor(opts?: Partial<EnvironmentMapPassOpts>);
-    getCamera(target: CubeTarget): PerspectiveCamera;
+    getCamera(target: CubeTarget): Camera<"perspective">;
     render(renderer: Renderer, scene: Scene, notUpdateScene?: boolean): void;
@@ -79,0 +79,0 @@ dispose(renderer: Renderer): void;

dist/prePass/ShadowMap.d.ts

@@ -6,4 +6,2 @@ import Renderer from '../Renderer';
 import TextureCube, { CubeTarget } from '../TextureCube';
-import PerspectiveCamera from '../camera/Perspective';
-import OrthoCamera from '../camera/Orthographic';
 import * as mat4 from '../glmatrix/mat4';
@@ -61,3 +59,3 @@ import type Renderable from '../Renderable';
     _renderShadowPass(renderer: Renderer, scene: Scene, sceneCamera: Camera, notUpdateScene?: boolean): void;
-    renderDirectionalLightShadow(renderer: Renderer, scene: Scene, sceneCamera: PerspectiveCamera | OrthoCamera, light: DirectionalLight, shadowCascadeClips: number[], directionalLightMatrices: mat4.Mat4Array[], directionalLightShadowMaps: Texture2D[]): void;
+    renderDirectionalLightShadow(renderer: Renderer, scene: Scene, sceneCamera: Camera, light: DirectionalLight, shadowCascadeClips: number[], directionalLightMatrices: mat4.Mat4Array[], directionalLightShadowMaps: Texture2D[]): void;
     renderSpotLightShadow(renderer: Renderer, scene: Scene, light: SpotLight, spotLightMatrices: mat4.Mat4Array[], spotLightShadowMaps: Texture2D[]): void;
@@ -68,5 +66,5 @@ renderPointLightShadow(renderer: Renderer, scene: Scene, light: PointLight, pointLightShadowMaps: TextureCube[]): void;
     _getTexture(light: DirectionalLight | SpotLight, cascade?: number): Texture2D;
-    _getPointLightCamera(light: PointLight, target: CubeTarget): PerspectiveCamera;
-    _getDirectionalLightCamera(light: DirectionalLight, scene: Scene, sceneCamera: PerspectiveCamera | OrthoCamera): OrthoCamera;
-    _getSpotLightCamera(light: SpotLight): PerspectiveCamera;
+    _getPointLightCamera(light: PointLight, target: CubeTarget): Camera<"perspective">;
+    _getDirectionalLightCamera(light: DirectionalLight, scene: Scene, sceneCamera: Camera): Camera<"orthographic">;
+    _getSpotLightCamera(light: SpotLight): Camera<"perspective">;
     /**
@@ -73,0 +71,0 @@ * @param  {clay.Renderer|WebGL2RenderingContext} [renderer]

dist/Scene.d.ts

@@ -57,3 +57,3 @@ import ClayNode, { ClayNodeOpts } from './Node';
      */
-    getMainCamera(): Camera;
+    getMainCamera(): Camera<"perspective" | "orthographic">;
     getLights(): Light[];
@@ -60,0 +60,0 @@ updateLights(): void;

dist/Skybox.d.ts

@@ -26,3 +26,20 @@ import Mesh, { MeshOpts } from './Mesh';
         type: "vec3";
-    };
+    }; /**
+     * @constructor clay.plugin.Skybox
+     *
+     * @example
+     *     const skyTex = new clay.TextureCube();
+     *     skyTex.load({
+     *         'px': 'assets/textures/sky/px.jpg',
+     *         'nx': 'assets/textures/sky/nx.jpg'
+     *         'py': 'assets/textures/sky/py.jpg'
+     *         'ny': 'assets/textures/sky/ny.jpg'
+     *         'pz': 'assets/textures/sky/pz.jpg'
+     *         'nz': 'assets/textures/sky/nz.jpg'
+     *     });
+     *     const skybox = new clay.plugin.Skybox({
+     *         scene: scene
+     *     });
+     *     skybox.material.set('environmentMap', skyTex);
+     */
 }, never>, import("./Shader").FragmentShader<{
@@ -29,0 +46,0 @@ PI: number;

dist/vr/StereoCamera.d.ts

@@ -1,2 +0,2 @@
-import PerspectiveCamera from '../camera/Perspective';
+import Camera from '../Camera';
 import Matrix4 from '../math/Matrix4';
@@ -6,12 +6,12 @@ import type ClayNode from '../Node';
     aspect: number;
-    _leftCamera: PerspectiveCamera;
-    _rightCamera: PerspectiveCamera;
+    _leftCamera: Camera<"perspective">;
+    _rightCamera: Camera<"perspective">;
     _eyeLeft: Matrix4;
     _eyeRight: Matrix4;
     _frameData: any;
-    updateFromCamera(camera: PerspectiveCamera, focus: number, zoom: number, eyeSep: number): void;
+    updateFromCamera(camera: Camera<'perspective'>, focus: number, zoom: number, eyeSep: number): void;
     updateFromVRDisplay(vrDisplay: any, parentNode: ClayNode): void;
-    getLeftCamera(): PerspectiveCamera;
-    getRightCamera(): PerspectiveCamera;
+    getLeftCamera(): Camera<"perspective">;
+    getRightCamera(): Camera<"perspective">;
 }
 export default StereoCamera;

lib/App3D.d.ts

@@ -10,4 +10,2 @@ import Renderer from './Renderer';
 import Material, { MaterialOpts } from './Material';
-import PerspectiveCamera from './camera/Perspective';
-import OrthographicCamera from './camera/Orthographic';
 import Vector3 from './math/Vector3';
@@ -24,2 +22,3 @@ import { GLTFLoadResult } from './loader/GLTF';
 import { Notifier } from './core';
+import Camera from './Camera';
 import { EventManager, EventTriggers } from './app/EventManager';
@@ -350,4 +349,4 @@ import Shader from './Shader';
      */
-    createCamera(position: Vector3 | Vector3['array'], target: Vector3 | Vector3['array'], type: 'ortho' | 'orthographic', extent?: Vector3 | Vector3['array']): OrthographicCamera;
-    createCamera(position: Vector3 | Vector3['array'], target?: Vector3 | Vector3['array'], type?: 'perspective'): PerspectiveCamera;
+    createCamera(position: Vector3 | Vector3['array'], target: Vector3 | Vector3['array'], type: 'ortho' | 'orthographic', extent?: Vector3 | Vector3['array']): Camera<'orthographic'>;
+    createCamera(position: Vector3 | Vector3['array'], target?: Vector3 | Vector3['array'], type?: 'perspective'): Camera<'perspective'>;
     /**
@@ -354,0 +353,0 @@ * Create a directional light and add it to the scene.

lib/App3D.js

@@ -18,4 +18,2 @@ // TODO createCompositor
 import Material from './Material';
-import PerspectiveCamera from './camera/Perspective';
-import OrthographicCamera from './camera/Orthographic';
 import Vector3 from './math/Vector3';
@@ -38,2 +36,3 @@ import { load as loadGLTF } from './loader/GLTF';
 import GPUResourceManager from './app/GPUResourceManager';
+import Camera from './Camera';
 import { EventManager } from './app/EventManager';
@@ -222,4 +221,4 @@ import { isTextureUniform } from './Shader';
                 const camera = this._scene.getMainCamera();
-                if (camera instanceof PerspectiveCamera) {
-                    camera.aspect = this._renderer.getViewportAspect();
+                if (camera.projection.type === 'perspective') {
+                    camera.projection.aspect = this._renderer.getViewportAspect();
                 }
@@ -638,15 +637,8 @@ }
     createCamera(position, target, type, extent) {
-        let CameraCtor;
-        let isOrtho = false;
-        if (type === 'ortho' || type === 'orthographic') {
-            isOrtho = true;
-            CameraCtor = OrthographicCamera;
+        // let CameraCtor;
+        // let isOrtho = false;
+        if (type === 'ortho') {
+            type = 'orthographic';
         }
-        else {
-            if (type && type !== 'perspective') {
-                console.error('Unkown camera type ' + type + '. Use default perspective camera');
-            }
-            CameraCtor = PerspectiveCamera;
-        }
-        const camera = new CameraCtor();
+        const camera = new Camera(type);
         if (position instanceof Vector3) {
@@ -664,13 +656,14 @@ camera.position.copy(position);
         }
-        if (extent && isOrtho) {
+        const projParams = camera.projection;
+        if (extent && projParams.type === 'orthographic') {
             extent = extent.array || extent;
-            camera.left = -extent[0] / 2;
-            camera.right = extent[0] / 2;
-            camera.top = extent[1] / 2;
-            camera.bottom = -extent[1] / 2;
-            camera.near = 0;
-            camera.far = extent[2];
+            projParams.left = -extent[0] / 2;
+            projParams.right = extent[0] / 2;
+            projParams.top = extent[1] / 2;
+            projParams.bottom = -extent[1] / 2;
+            projParams.near = 0;
+            projParams.far = extent[2];
         }
-        else {
-            camera.aspect = this._renderer.getViewportAspect();
+        else if (projParams.type === 'perspective') {
+            projParams.aspect = this._renderer.getViewportAspect();
         }
@@ -677,0 +670,0 @@ this._scene.add(camera);

lib/Camera.d.ts

@@ -8,6 +8,41 @@ import ClayNode, { ClayNodeOpts } from './Node';
 }
-interface Camera extends ClayNodeOpts {
+type CameraProjectionTypes = 'perspective' | 'orthographic';
+export declare class CameraPerspectiveProjection {
+    type: 'perspective';
+    /**
+     * Vertical field of view in degrees
+     */
+    fov: number;
+    /**
+     * Aspect ratio, typically viewport width / height
+     */
+    aspect: number;
+    /**
+     * Near bound of the frustum
+     */
+    near: number;
+    /**
+     * Far bound of the frustum
+     */
+    far: number;
 }
-declare class Camera extends ClayNode {
+export declare class CameraOrthographicProjection {
+    type: 'orthographic';
+    left: number;
+    right: number;
+    near: number;
+    far: number;
+    top: number;
+    bottom: number;
+}
+type Projections = {
+    orthographic: CameraOrthographicProjection;
+    perspective: CameraPerspectiveProjection;
+};
+declare class Camera<T extends CameraProjectionTypes = CameraProjectionTypes> extends ClayNode {
     /**
+     * Camera projection
+     */
+    projection: Projections[T];
+    /**
      * Camera projection matrix
@@ -32,2 +67,6 @@ */
     offset: Vector2;
+    /**
+     * @param type Default to be perspective
+     */
+    constructor(type?: T, opts?: Omit<Partial<Projections[T]>, 'type'>);
     update(): void;
@@ -40,6 +79,2 @@ updateOffset?: (width: number, height: number, dpr: number) => void;
     /**
-     * Decompose camera projection matrix
-     */
-    decomposeProjectionMatrix(): void;
-    /**
      * Set camera projection matrix
@@ -54,2 +89,6 @@ * @param {clay.Matrix4} projectionMatrix
     /**
+     * Decompose camera projection matrix
+     */
+    decomposeProjectionMatrix(): void;
+    /**
      * Cast a picking ray from camera near plane to far plane
@@ -62,3 +101,4 @@ * @function
     castRay(ndc: Vector2, out?: Ray): Ray;
+    clone(): any;
 }
 export default Camera;

lib/Camera.js

@@ -9,6 +9,41 @@ import ClayNode from './Node';
 const v4Arr = vec4.create();
-class Camera extends ClayNode {
+export class CameraPerspectiveProjection {
     constructor() {
-        super(...arguments);
+        this.type = 'perspective';
         /**
+         * Vertical field of view in degrees
+         */
+        this.fov = 50;
+        /**
+         * Aspect ratio, typically viewport width / height
+         */
+        this.aspect = 1;
+        /**
+         * Near bound of the frustum
+         */
+        this.near = 0.1;
+        /**
+         * Far bound of the frustum
+         */
+        this.far = 2000;
+    }
+}
+export class CameraOrthographicProjection {
+    constructor() {
+        this.type = 'orthographic';
+        this.left = -1;
+        this.right = 1;
+        this.near = -1;
+        this.far = 1;
+        this.top = 1;
+        this.bottom = -1;
+    }
+}
+class Camera extends ClayNode {
+    /**
+     * @param type Default to be perspective
+     */
+    constructor(type, opts) {
+        super();
+        /**
          * Camera projection matrix
@@ -33,2 +68,12 @@ */
         this.offset = new Vector2();
+        // TODO
+        this.projection = (type === 'orthographic'
+            ? new CameraOrthographicProjection()
+            : new CameraPerspectiveProjection());
+        Object.keys(opts || {}).forEach((key) => {
+            const val = opts[key];
+            if (!isNaN(val)) {
+                this.projection[key] = val;
+            }
+        });
     }
@@ -57,6 +102,2 @@ update() {
     /**
-     * Decompose camera projection matrix
-     */
-    decomposeProjectionMatrix() { }
-    /**
      * Set camera projection matrix
@@ -73,4 +114,35 @@ * @param {clay.Matrix4} projectionMatrix
      */
-    updateProjectionMatrix() { }
+    updateProjectionMatrix() {
+        const proj = this.projection;
+        if (proj.type === 'orthographic') {
+            this.projectionMatrix.ortho(proj.left, proj.right, proj.bottom, proj.top, proj.near, proj.far);
+        }
+        else {
+            const rad = (proj.fov / 180) * Math.PI;
+            this.projectionMatrix.perspective(rad, proj.aspect, proj.near, proj.far);
+        }
+    }
     /**
+     * Decompose camera projection matrix
+     */
+    decomposeProjectionMatrix() {
+        const proj = this.projection;
+        const m = this.projectionMatrix.array;
+        if (proj.type === 'orthographic') {
+            proj.left = (-1 - m[12]) / m[0];
+            proj.right = (1 - m[12]) / m[0];
+            proj.top = (1 - m[13]) / m[5];
+            proj.bottom = (-1 - m[13]) / m[5];
+            proj.near = -(-1 - m[14]) / m[10];
+            proj.far = -(1 - m[14]) / m[10];
+        }
+        else {
+            const rad = Math.atan(1 / m[5]) * 2;
+            proj.fov = (rad / Math.PI) * 180;
+            proj.aspect = m[5] / m[0];
+            proj.near = m[14] / (m[10] - 1);
+            proj.far = m[14] / (m[10] + 1);
+        }
+    }
+    /**
      * Cast a picking ray from camera near plane to far plane
@@ -98,4 +170,9 @@ * @function
     }
+    clone() {
+        const camera = super.clone.call(this);
+        camera.projection = Object.assign({}, this.projection);
+        return camera;
+    }
 }
 export default Camera;
 //# sourceMappingURL=Camera.js.map

lib/claygl.d.ts

@@ -32,3 +32,2 @@ import { setCanvasSize } from './core/util';
 export * as constants from './core/constants';
-export { Perspective as PerspectiveCamera, Orthographic as OrthographicCamera } from './camera/index';
 export { Ambient as AmbientLight, AmbientCubemap as AmbientCubemapLight, AmbientSH as AmbientSHLight, Directional as DirectionalLight, Point as PointLight, Sphere as SphereLight, Spot as SpotLight, Tube as TubeLight } from './light/index';
@@ -35,0 +34,0 @@ export { default as Light } from './Light';

lib/claygl.js

@@ -38,4 +38,2 @@ import { setCanvasSize } from './core/util';
 export { constants_1 as constants };
-// Camera
-export { Perspective as PerspectiveCamera, Orthographic as OrthographicCamera } from './camera/index';
 // Light
@@ -42,0 +40,0 @@ export { Ambient as AmbientLight, AmbientCubemap as AmbientCubemapLight, AmbientSH as AmbientSHLight, Directional as DirectionalLight, Point as PointLight, Sphere as SphereLight, Spot as SpotLight, Tube as TubeLight } from './light/index';

lib/loader/GLTF.d.ts

@@ -10,3 +10,3 @@ import Scene from '../Scene';
 import Shader from '../Shader';
-import type Camera from '../Camera';
+import Camera from '../Camera';
 type GLTFFormat = any;
@@ -13,0 +13,0 @@ interface ParsedLib {

lib/loader/GLTF.js

@@ -18,4 +18,2 @@ /**
 import Joint from '../Joint';
-import PerspectiveCamera from '../camera/Perspective';
-import OrthographicCamera from '../camera/Orthographic';
 import * as constants from '../core/constants';
@@ -27,2 +25,3 @@ import BoundingBox from '../math/BoundingBox';
 import { createStandardShader } from '../shader/create';
+import Camera from '../Camera';
 const semanticAttributeMap = {
@@ -873,24 +872,22 @@ NORMAL: 'normal',
     const cameraInfo = json.cameras[nodeInfo.camera];
-    if (cameraInfo.type === 'perspective') {
+    const camera = new Camera(cameraInfo.type);
+    const proj = camera.projection;
+    camera.name = nodeInfo.name;
+    if (proj.type === 'perspective') {
         const perspectiveInfo = cameraInfo.perspective || {};
-        return new PerspectiveCamera({
-            name: nodeInfo.name,
-            aspect: perspectiveInfo.aspectRatio,
-            fov: (perspectiveInfo.yfov / Math.PI) * 180,
-            far: perspectiveInfo.zfar,
-            near: perspectiveInfo.znear
-        });
+        perspectiveInfo.yfov != null && (proj.fov = (perspectiveInfo.yfov / Math.PI) * 180);
+        perspectiveInfo.znear != null && (proj.near = perspectiveInfo.znear);
+        perspectiveInfo.zfar != null && (proj.far = perspectiveInfo.zfar);
+        perspectiveInfo.aspectRatio != null && (proj.aspect = perspectiveInfo.aspectRatio);
     }
     else {
         const orthographicInfo = cameraInfo.orthographic || {};
-        return new OrthographicCamera({
-            name: nodeInfo.name,
-            top: orthographicInfo.ymag,
-            right: orthographicInfo.xmag,
-            left: -orthographicInfo.xmag,
-            bottom: -orthographicInfo.ymag,
-            near: orthographicInfo.znear,
-            far: orthographicInfo.zfar
-        });
+        orthographicInfo.ymag != null && (proj.top = orthographicInfo.ymag);
+        orthographicInfo.xmag != null && (proj.right = orthographicInfo.xmag);
+        orthographicInfo.xmag != null && (proj.left = -orthographicInfo.xmag);
+        orthographicInfo.ymag != null && (proj.bottom = -orthographicInfo.ymag);
+        orthographicInfo.znear != null && (proj.near = orthographicInfo.znear);
+        orthographicInfo.zfar != null && (proj.far = orthographicInfo.zfar);
     }
+    return camera;
 }
@@ -897,0 +894,0 @@ function parseNodes(json, lib, opts) {

lib/plugin/OrbitControl.d.ts

@@ -5,6 +5,6 @@ import Vector2 from '../math/Vector2';
 import Timeline from '../Timeline';
-import ClayNode from '../Node';
 import type { vec3 } from '../glmatrix';
 import type { AnimationEasing } from '../animation/easing';
 import type ProceduralKeyframeAnimator from '../animation/ProceduralKeyframeAnimator';
+import Camera from '../Camera';
 type AnimatableControlOpts = Pick<OrbitControlOpts, 'distance' | 'orthographicSize' | 'alpha' | 'beta' | 'center'>;
@@ -15,3 +15,3 @@ type MouseButtons = 'left' | 'right' | 'middle';
 interface OrbitControlOpts {
-    target: ClayNode;
+    target: Camera;
     timeline?: Timeline;
@@ -122,4 +122,4 @@ domElement: HTMLElement;
     set autoRotate(val: boolean);
-    get target(): ClayNode | undefined;
-    set target(val: ClayNode | undefined);
+    get target(): Camera | undefined;
+    set target(val: Camera | undefined);
     /**
@@ -225,5 +225,2 @@ * Initialize.
         target: any;
-        /**
-         * Only available when camera is orthographic
-         */
         event: PinchEvent;
@@ -230,0 +227,0 @@ } | undefined;

lib/plugin/OrbitControl.js

@@ -5,5 +5,3 @@ import Vector2 from '../math/Vector2';
 import vendor from '../core/vendor';
-import PerspectiveCamera from '../camera/Perspective';
 import Notifier from '../core/Notifier';
-import OrthographicCamera from '../camera/Orthographic';
 import { assign, isArray } from '../core/util';
@@ -350,10 +348,11 @@ const addEvent = vendor.addEventListener;
         const aspect = this.aspect;
-        if (aspect) {
-            if (camera instanceof PerspectiveCamera) {
+        if (aspect && camera) {
+            const proj = camera.projection;
+            if (proj.type === 'perspective') {
                 // TODO may conflict with aspect updating in the App3D
-                this._needsUpdate || (this._needsUpdate = Math.abs(aspect - camera.aspect) > 1e-4);
-                camera.aspect = aspect;
+                this._needsUpdate || (this._needsUpdate = Math.abs(aspect - proj.aspect) > 1e-4);
+                proj.aspect = aspect;
             }
-            else if (camera instanceof OrthographicCamera) {
-                const oldAspect = (camera.right - camera.left) / (camera.top - camera.bottom);
+            else {
+                const oldAspect = (proj.right - proj.left) / (proj.top - proj.bottom);
                 if (Math.abs(aspect - oldAspect) > 1e-4) {
@@ -387,3 +386,4 @@ this._needsUpdate = true;
     _updateDistanceOrSize(deltaTime) {
-        if (!(this.target instanceof PerspectiveCamera)) {
+        var _a;
+        if (((_a = this.target) === null || _a === void 0 ? void 0 : _a.projection.type) === 'orthographic') {
             this._setOrthoSize(this._orthoSize + (this._zoomSpeed * deltaTime) / 20);
@@ -401,10 +401,10 @@ }
         this._orthoSize = Math.max(Math.min(size, this.maxOrthographicSize), this.minOrthographicSize);
-        const camera = this.target;
+        const proj = this.target.projection;
         const cameraHeight = this._orthoSize;
         // TODO
         const cameraWidth = cameraHeight * (this.aspect || 1);
-        camera.left = -cameraWidth / 2;
-        camera.right = cameraWidth / 2;
-        camera.top = cameraHeight / 2;
-        camera.bottom = -cameraHeight / 2;
+        proj.left = -cameraWidth / 2;
+        proj.right = cameraWidth / 2;
+        proj.top = cameraHeight / 2;
+        proj.bottom = -cameraHeight / 2;
     }
@@ -465,2 +465,3 @@ _updatePan(deltaTime) {
     decomposeTransform() {
+        var _a;
         if (!this.target) {
@@ -478,4 +479,5 @@ return;
         this._setDistance(this.target.position.dist(this._center));
-        if (this.target instanceof OrthographicCamera) {
-            this._setOrthoSize(this.target.top - this.target.bottom);
+        const proj = (_a = this.target) === null || _a === void 0 ? void 0 : _a.projection;
+        if (proj.type === 'orthographic') {
+            this._setOrthoSize(proj.top - proj.bottom);
         }
@@ -601,4 +603,6 @@ }
     _zoomHandler(e, delta) {
+        var _a;
         let speed;
-        if (this.target instanceof PerspectiveCamera) {
+        const proj = (_a = this.target) === null || _a === void 0 ? void 0 : _a.projection;
+        if (proj && proj.type === 'perspective') {
             speed = Math.max(Math.max(Math.min(this._distance - this.minDistance, this.maxDistance - this._distance)) /
@@ -605,0 +609,0 @@ 20, 0.5);

lib/prePass/EnvironmentMap.d.ts

 import Vector3 from '../math/Vector3';
-import PerspectiveCamera from '../camera/Perspective';
 import TextureCube, { CubeTarget } from '../TextureCube';
@@ -7,2 +6,3 @@ import type ShadowMapPass from './ShadowMap';
 import type Scene from '../Scene';
+import Camera from '../Camera';
 interface EnvironmentMapPassOpts {
@@ -76,3 +76,3 @@ /**
     constructor(opts?: Partial<EnvironmentMapPassOpts>);
-    getCamera(target: CubeTarget): PerspectiveCamera;
+    getCamera(target: CubeTarget): Camera<"perspective">;
     render(renderer: Renderer, scene: Scene, notUpdateScene?: boolean): void;
@@ -79,0 +79,0 @@ dispose(renderer: Renderer): void;

lib/prePass/EnvironmentMap.js

 import Vector3 from '../math/Vector3';
-import PerspectiveCamera from '../camera/Perspective';
 import FrameBuffer from '../FrameBuffer';
@@ -7,2 +6,3 @@ import { cubeTargets } from '../TextureCube';
 import { assign } from '../core/util';
+import Camera from '../Camera';
 /**
@@ -46,3 +46,4 @@ * Pass rendering scene to a environment cube map
         const cameras = (this._cameras = cubeTargets.reduce((obj, target) => {
-            obj[target] = new PerspectiveCamera({ fov: 90 });
+            obj[target] = new Camera();
+            obj[target].projection.fov = 90;
             return obj;
@@ -79,5 +80,5 @@ }, {}));
             Vector3.copy(camera.position, this.position);
-            camera.far = this.far;
-            camera.near = this.near;
-            camera.fov = fov;
+            camera.projection.far = this.far;
+            camera.projection.near = this.near;
+            camera.projection.fov = fov;
             if (this.shadowMapPass) {
@@ -84,0 +85,0 @@ camera.update();

lib/prePass/ShadowMap.d.ts

@@ -6,4 +6,2 @@ import Renderer from '../Renderer';
 import TextureCube, { CubeTarget } from '../TextureCube';
-import PerspectiveCamera from '../camera/Perspective';
-import OrthoCamera from '../camera/Orthographic';
 import * as mat4 from '../glmatrix/mat4';
@@ -61,3 +59,3 @@ import type Renderable from '../Renderable';
     _renderShadowPass(renderer: Renderer, scene: Scene, sceneCamera: Camera, notUpdateScene?: boolean): void;
-    renderDirectionalLightShadow(renderer: Renderer, scene: Scene, sceneCamera: PerspectiveCamera | OrthoCamera, light: DirectionalLight, shadowCascadeClips: number[], directionalLightMatrices: mat4.Mat4Array[], directionalLightShadowMaps: Texture2D[]): void;
+    renderDirectionalLightShadow(renderer: Renderer, scene: Scene, sceneCamera: Camera, light: DirectionalLight, shadowCascadeClips: number[], directionalLightMatrices: mat4.Mat4Array[], directionalLightShadowMaps: Texture2D[]): void;
     renderSpotLightShadow(renderer: Renderer, scene: Scene, light: SpotLight, spotLightMatrices: mat4.Mat4Array[], spotLightShadowMaps: Texture2D[]): void;
@@ -68,5 +66,5 @@ renderPointLightShadow(renderer: Renderer, scene: Scene, light: PointLight, pointLightShadowMaps: TextureCube[]): void;
     _getTexture(light: DirectionalLight | SpotLight, cascade?: number): Texture2D;
-    _getPointLightCamera(light: PointLight, target: CubeTarget): PerspectiveCamera;
-    _getDirectionalLightCamera(light: DirectionalLight, scene: Scene, sceneCamera: PerspectiveCamera | OrthoCamera): OrthoCamera;
-    _getSpotLightCamera(light: SpotLight): PerspectiveCamera;
+    _getPointLightCamera(light: PointLight, target: CubeTarget): Camera<"perspective">;
+    _getDirectionalLightCamera(light: DirectionalLight, scene: Scene, sceneCamera: Camera): Camera<"orthographic">;
+    _getSpotLightCamera(light: SpotLight): Camera<"perspective">;
     /**
@@ -73,0 +71,0 @@ * @param  {clay.Renderer|WebGL2RenderingContext} [renderer]

lib/prePass/ShadowMap.js

@@ -12,7 +12,6 @@ import * as constants from '../core/constants';
 import TextureCube, { cubeTargets } from '../TextureCube';
-import PerspectiveCamera from '../camera/Perspective';
-import OrthoCamera from '../camera/Orthographic';
 import TexturePool from '../composite/TexturePool';
 import * as mat4 from '../glmatrix/mat4';
 import { Notifier } from '../core';
+import Camera from '../Camera';
 import FullscreenQuadPass from '../FullscreenQuadPass';
@@ -337,6 +336,7 @@ import { assign } from '../core/util';
         }
+        const proj = sceneCamera.projection;
         // Considering moving speed since the bounding box is from last frame
         // TODO: add a bias
-        const clippedFar = Math.min(-scene.viewBoundingBoxLastFrame.min.z, sceneCamera.far);
-        const clippedNear = Math.max(-scene.viewBoundingBoxLastFrame.max.z, sceneCamera.near);
+        const clippedFar = Math.min(-scene.viewBoundingBoxLastFrame.min.z, proj.far);
+        const clippedNear = Math.max(-scene.viewBoundingBoxLastFrame.max.z, proj.near);
         const lightCamera = this._getDirectionalLightCamera(light, scene, sceneCamera);
@@ -349,5 +349,5 @@ const lvpMat4Arr = lightViewProjMatrix.array;
         const clipPlanes = [];
-        const isPerspective = sceneCamera instanceof PerspectiveCamera;
-        const scaleZ = (sceneCamera.near + sceneCamera.far) / (sceneCamera.near - sceneCamera.far);
-        const offsetZ = (2 * sceneCamera.near * sceneCamera.far) / (sceneCamera.near - sceneCamera.far);
+        const isPerspective = proj.type === 'perspective';
+        const scaleZ = (proj.near + proj.far) / (proj.near - proj.far);
+        const offsetZ = (2 * proj.near * proj.far) / (proj.near - proj.far);
         for (let i = 0; i <= light.shadowCascade; i++) {
@@ -370,6 +370,6 @@ const clog = clippedNear * Math.pow(clippedFar / clippedNear, i / light.shadowCascade);
             if (isPerspective) {
-                mat4.perspective(splitProjMatrix.array, (sceneCamera.fov / 180) * Math.PI, sceneCamera.aspect, nearPlane, farPlane);
+                mat4.perspective(splitProjMatrix.array, (proj.fov / 180) * Math.PI, proj.aspect, nearPlane, farPlane);
             }
             else {
-                mat4.ortho(splitProjMatrix.array, sceneCamera.left, sceneCamera.right, sceneCamera.bottom, sceneCamera.top, nearPlane, farPlane);
+                mat4.ortho(splitProjMatrix.array, proj.left, proj.right, proj.bottom, proj.top, nearPlane, farPlane);
             }
@@ -574,3 +574,3 @@ splitFrustum.setFromProjection(splitProjMatrix);
             lightCameras.point = cubeTargets.reduce((obj, target) => {
-                obj[target] = new PerspectiveCamera();
+                obj[target] = new Camera('perspective');
                 return obj;
@@ -580,4 +580,5 @@ }, {});
         const camera = lightCameras.point[target];
-        camera.far = light.range;
-        camera.fov = 90;
+        const proj = camera.projection;
+        proj.far = light.range;
+        proj.fov = 90;
         camera.position.set(0, 0, 0);
@@ -612,3 +613,3 @@ switch (target) {
         if (!this._lightCameras.directional) {
-            this._lightCameras.directional = new OrthoCamera();
+            this._lightCameras.directional = new Camera('orthographic');
         }
@@ -643,16 +644,17 @@ const camera = this._lightCameras.directional;
             .transformMat4(camera.worldTransform);
-        camera.near = 0;
-        camera.far = max.z - min.z + nearDistance;
+        const proj = camera.projection;
+        proj.near = 0;
+        proj.far = max.z - min.z + nearDistance;
         // Make sure receivers not in the frustum will stil receive the shadow.
         if (isNaN(+this.lightFrustumBias)) {
-            camera.far *= 4;
+            proj.far *= 4;
         }
         else {
-            camera.far += +this.lightFrustumBias;
+            proj.far += +this.lightFrustumBias;
         }
         // PENDING
-        camera.left = min.x - PCSSLightSize;
-        camera.right = max.x + PCSSLightSize;
-        camera.top = max.y + PCSSLightSize;
-        camera.bottom = min.y - PCSSLightSize;
+        proj.left = min.x - PCSSLightSize;
+        proj.right = max.x + PCSSLightSize;
+        proj.top = max.y + PCSSLightSize;
+        proj.bottom = min.y - PCSSLightSize;
         camera.update();
@@ -663,8 +665,9 @@ return camera;
         if (!this._lightCameras.spot) {
-            this._lightCameras.spot = new PerspectiveCamera();
+            this._lightCameras.spot = new Camera('perspective');
         }
         const camera = this._lightCameras.spot;
+        const proj = camera.projection;
         // Update properties
-        camera.fov = light.penumbraAngle * 2;
-        camera.far = light.range;
+        proj.fov = light.penumbraAngle * 2;
+        proj.far = light.range;
         camera.worldTransform.copy(light.worldTransform);
@@ -671,0 +674,0 @@ camera.updateProjectionMatrix();

lib/Renderer.js

@@ -366,6 +366,7 @@ // TODO Resources like shader, texture, geometry reference management
                 if (camera) {
-                    program.setSemanticUniform(gl, 'NEAR', camera.near);
-                    program.setSemanticUniform(gl, 'FAR', camera.far);
+                    const proj = camera.projection;
+                    program.setSemanticUniform(gl, 'NEAR', proj.near);
+                    program.setSemanticUniform(gl, 'FAR', proj.far);
                     if (logDepthBuffer) {
-                        program.setSemanticUniform(gl, 'LOG_DEPTH_BUFFER_FC', 2.0 / (Math.log(camera.far + 1.0) / Math.LN2));
+                        program.setSemanticUniform(gl, 'LOG_DEPTH_BUFFER_FC', 2.0 / (Math.log(proj.far + 1.0) / Math.LN2));
                     }
@@ -441,3 +442,3 @@ }
         if (this.logDepthBuffer) {
-            this._prezMaterial.set('logDepthBufFC', 2.0 / (Math.log(camera.far + 1.0) / Math.LN2));
+            this._prezMaterial.set('logDepthBufFC', 2.0 / (Math.log(camera.projection.far + 1.0) / Math.LN2));
         }
@@ -444,0 +445,0 @@ _gl.colorMask(false, false, false, false);

lib/Scene.d.ts

@@ -57,3 +57,3 @@ import ClayNode, { ClayNodeOpts } from './Node';
      */
-    getMainCamera(): Camera;
+    getMainCamera(): Camera<"perspective" | "orthographic">;
     getLights(): Light[];
@@ -60,0 +60,0 @@ updateLights(): void;

lib/Skybox.d.ts

@@ -26,3 +26,20 @@ import Mesh, { MeshOpts } from './Mesh';
         type: "vec3";
-    };
+    }; /**
+     * @constructor clay.plugin.Skybox
+     *
+     * @example
+     *     const skyTex = new clay.TextureCube();
+     *     skyTex.load({
+     *         'px': 'assets/textures/sky/px.jpg',
+     *         'nx': 'assets/textures/sky/nx.jpg'
+     *         'py': 'assets/textures/sky/py.jpg'
+     *         'ny': 'assets/textures/sky/ny.jpg'
+     *         'pz': 'assets/textures/sky/pz.jpg'
+     *         'nz': 'assets/textures/sky/nz.jpg'
+     *     });
+     *     const skybox = new clay.plugin.Skybox({
+     *         scene: scene
+     *     });
+     *     skybox.material.set('environmentMap', skyTex);
+     */
 }, never>, import("./Shader").FragmentShader<{
@@ -29,0 +46,0 @@ PI: number;

lib/util/cubemap.js

@@ -98,3 +98,3 @@ // Cubemap prefilter utility
             const camera = envMapPass.getCamera(cubeTargets[j]);
-            camera.fov = fov;
+            camera.projection.fov = fov;
             renderer.render(dummyScene, camera, frameBuffer);
@@ -101,0 +101,0 @@ }

lib/util/sh.js

@@ -152,3 +152,3 @@ import FrameBuffer from '../FrameBuffer';
         const camera = envMapPass.getCamera(cubeTargets[i]);
-        camera.fov = 90;
+        camera.projection.fov = 90;
         framebuffer.attach(rgbmTexture);
@@ -155,0 +155,0 @@ renderer.render(dummyScene, camera, framebuffer);

lib/vr/CardboardDistorter.js

@@ -10,4 +10,4 @@ // https://github.com/googlevr/webvr-polyfill/blob/master/src/cardboard-distorter.js
 import Shader from '../Shader';
-import PerspectiveCamera from '../camera/Perspective';
 import { VRDistorterFragment, VRDistorterVertex } from './distorter';
+import Camera from '../Camera';
 function lerp(a, b, t) {
@@ -19,3 +19,3 @@ return a * (1 - t) + b * t;
         this.clearColor = [0, 0, 0, 1];
-        this._fakeCamera = new PerspectiveCamera();
+        this._fakeCamera = new Camera('perspective');
         this._mesh = new Mesh(new Geometry({
@@ -22,0 +22,0 @@ dynamic: true

lib/vr/StereoCamera.d.ts

@@ -1,2 +0,2 @@
-import PerspectiveCamera from '../camera/Perspective';
+import Camera from '../Camera';
 import Matrix4 from '../math/Matrix4';
@@ -6,12 +6,12 @@ import type ClayNode from '../Node';
     aspect: number;
-    _leftCamera: PerspectiveCamera;
-    _rightCamera: PerspectiveCamera;
+    _leftCamera: Camera<"perspective">;
+    _rightCamera: Camera<"perspective">;
     _eyeLeft: Matrix4;
     _eyeRight: Matrix4;
     _frameData: any;
-    updateFromCamera(camera: PerspectiveCamera, focus: number, zoom: number, eyeSep: number): void;
+    updateFromCamera(camera: Camera<'perspective'>, focus: number, zoom: number, eyeSep: number): void;
     updateFromVRDisplay(vrDisplay: any, parentNode: ClayNode): void;
-    getLeftCamera(): PerspectiveCamera;
-    getRightCamera(): PerspectiveCamera;
+    getLeftCamera(): Camera<"perspective">;
+    getRightCamera(): Camera<"perspective">;
 }
 export default StereoCamera;

lib/vr/StereoCamera.js

@@ -1,2 +0,2 @@
-import PerspectiveCamera from '../camera/Perspective';
+import Camera from '../Camera';
 import Matrix4 from '../math/Matrix4';
@@ -7,4 +7,4 @@ const tmpProjectionMatrix = new Matrix4();
         this.aspect = 0.5;
-        this._leftCamera = new PerspectiveCamera();
-        this._rightCamera = new PerspectiveCamera();
+        this._leftCamera = new Camera('perspective');
+        this._rightCamera = new Camera('perspective');
         this._eyeLeft = new Matrix4();
@@ -17,5 +17,6 @@ this._eyeRight = new Matrix4();
         eyeSep = eyeSep == null ? 0.064 : eyeSep;
-        const fov = camera.fov;
-        const aspect = camera.aspect * this.aspect;
-        const near = camera.near;
+        const proj = camera.projection;
+        const fov = proj.fov;
+        const aspect = proj.aspect * this.aspect;
+        const near = proj.near;
         // Off-axis stereoscopic effect based on
@@ -22,0 +23,0 @@ // http://paulbourke.net/stereographics/stereorender/

package.json

 {
   "name": "claygl-next",
-  "version": "2.0.0-alpha.34",
+  "version": "2.0.0-alpha.35",
   "description": "A 3D graphic library",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Worsened metrics

Total package byte prevSize

7138037

Number of package files

732

decreased by-1.61%

Lines of code

121941

decreased by-0.03%

No dependency changes