@realsee/five 6.8.0-alpha.2 → 6.8.0-alpha.21

package/vfx/particle/fragment-shader.d.ts

@@ -0,0 +1,2 @@
+declare const FRAGMENT_SHADER = "\nvarying vec4 vColor;\n\n#if defined(USE_MAP)\n  uniform sampler2D map;\n  varying float vAngle;\n#endif\n\nvoid main() {\n  gl_FragColor = vColor;\n\n  #if defined(USE_MAP)\n    float c = cos(vAngle);\n    float s = sin(vAngle);\n\n    // rotate UV coordinates to rotate texture\n    vec2 rotatedUV = vec2(\n      c * (gl_PointCoord.x - 0.5) + s * (gl_PointCoord.y - 0.5) + 0.5,\n      c * (gl_PointCoord.y - 0.5) - s * (gl_PointCoord.x - 0.5) + 0.5\n    );\n    vec4 rotatedTexture = texture2D(map, rotatedUV);\n    gl_FragColor = vColor * rotatedTexture;\n  #endif\n}\n";
+export { FRAGMENT_SHADER };

package/vfx/particle/instance.d.ts

@@ -0,0 +1,36 @@
+import * as THREE from 'three';
+import { TweenKeyframe } from './utils';
+declare class Instance {
+    birthTime: number;
+    deathAge: number;
+    position: THREE.Vector3;
+    velocity: THREE.Vector3;
+    acceleration: THREE.Vector3;
+    angle: number;
+    angleVelocity: number;
+    angleAcceleration: number;
+    size: number;
+    sizeTween: TweenKeyframe<number> | null;
+    color: THREE.Vector3;
+    colorTween: TweenKeyframe<THREE.Vector3> | null;
+    opacity: number;
+    opacityTween: TweenKeyframe<number> | null;
+    constructor(birthTime: number, deathAge: number, position: THREE.Vector3, velocity: THREE.Vector3, acceleration: THREE.Vector3, angle: number, angleVelocity: number, angleAcceleration: number, color: THREE.Vector3, colorTween: TweenKeyframe<THREE.Vector3> | null, size: number, sizeTween: TweenKeyframe<number> | null, opacity: number, opacityTween: TweenKeyframe<number> | null);
+    /**
+     * @param time 秒
+     */
+    getAlive(time: number): boolean;
+    /**
+     * @param time 秒
+     */
+    getState(time: number): {
+        alive: boolean;
+        age: number;
+        position: THREE.Vector3;
+        angle: number;
+        size: number;
+        color: THREE.Color;
+        opacity: number;
+    };
+}
+export { Instance };

package/vfx/particle/particle.d.ts

@@ -0,0 +1,205 @@
+import * as THREE from 'three';
+import { TweenKeyframe } from './utils';
+type ParticleType = 'CUBE' | 'SPHERE';
+/**
+ * 粒子系统初始化参数
+ */
+interface ParticleArgs {
+    /** 粒子的初始位置坐标 */
+    positionBase: THREE.Vector3;
+    /**
+     * 粒子坐标的抖动计算形式
+     * @description
+     * 粒子坐标的抖动计算形式，分 `CUBE` 和 `SPHERE` 形式。
+     * `CUBE` 形式通过一个 三维向量 的扩散值 positionCubeSpread，乘上一个 [0, 1] 的随机三维向量 计算。
+     * `SPHERE` 形式通过一个 数字 的扩散值 positionSphereSpread，乘上一个随机单位向量 计算。
+     */
+    positionStyle: ParticleType;
+    /** 粒子坐标的抖动`CUBE`计算形式下的扩散值 */
+    positionCubeSpread: THREE.Vector3;
+    /** 粒子坐标的抖动`SPHERE`计算形式下的扩散值 */
+    positionSphereSpread: number;
+    /**
+     * 粒子速度的抖动计算形式
+     * @description
+     * 粒子速度的抖动计算形式，分 `CUBE` 和 `SPHERE` 形式。
+     * `CUBE` 形式通过一个 三维向量 的速度值 velocityCubeBase 加上 三维向量 的扩散值 velocityCubeSpread 乘上一个 [0, 1] 的随机三维向量 计算。
+     * `SPHERE` 形式通过一个 数字 的速度值 velocitySphereBase 加上 数字 的扩散值 velocitySphereSpread 乘上 粒子坐标与粒子的初始位置坐标方向的单位向量 计算。
+     */
+    velocityStyle: ParticleType;
+    /** 粒子速度的`CUBE`计算形式下的速度值 */
+    velocityCubeBase: THREE.Vector3;
+    /** 粒子速度的`CUBE`计算形式下的扩散值 */
+    velocityCubeSpread: THREE.Vector3;
+    /** 粒子速度的`SPHERE`计算形式下的速度值 */
+    velocitySphereBase: number;
+    /** 粒子速度的`SPHERE`计算形式下的扩散值 */
+    velocitySphereSpread: number;
+    /** 粒子加速度 */
+    accelerationBase: THREE.Vector3;
+    /** 粒子加速度扩散值 */
+    accelerationSpread: THREE.Vector3;
+    /** 旋转角度初始值 */
+    angleBase: number;
+    /** 旋转角度初始值的扩散值 */
+    angleSpread: number;
+    /** 旋转角度速度值 */
+    angleVelocityBase: number;
+    /** 旋转角度速度值的扩散值 */
+    angleVelocitySpread: number;
+    /** 旋转角度加速度值 */
+    angleAccelerationBase: number;
+    /** 旋转角度加速度值扩散值 */
+    angleAccelerationSpread: number;
+    /** 粒子大小 */
+    sizeBase: number;
+    /** 粒子大小的扩散值 */
+    sizeSpread: number;
+    /** 粒子大小随时间分布的增益 */
+    sizeTween: TweenKeyframe<number> | null;
+    /**
+     * 颜色（hsl）
+     * @description
+     * http://en.wikipedia.org/wiki/HSL_and_HSV
+     * `{ x: h, y: s, z: l }`
+     */
+    colorBase: THREE.Vector3;
+    /** 颜色（hsl）的扩散值
+     * @description
+     * http://en.wikipedia.org/wiki/HSL_and_HSV
+     * `{ x: h, y: s, z: l }`
+     */
+    colorSpread: THREE.Vector3;
+    /**
+     * 颜色（hsl）随时间分布的增益
+     * @description
+     * http://en.wikipedia.org/wiki/HSL_and_HSV
+     * `{ x: h, y: s, z: l }`
+     */
+    colorTween: TweenKeyframe<THREE.Vector3> | null;
+    /** 透明度 */
+    opacityBase: number;
+    /** 透明度的扩散值 */
+    opacitySpread: number;
+    /** 透明度随时间分布的增益 */
+    opacityTween: TweenKeyframe<number> | null;
+    /** 贴图素材 */
+    texture: THREE.Texture;
+    /** 材质混合方式 */
+    blending: THREE.Blending;
+    /** 一秒产生多少粒子 */
+    particlesPerSecond: number;
+    /** 粒子存活时长 */
+    particleDeathAge: number;
+}
+declare class Particle extends THREE.Points<THREE.BufferGeometry, THREE.ShaderMaterial> {
+    needsRender: boolean;
+    /** 是否暂停 */
+    paused: boolean;
+    private disposed;
+    private birthTime;
+    private instances;
+    /** 粒子的初始位置坐标 */
+    positionBase: THREE.Vector3;
+    /**
+     * 粒子坐标的抖动计算形式
+     * @description
+     * 粒子坐标的抖动计算形式，分 `CUBE` 和 `SPHERE` 形式。
+     * `CUBE` 形式通过一个 三维向量 的扩散值 positionCubeSpread，乘上一个 [0, 1] 的随机三维向量 计算。
+     * `SPHERE` 形式通过一个 数字 的扩散值 positionSphereSpread，乘上一个随机单位向量 计算。
+     */
+    positionStyle: ParticleType;
+    /** 粒子坐标的抖动`CUBE`计算形式下的扩散值 */
+    positionCubeSpread: THREE.Vector3;
+    /** 粒子坐标的抖动`SPHERE`计算形式下的扩散值 */
+    positionSphereSpread: number;
+    /**
+     * 粒子速度的抖动计算形式
+     * @description
+     * 粒子速度的抖动计算形式，分 `CUBE` 和 `SPHERE` 形式。
+     * `CUBE` 形式通过一个 三维向量 的速度值 velocityCubeBase 加上 三维向量 的扩散值 velocityCubeSpread 乘上一个 [0, 1] 的随机三维向量 计算。
+     * `SPHERE` 形式通过一个 数字 的速度值 velocitySphereBase 加上 数字 的扩散值 velocitySphereSpread 乘上 粒子坐标与粒子的初始位置坐标方向的单位向量 计算。
+     */
+    velocityStyle: ParticleType;
+    /** 粒子速度的`CUBE`计算形式下的速度值 */
+    velocityCubeBase: THREE.Vector3;
+    /** 粒子速度的`CUBE`计算形式下的扩散值 */
+    velocityCubeSpread: THREE.Vector3;
+    /** 粒子速度的`SPHERE`计算形式下的速度值 */
+    velocitySphereBase: number;
+    /** 粒子速度的`SPHERE`计算形式下的扩散值 */
+    velocitySphereSpread: number;
+    /** 粒子加速度 */
+    accelerationBase: THREE.Vector3;
+    /** 粒子加速度扩散值 */
+    accelerationSpread: THREE.Vector3;
+    /** 旋转角度初始值 */
+    angleBase: number;
+    /** 旋转角度初始值的扩散值 */
+    angleSpread: number;
+    /** 旋转角度速度值 */
+    angleVelocityBase: number;
+    /** 旋转角度速度值的扩散值 */
+    angleVelocitySpread: number;
+    /** 旋转角度加速度值 */
+    angleAccelerationBase: number;
+    /** 旋转角度加速度值扩散值 */
+    angleAccelerationSpread: number;
+    /** 粒子大小 */
+    sizeBase: number;
+    /** 粒子大小的扩散值 */
+    sizeSpread: number;
+    /** 粒子大小随时间分布的增益 */
+    sizeTween: TweenKeyframe<number> | null;
+    /**
+     * 颜色（hsl）
+     * @description
+     * http://en.wikipedia.org/wiki/HSL_and_HSV
+     * `{ x: h, y: s, z: l }`
+     */
+    colorBase: THREE.Vector3;
+    /** 颜色（hsl）的扩散值
+     * @description
+     * http://en.wikipedia.org/wiki/HSL_and_HSV
+     * `{ x: h, y: s, z: l }`
+     */
+    colorSpread: THREE.Vector3;
+    /**
+     * 颜色（hsl）随时间分布的增益
+     * @description
+     * http://en.wikipedia.org/wiki/HSL_and_HSV
+     * `{ x: h, y: s, z: l }`
+     */
+    colorTween: TweenKeyframe<THREE.Vector3> | null;
+    /** 透明度 */
+    opacityBase: number;
+    /** 透明度的扩散值 */
+    opacitySpread: number;
+    /** 透明度随时间分布的增益 */
+    opacityTween: TweenKeyframe<number> | null;
+    /** 一秒产生多少粒子 */
+    particlesPerSecond: number;
+    /** 粒子存活时长 */
+    particleDeathAge: number;
+    constructor(args: Partial<ParticleArgs>);
+    /** 贴图素材 */
+    get texture(): THREE.Texture | null;
+    set texture(value: THREE.Texture | null);
+    /** 材质混合方式 */
+    get blending(): THREE.Blending;
+    set blending(value: THREE.Blending);
+    private createInstance;
+    /** 暂停 */
+    pause(): void;
+    /** 开始 */
+    play(): void;
+    /**
+     * 通过 Five 默认调用的 setTime 方法
+     * @param time - 毫秒
+     */
+    setTime(time: number): void;
+    /** 析构 */
+    dispose(): void;
+}
+export { Particle };
+export type { ParticleArgs, ParticleType, TweenKeyframe as ParticleTweenKeyframe };

package/vfx/particle/utils.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+declare function random(base: number, spread: number): number;
+declare function randomVector3(base: THREE.Vector3, spread: THREE.Vector3): THREE.Vector3;
+declare function displacement(velocity: number, acceleration: number, time: number): number;
+declare function displacementVector3(velocity: THREE.Vector3, acceleration: THREE.Vector3, time: number): THREE.Vector3;
+interface TweenKeyframe<T extends (number | THREE.Vector3)> {
+    times: number[];
+    values: T[];
+}
+declare function tweenLerp<T extends (number | THREE.Vector3)>(tweenKeyframe: TweenKeyframe<T>, time: number): T;
+export { random, randomVector3, displacement, displacementVector3, TweenKeyframe, tweenLerp };

package/vfx/particle/vertex-shader.d.ts

@@ -0,0 +1,2 @@
+declare const VERTEX_SHADER = "\nattribute vec3 color;\nattribute float opacity;\nattribute float size;\nattribute float alive; // float used as boolean (0 = false, 1 = true)\n\nvarying vec4 vColor;\n\n#if defined(USE_MAP)\n  attribute float angle;\n  varying float vAngle;\n#endif\n\nvoid main() {\n  if (alive > 0.5) {\n    vColor = vec4(color, opacity);\n  } else {\n    vColor = vec4(0.0, 0.0, 0.0, 0.0);\n  }\n  #if defined(USE_MAP)\n  vAngle = angle;\n  #endif\n  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n  gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );\n  gl_Position = projectionMatrix * mvPosition;\n}\n";
+export { VERTEX_SHADER };

package/vfx/particle-gpu/fragment-shader.d.ts

@@ -0,0 +1,2 @@
+declare const FRAGMENT_SHADER = "\nvarying vec4 vColor;\nvarying float vAngle;\n\n#if defined(USE_MAP)\n  uniform sampler2D map;\n#endif\n\nvoid main() {\n    // \u5982\u679C\u7C92\u5B50\u900F\u660E\u5EA6\u4E3A0\uFF0C\u76F4\u63A5\u4E22\u5F03\n    if (vColor.a <= 0.0) {\n        discard;\n    }\n    \n    gl_FragColor = vColor;\n\n    #if defined(USE_MAP)\n        float c = cos(vAngle);\n        float s = sin(vAngle);\n\n        // \u65CB\u8F6CUV\u5750\u6807\u4EE5\u65CB\u8F6C\u7EB9\u7406\n        vec2 rotatedUV = vec2(\n            c * (gl_PointCoord.x - 0.5) + s * (gl_PointCoord.y - 0.5) + 0.5,\n            c * (gl_PointCoord.y - 0.5) - s * (gl_PointCoord.x - 0.5) + 0.5\n        );\n        \n        vec4 textureColor = texture2D(map, rotatedUV);\n        gl_FragColor = vColor * textureColor;\n    #endif\n}\n";
+export { FRAGMENT_SHADER };

package/vfx/particle-gpu/instance.d.ts

@@ -0,0 +1,36 @@
+import * as THREE from 'three';
+import { TweenKeyframe } from './utils';
+declare class Instance {
+    birthTime: number;
+    deathAge: number;
+    position: THREE.Vector3;
+    velocity: THREE.Vector3;
+    acceleration: THREE.Vector3;
+    angle: number;
+    angleVelocity: number;
+    angleAcceleration: number;
+    size: number;
+    sizeTween: TweenKeyframe<number> | null;
+    color: THREE.Vector3;
+    colorTween: TweenKeyframe<THREE.Vector3> | null;
+    opacity: number;
+    opacityTween: TweenKeyframe<number> | null;
+    constructor(birthTime: number, deathAge: number, position: THREE.Vector3, velocity: THREE.Vector3, acceleration: THREE.Vector3, angle: number, angleVelocity: number, angleAcceleration: number, color: THREE.Vector3, colorTween: TweenKeyframe<THREE.Vector3> | null, size: number, sizeTween: TweenKeyframe<number> | null, opacity: number, opacityTween: TweenKeyframe<number> | null);
+    /**
+     * @param time 秒
+     */
+    getAlive(time: number): boolean;
+    /**
+     * @param time 秒
+     */
+    getState(time: number): {
+        alive: boolean;
+        age: number;
+        position: THREE.Vector3;
+        angle: number;
+        size: number;
+        color: THREE.Color;
+        opacity: number;
+    };
+}
+export { Instance };

package/vfx/particle-gpu/particle.d.ts

@@ -0,0 +1,95 @@
+import * as THREE from 'three';
+import { TweenKeyframe } from './utils';
+type ParticleType = 'CUBE' | 'SPHERE';
+/**
+ * GPU粒子系统初始化参数
+ */
+interface ParticleArgs {
+    /** 粒子的初始位置坐标 */
+    positionBase: THREE.Vector3;
+    /** 粒子坐标的抖动计算形式 */
+    positionStyle: ParticleType;
+    /** 粒子坐标的抖动`CUBE`计算形式下的扩散值 */
+    positionCubeSpread: THREE.Vector3;
+    /** 粒子坐标的抖动`SPHERE`计算形式下的扩散值 */
+    positionSphereSpread: number;
+    /** 粒子速度的抖动计算形式 */
+    velocityStyle: ParticleType;
+    /** 粒子速度的`CUBE`计算形式下的速度值 */
+    velocityCubeBase: THREE.Vector3;
+    /** 粒子速度的`CUBE`计算形式下的扩散值 */
+    velocityCubeSpread: THREE.Vector3;
+    /** 粒子速度的`SPHERE`计算形式下的速度值 */
+    velocitySphereBase: number;
+    /** 粒子速度的`SPHERE`计算形式下的扩散值 */
+    velocitySphereSpread: number;
+    /** 粒子加速度 */
+    accelerationBase: THREE.Vector3;
+    /** 粒子加速度扩散值 */
+    accelerationSpread: THREE.Vector3;
+    /** 旋转角度初始值 */
+    angleBase: number;
+    /** 旋转角度初始值的扩散值 */
+    angleSpread: number;
+    /** 旋转角度速度值 */
+    angleVelocityBase: number;
+    /** 旋转角度速度值的扩散值 */
+    angleVelocitySpread: number;
+    /** 粒子大小 */
+    sizeBase: number;
+    /** 粒子大小的扩散值 */
+    sizeSpread: number;
+    /** 粒子大小增长率 */
+    sizeGrowth: number;
+    /** 颜色（hsl） */
+    colorBase: THREE.Vector3;
+    /** 颜色（hsl）的扩散值 */
+    colorSpread: THREE.Vector3;
+    /** 透明度 */
+    opacityBase: number;
+    /** 透明度的扩散值 */
+    opacitySpread: number;
+    /** 贴图素材 */
+    texture: THREE.Texture;
+    /** 材质混合方式 */
+    blending: THREE.Blending;
+    /** 一秒产生多少粒子 */
+    particlesPerSecond: number;
+    /** 粒子存活时长 */
+    particleDeathAge: number;
+    /** 重力 */
+    gravity: THREE.Vector3;
+    /** 噪声强度 */
+    noiseStrength: number;
+    /** 阻尼系数 */
+    damping: number;
+}
+declare class Particle extends THREE.Points<THREE.BufferGeometry, THREE.ShaderMaterial> {
+    needsRender: boolean;
+    paused: boolean;
+    private disposed;
+    private startTime;
+    private particleCount;
+    particlesPerSecond: number;
+    particleDeathAge: number;
+    constructor(args: Partial<ParticleArgs>);
+    /** 贴图素材 */
+    get texture(): THREE.Texture | null;
+    set texture(value: THREE.Texture | null);
+    /** 材质混合方式 */
+    get blending(): THREE.Blending;
+    set blending(value: THREE.Blending);
+    /** 暂停 */
+    pause(): void;
+    /** 开始 */
+    play(): void;
+    /**
+     * 通过 Five 默认调用的 setTime 方法
+     * @param time - 毫秒
+     */
+    setTime(time: number): void;
+    /** 析构 */
+    dispose(): void;
+}
+export { Particle };
+export type { ParticleArgs, ParticleType, TweenKeyframe as ParticleTweenKeyframe };

package/vfx/particle-gpu/utils.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+declare function random(base: number, spread: number): number;
+declare function randomVector3(base: THREE.Vector3, spread: THREE.Vector3): THREE.Vector3;
+declare function displacement(velocity: number, acceleration: number, time: number): number;
+declare function displacementVector3(velocity: THREE.Vector3, acceleration: THREE.Vector3, time: number): THREE.Vector3;
+interface TweenKeyframe<T extends (number | THREE.Vector3)> {
+    times: number[];
+    values: T[];
+}
+declare function tweenLerp<T extends (number | THREE.Vector3)>(tweenKeyframe: TweenKeyframe<T>, time: number): T;
+export { random, randomVector3, displacement, displacementVector3, TweenKeyframe, tweenLerp };

package/vfx/particle-gpu/vertex-shader.d.ts

@@ -0,0 +1,2 @@
+declare const VERTEX_SHADER = "\n// \u7C92\u5B50\u521D\u59CB\u5C5E\u6027\nattribute vec3 initialVelocity;\nattribute vec3 acceleration;\nattribute float birthTime;\nattribute float lifeTime;\nattribute float initialSize;\nattribute float sizeGrowth;\nattribute vec3 initialColor;\nattribute float initialOpacity;\nattribute float initialAngle;\nattribute float angleVelocity;\nattribute float particleIndex;\n\n// \u5168\u5C40uniform\u53C2\u6570\nuniform float uTime;\n\n// \u4F20\u9012\u7ED9fragment shader\u7684\u53D8\u91CF\nvarying vec4 vColor;\nvarying float vAngle;\n\n// \u7B80\u5355\u566A\u58F0\u51FD\u6570\nfloat random(vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n}\n\n// HSL\u8F6CRGB\u51FD\u6570\nvec3 hsl2rgb(vec3 c) {\n    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);\n    return c.z + c.y * (rgb-0.5)*(1.0-abs(2.0*c.z-1.0));\n}\n\nvoid main() {\n    // \u8BA1\u7B97\u7C92\u5B50\u7684\u5B9E\u9645\u5E74\u9F84\uFF0C\u8003\u8651\u5FAA\u73AF\u91CD\u751F\n    float totalCycleTime = lifeTime;\n    float adjustedTime = uTime + birthTime;\n    float cycleTime = mod(adjustedTime, totalCycleTime);\n    float age = cycleTime;\n    float normalizedAge = clamp(age / lifeTime, 0.0, 1.0);\n    \n    // \u5982\u679C\u7C92\u5B50\u5E74\u9F84\u8D85\u8FC7\u751F\u547D\u5468\u671F\uFF0C\u8BA9\u5B83\u91CD\u65B0\u5F00\u59CB\n    if (age > lifeTime) {\n        age = 0.0;\n        normalizedAge = 0.0;\n    }\n    \n    // \u8BA1\u7B97\u5F53\u524D\u4F4D\u7F6E\uFF08\u7269\u7406\u6A21\u62DF\uFF09\n    vec3 currentVelocity = initialVelocity + acceleration * age;\n    \n    vec3 currentPosition = position + currentVelocity * age;\n    \n    // \u8BA1\u7B97\u5F53\u524D\u5927\u5C0F\uFF08\u968F\u65F6\u95F4\u53D8\u5316\uFF09\n    float currentSize = initialSize + sizeGrowth * normalizedAge;\n    \n    // \u8BA1\u7B97\u5F53\u524D\u89D2\u5EA6\n    vAngle = initialAngle + angleVelocity * age;\n    \n    // \u8BA1\u7B97\u5F53\u524D\u989C\u8272\u548C\u900F\u660E\u5EA6\uFF08\u751F\u547D\u5468\u671F\u6E10\u53D8\uFF09\n    vec3 currentColor = initialColor;\n    float currentOpacity = initialOpacity;\n    \n    // \u751F\u547D\u5468\u671F\u900F\u660E\u5EA6\u6E10\u53D8\uFF08\u51FA\u751F\u548C\u6B7B\u4EA1\u65F6\u6E10\u53D8\uFF09\n    if (normalizedAge < 0.1) {\n        currentOpacity *= normalizedAge / 0.1; // \u6DE1\u5165\n    } else if (normalizedAge > 0.8) {\n        currentOpacity *= (1.0 - normalizedAge) / 0.2; // \u6DE1\u51FA\n    }\n    \n    // \u5C06HSL\u989C\u8272\u8F6C\u6362\u4E3ARGB\n    vec3 rgbColor = hsl2rgb(currentColor);\n    vColor = vec4(rgbColor, currentOpacity);\n    \n    // \u8BA1\u7B97\u6700\u7EC8\u4F4D\u7F6E\u548C\u5927\u5C0F\n    vec4 mvPosition = modelViewMatrix * vec4(currentPosition, 1.0);\n    gl_PointSize = currentSize * (300.0 / length(mvPosition.xyz));\n    gl_Position = projectionMatrix * mvPosition;\n}\n";
+export { VERTEX_SHADER };

package/vfx/spotLight/fragment-shader.d.ts

@@ -0,0 +1,2 @@
+declare const FRAGMENT_SHADER = "\nuniform vec3 uLightColor;\nuniform vec3 uSpotPosition;\nuniform float uAttenuation;\nuniform float uAnglePower;\n\nvarying vec3 vNormal;\nvarying vec3 vWorldPosition;\nvarying float vNoise;\n\nvoid main() {\n  float intensity;\n  intensity\t= distance(vWorldPosition, uSpotPosition) / uAttenuation;\n  intensity\t= 1.0 - clamp(intensity, 0.1, 1.0);\n\n  vec3 normal = vec3(vNormal.x, vNormal.y, abs(vNormal.z));\n  float angleIntensity = pow( dot(normal, vec3(0.0, 0.0, 1.0)), uAnglePower * vNoise );\n  intensity\t= intensity * angleIntensity * vNoise;\n  gl_FragColor = vec4( uLightColor, intensity );\n}\n";
+export { FRAGMENT_SHADER };

package/vfx/spotLight/spotLight.d.ts

@@ -0,0 +1,15 @@
+import * as THREE from 'three';
+declare class SpotLight extends THREE.Group {
+    private uniforms;
+    needsRender: boolean;
+    private startTime?;
+    constructor(height?: number, radiusTop?: number, radiusBottom?: number);
+    setTime(time: number): void;
+    set attenuation(value: number);
+    get attenuation(): number;
+    set anglePower(value: number);
+    get anglePower(): number;
+    set color(value: THREE.Color);
+    get color(): THREE.Color;
+}
+export { SpotLight };

package/vfx/spotLight/vertex-shader.d.ts

@@ -0,0 +1,2 @@
+declare const VERTEX_SHADER = "\n\nuniform float uTime;\n\nvarying vec3 vNormal;\nvarying vec3 vWorldPosition;\nvarying float vNoise;\n\n\n//  Simplex 4D Noise\n//  by Ian McEwan, Ashima Arts\n//\nvec4 permute(vec4 x) {\n  return mod((x * 34.0 + 1.0) * x, 289.0);\n}\nfloat permute(float x) {\n  return floor( mod((x * 34.0 + 1.0) * x, 289.0) );\n}\nvec4 taylorInvSqrt(vec4 r) {\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\nfloat taylorInvSqrt(float r) {\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec4 grad4(float j, vec4 ip) {\n  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);\n  vec4 p,s;\n\n  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;\n  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);\n  s = vec4(lessThan(p, vec4(0.0)));\n  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;\n\n  return p;\n}\n\nfloat simplexNoise(vec4 v) {\n  const vec2  C = vec2( 0.138196601125010504,  // (5 - sqrt(5))/20  G4\n                        0.309016994374947451); // (sqrt(5) - 1)/4   F4\n  // First corner\n  vec4 i  = floor(v + dot(v, C.yyyy) );\n  vec4 x0 = v -   i + dot(i, C.xxxx);\n\n  // Other corners\n\n  // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)\n  vec4 i0;\n\n  vec3 isX = step( x0.yzw, x0.xxx );\n  vec3 isYZ = step( x0.zww, x0.yyz );\n\n  // i0.x = dot( isX, vec3( 1.0 ) );\n  i0.x = isX.x + isX.y + isX.z;\n  i0.yzw = 1.0 - isX;\n\n  // i0.y += dot( isYZ.xy, vec2( 1.0 ) );\n  i0.y += isYZ.x + isYZ.y;\n  i0.zw += 1.0 - isYZ.xy;\n\n  i0.z += isYZ.z;\n  i0.w += 1.0 - isYZ.z;\n\n  // i0 now contains the unique values 0,1,2,3 in each channel\n  vec4 i3 = clamp( i0, 0.0, 1.0 );\n  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );\n  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );\n\n  // x0 = x0 - 0.0 + 0.0 * C\n  vec4 x1 = x0 - i1 + 1.0 * C.xxxx;\n  vec4 x2 = x0 - i2 + 2.0 * C.xxxx;\n  vec4 x3 = x0 - i3 + 3.0 * C.xxxx;\n  vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;\n\n  // Permutations\n  i = mod(i, 289.0);\n  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);\n  vec4 j1 = permute( permute( permute( permute (\n             i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))\n           + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))\n           + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))\n           + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));\n\n  // Gradients\n  // ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)\n  // 7*7*6 = 294, which is close to the ring size 17*17 = 289.\n\n  vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;\n\n  vec4 p0 = grad4(j0,   ip);\n  vec4 p1 = grad4(j1.x, ip);\n  vec4 p2 = grad4(j1.y, ip);\n  vec4 p3 = grad4(j1.z, ip);\n  vec4 p4 = grad4(j1.w, ip);\n\n  // Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n  p4 *= taylorInvSqrt(dot(p4,p4));\n\n  // Mix contributions from the five corners\n  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);\n  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);\n  m0 = m0 * m0;\n  m1 = m1 * m1;\n  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))\n               + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;\n\n}\n\n\nfloat scale(float value, float fromMin, float fromMax, float toMin, float toMax) {\n  return toMin + (value - fromMin) * (toMax - toMin) / (fromMax - fromMin);\n}\n\n\nvoid main(){\n\n  vNormal = normalize( normalMatrix * normal );\n  vec4 worldPosition = modelMatrix * vec4( position, 1.0 );\n  vWorldPosition = worldPosition.xyz;\n  vNoise = simplexNoise(vec4(position - vec3(0.0, uTime * 0.4, 0.0), 0));\n  vNoise = scale(vNoise, -1.0, 1.0, 0.5, 1.0);\n\n  gl_Position\t= projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n";
+export { VERTEX_SHADER };

package/vue/context.d.ts

@@ -0,0 +1,7 @@
+import { InjectionKey } from "vue";
+import { Five } from "@realsee/five";
+declare let hasPropsWork: boolean;
+declare function setHasPropsWork(val: boolean): void;
+declare const injectionKeyFive: InjectionKey<Five>;
+declare function useFiveInject(): Five;
+export { injectionKeyFive, useFiveInject, setHasPropsWork, hasPropsWork };

package/vue/hooks/FiveCanvas.d.ts

@@ -0,0 +1,36 @@
+import { PropType } from "vue";
+/**
+ * Five 渲染区域组件
+ * @description Five 渲染区域组件，请在 FiveProvider 内使用
+ * @param width - 渲染区域的宽度
+ * @param height - 渲染区域的高度
+ * @returns Vue 元素
+ * @example
+ * ```typescript
+ * <FiveProvider :initialWork="work">
+ *  <FiveCanvas width="512" height="512"/>
+ * </FiveProvider>
+ * ```
+ */
+declare const FiveCanvas: import("vue").DefineComponent<{
+    width: {
+        type: PropType<number>;
+        required: true;
+    };
+    height: {
+        type: PropType<number>;
+        required: true;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: PropType<number>;
+        required: true;
+    };
+    height: {
+        type: PropType<number>;
+        required: true;
+    };
+}>>, {}, {}>;
+export { FiveCanvas };

package/vue/hooks/FiveProvider.d.ts

@@ -0,0 +1,35 @@
+import { Five, Work, Works, State, FiveInitArgs } from "@realsee/five";
+import { DefineComponent, PropType } from "vue";
+type FiveProviderComponent = DefineComponent<{
+    works: PropType<Work[]>;
+    initialWorks: PropType<Work[] | Promise<Work[]>>;
+    initialState: PropType<"inherit" | "initial" | Partial<Omit<State, "offset">>>;
+    initialUserAction: BooleanConstructor;
+    onWorksChange: PropType<(work: Works) => void>;
+    onStateChange: PropType<(state: State, userAction: boolean) => void>;
+    onCurrentStateChange: PropType<(state: State, userAction: boolean) => void>;
+    onError: PropType<(error: Error) => void>;
+    fiveInitArgs: {
+        type: PropType<Omit<FiveInitArgs, "renderer" | "scissor">>;
+        default: () => {};
+    };
+    style: ObjectConstructor;
+}, {
+    five: Readonly<Five>;
+}>;
+/**
+ * Five 实例化Five 组件
+ *
+ * 在 FiveProvider 下，可以使用 FiveCanvas 来创建渲染画布。
+ * 以及使用 useFiveState useFiveEventCallback等 Five Vue Composition API 来对 FiveProvider 进行操作
+ * @description Five 创建Five实例的组件
+ * @param FiveProviderComponent - Five 参数
+ * @example
+ * ```typescript
+ * <FiveProvider :initialWork="work">
+ *  <FiveCanvas width="512" height="512"/>
+ * </FiveProvider>
+ * ```
+ */
+declare const FiveProvider: FiveProviderComponent;
+export { FiveProvider, FiveProviderComponent };

package/vue/hooks/unsafe__useFiveInject.d.ts

@@ -0,0 +1,9 @@
+import { Five } from "@realsee/five";
+/**
+ * Five Vue Hooks: 获取 five 实例
+ * @description 不到万不得已，并不推荐直接使用。
+ * @deprecated 不到万不得已，并不推荐直接使用。
+ * @returns five 实例
+ */
+declare function unsafe__useFiveInject(): Five;
+export { unsafe__useFiveInject };