@pmndrs/viverse 0.1.2

package/dist/input/pointer-capture.d.ts

@@ -0,0 +1,14 @@
+import { Input, InputField } from './index.js';
+/**
+ * @requires to manually execute `domElement.setPointerCapture(pointerId)` on pointerdown
+ */
+export declare class PointerCaptureInput implements Input {
+    private readonly domElement;
+    private readonly abortController;
+    private deltaZoom;
+    private deltaYaw;
+    private deltaPitch;
+    constructor(domElement: HTMLElement);
+    get<T>(field: InputField<T>): T | undefined;
+    destroy(): void;
+}

package/dist/input/pointer-capture.js

@@ -0,0 +1,59 @@
+import { DeltaPitchField, DeltaYawField, DeltaZoomField } from './index.js';
+/**
+ * @requires to manually execute `domElement.setPointerCapture(pointerId)` on pointerdown
+ */
+export class PointerCaptureInput {
+    domElement;
+    abortController = new AbortController();
+    deltaZoom = 0;
+    deltaYaw = 0;
+    deltaPitch = 0;
+    constructor(domElement) {
+        this.domElement = domElement;
+        domElement.addEventListener('pointerdown', (event) => this.domElement.setPointerCapture(event.pointerId), {
+            signal: this.abortController.signal,
+        });
+        domElement.addEventListener('pointermove', (event) => {
+            if (!this.domElement.hasPointerCapture(event.pointerId)) {
+                return;
+            }
+            this.deltaYaw -= (0.4 * event.movementX) / window.innerHeight;
+            this.deltaPitch -= (0.4 * event.movementY) / window.innerHeight;
+        }, {
+            signal: this.abortController.signal,
+        });
+        domElement.addEventListener('pointerup', (event) => this.domElement.releasePointerCapture(event.pointerId), {
+            signal: this.abortController.signal,
+        });
+        domElement.addEventListener('pointercancel', (event) => this.domElement.releasePointerCapture(event.pointerId), {
+            signal: this.abortController.signal,
+        });
+        domElement.addEventListener('wheel', (event) => {
+            event.preventDefault();
+            this.deltaZoom += event.deltaY * 0.0001;
+        }, {
+            signal: this.abortController.signal,
+        });
+    }
+    get(field) {
+        let result;
+        switch (field) {
+            case DeltaPitchField:
+                result = this.deltaPitch;
+                this.deltaPitch = 0;
+                break;
+            case DeltaYawField:
+                result = this.deltaYaw;
+                this.deltaYaw = 0;
+                break;
+            case DeltaZoomField:
+                result = this.deltaZoom;
+                this.deltaZoom = 0;
+                break;
+        }
+        return result;
+    }
+    destroy() {
+        this.abortController.abort();
+    }
+}

package/dist/input/pointer-lock.d.ts

@@ -0,0 +1,13 @@
+import { Input, InputField } from './index.js';
+/**
+ * @requires to manually execute `domElement.requestPointerLock()`
+ */
+export declare class PointerLockInput implements Input {
+    private readonly abortController;
+    private deltaZoom;
+    private deltaYaw;
+    private deltaPitch;
+    constructor(domElement: HTMLElement);
+    get<T>(field: InputField<T>): T | undefined;
+    destroy(): void;
+}

package/dist/input/pointer-lock.js

@@ -0,0 +1,51 @@
+import { DeltaPitchField, DeltaYawField, DeltaZoomField } from './index.js';
+/**
+ * @requires to manually execute `domElement.requestPointerLock()`
+ */
+export class PointerLockInput {
+    abortController = new AbortController();
+    deltaZoom = 0;
+    deltaYaw = 0;
+    deltaPitch = 0;
+    constructor(domElement) {
+        domElement.addEventListener('pointermove', (event) => {
+            if (document.pointerLockElement != domElement) {
+                return;
+            }
+            this.deltaYaw -= (0.4 * event.movementX) / window.innerHeight;
+            this.deltaPitch -= (0.4 * event.movementY) / window.innerHeight;
+        }, {
+            signal: this.abortController.signal,
+        });
+        domElement.addEventListener('wheel', (event) => {
+            if (document.pointerLockElement != domElement) {
+                return;
+            }
+            this.deltaZoom += event.deltaY * 0.0001;
+            event.preventDefault();
+        }, {
+            signal: this.abortController.signal,
+        });
+    }
+    get(field) {
+        let result;
+        switch (field) {
+            case DeltaPitchField:
+                result = this.deltaPitch;
+                this.deltaPitch = 0;
+                break;
+            case DeltaYawField:
+                result = this.deltaYaw;
+                this.deltaYaw = 0;
+                break;
+            case DeltaZoomField:
+                result = this.deltaZoom;
+                this.deltaZoom = 0;
+                break;
+        }
+        return result;
+    }
+    destroy() {
+        this.abortController.abort();
+    }
+}

package/dist/material.d.ts

@@ -0,0 +1,6 @@
+import { MeshPhongMaterial, Vector2 } from 'three';
+export declare class PrototypeMaterial extends MeshPhongMaterial {
+    readonly repeat: Vector2;
+    constructor();
+    private init;
+}

package/dist/material.js

@@ -0,0 +1,18 @@
+import { MeshPhongMaterial, RepeatWrapping, SRGBColorSpace, TextureLoader, Vector2 } from 'three';
+const loader = new TextureLoader();
+export class PrototypeMaterial extends MeshPhongMaterial {
+    repeat = new Vector2(2, 2);
+    constructor() {
+        super({ toneMapped: false, shininess: 0 });
+        this.init().catch(console.error);
+    }
+    async init() {
+        const texture = await loader.loadAsync((await import('./assets/prototype-texture.js')).url);
+        this.map = texture;
+        texture.colorSpace = SRGBColorSpace;
+        this.map.wrapS = RepeatWrapping;
+        this.map.wrapT = RepeatWrapping;
+        this.needsUpdate = true;
+        this.map.repeat = this.repeat;
+    }
+}

package/dist/model/gltf.d.ts

@@ -0,0 +1,8 @@
+import { Object3D, Object3DEventMap } from 'three';
+import { GLTF, GLTFLoader } from 'three/examples/jsm/Addons.js';
+export declare const gltfLoader: GLTFLoader;
+export declare function loadGltfCharacterModel(url: string): Promise<GLTF & {
+    scene: Object3D<Object3DEventMap & {
+        dispose: {};
+    }>;
+}>;

package/dist/model/gltf.js

@@ -0,0 +1,7 @@
+import { GLTFLoader } from 'three/examples/jsm/Addons.js';
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+export const gltfLoader = new GLTFLoader();
+gltfLoader.setMeshoptDecoder(MeshoptDecoder);
+export async function loadGltfCharacterModel(url) {
+    return (await gltfLoader.loadAsync(url));
+}

package/dist/model/index.d.ts

@@ -0,0 +1,32 @@
+import { Quaternion } from 'three';
+export { VRMHumanBoneName } from '@pixiv/three-vrm';
+export * from './vrm.js';
+export type CharacterModelOptions = {
+    readonly type?: 'vrm' | 'gltf';
+    readonly url?: string;
+    /**
+     * allows to apply an rotation offset when placing objects as children of the character's bones
+     * @default undefined
+     */
+    readonly boneRotationOffset?: Quaternion;
+    /**
+     * @default true
+     */
+    readonly castShadow?: boolean;
+    /**
+     * @default true
+     */
+    readonly receiveShadow?: boolean;
+} | boolean;
+export declare function clearCharacterModelCache(options?: CharacterModelOptions): void;
+export declare function loadCharacterModel(options?: CharacterModelOptions): Promise<((import("@pixiv/three-vrm").VRM & {
+    scene: import("three").Object3D<import("three").Object3DEventMap & {
+        dispose: {};
+    }>;
+}) | (import("three/examples/jsm/Addons.js").GLTF & {
+    scene: import("three").Object3D<import("three").Object3DEventMap & {
+        dispose: {};
+    }>;
+})) & {
+    boneRotationOffset?: Quaternion;
+}> | undefined;

package/dist/model/index.js

@@ -0,0 +1,57 @@
+import { Euler, Quaternion } from 'three';
+import { loadVrmCharacterModel } from './vrm.js';
+import { cached, clearCache } from '../utils.js';
+import { loadGltfCharacterModel } from './gltf.js';
+export { VRMHumanBoneName } from '@pixiv/three-vrm';
+export * from './vrm.js';
+async function uncachedLoadCharacterModel(type, url, boneRotationOffset, castShadow = true, receiveShadow = true) {
+    let result;
+    if (type == null || url == null) {
+        //prepare loading the default model
+        type = 'gltf';
+        url = (await import('../assets/mannequin.js')).url;
+        boneRotationOffset = new Quaternion().setFromEuler(new Euler(Math.PI, 0, Math.PI / 2, 'ZYX'));
+    }
+    switch (type) {
+        case 'vrm':
+            result = await loadVrmCharacterModel(url);
+            break;
+        case 'gltf':
+            result = await loadGltfCharacterModel(url);
+            break;
+    }
+    result.boneRotationOffset = boneRotationOffset;
+    result.scene.traverse((obj) => {
+        obj.frustumCulled = false;
+        if (castShadow) {
+            obj.castShadow = true;
+        }
+        if (receiveShadow) {
+            obj.receiveShadow = true;
+        }
+    });
+    return result;
+}
+function getCharacterModelDependencies(options = true) {
+    if (options === false) {
+        return undefined;
+    }
+    if (options === true) {
+        return [undefined, undefined, undefined, undefined, undefined];
+    }
+    return [options.type, options.url, options.boneRotationOffset, options.castShadow, options.receiveShadow];
+}
+export function clearCharacterModelCache(options) {
+    const dependencies = getCharacterModelDependencies(options);
+    if (dependencies == null) {
+        return;
+    }
+    clearCache(uncachedLoadCharacterModel, dependencies);
+}
+export function loadCharacterModel(options) {
+    const dependencies = getCharacterModelDependencies(options);
+    if (dependencies == null) {
+        return undefined;
+    }
+    return cached(uncachedLoadCharacterModel, dependencies);
+}

package/dist/model/vrm.d.ts

@@ -0,0 +1,9 @@
+import { VRM } from '@pixiv/three-vrm';
+import { Object3D, Object3DEventMap } from 'three';
+import { GLTFLoader } from 'three/examples/jsm/Addons.js';
+export declare const vrmaLoader: GLTFLoader;
+export declare function loadVrmCharacterModel(url: string): Promise<VRM & {
+    scene: Object3D<Object3DEventMap & {
+        dispose: {};
+    }>;
+}>;

package/dist/model/vrm.js

@@ -0,0 +1,19 @@
+import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
+import { VRMAnimationLoaderPlugin } from '@pixiv/three-vrm-animation';
+import { GLTFLoader } from 'three/examples/jsm/Addons.js';
+export const vrmaLoader = new GLTFLoader();
+vrmaLoader.register((parser) => new VRMLoaderPlugin(parser, { autoUpdateHumanBones: true }));
+vrmaLoader.register((parser) => new VRMAnimationLoaderPlugin(parser));
+export async function loadVrmCharacterModel(url) {
+    const vrm = (await vrmaLoader.loadAsync(url)).userData.vrm;
+    // fixes a bug where 2 VRMHumanoidRigs are loaded
+    vrm.scene.children
+        .filter((child) => child.name === 'VRMHumanoidRig')
+        .slice(0, -1)
+        .forEach((child) => child.parent?.remove(child));
+    VRMUtils.removeUnnecessaryVertices(vrm.scene);
+    VRMUtils.combineSkeletons(vrm.scene);
+    // Disable frustum culling
+    vrm.scene.traverse((obj) => void (obj.frustumCulled = false));
+    return vrm;
+}

package/dist/physics/index.d.ts

@@ -0,0 +1,50 @@
+import { Object3D, Vector3 } from 'three';
+import { BvhPhysicsWorld } from './world.js';
+export type BvhCharacterPhysicsOptions = {
+    /**
+     * @default 60
+     */
+    updatesPerSecond?: number;
+    /**
+     * @default 0.4
+     */
+    capsuleRadius?: number;
+    /**
+     * @default 1.7
+     */
+    capsuleHeight?: number;
+    /**
+     * Gravity acceleration in m/s²
+     * @default -20
+     */
+    gravity?: number;
+    /**
+     * Linear damping coefficient (air resistance)
+     * @default 0.1
+     */
+    linearDamping?: number;
+    /**
+     * @default 0.25;
+     */
+    slopeGroundingThreshold?: number;
+} | boolean;
+/**
+ * assumes the target object origin is at its bottom
+ */
+export declare class BvhCharacterPhysics {
+    private readonly character;
+    private readonly world;
+    private destroyed;
+    private readonly stateVelocity;
+    readonly inputVelocity: Vector3;
+    isGrounded: boolean;
+    constructor(character: Object3D, world: BvhPhysicsWorld);
+    applyVelocity(velocity: Vector3): void;
+    /**
+     * @param delta in seconds
+     */
+    update(fullDelta: number, options?: BvhCharacterPhysicsOptions): void;
+    destroy(): void;
+    shapecastCapsule(position: Vector3, options: Exclude<BvhCharacterPhysicsOptions, boolean>): void;
+}
+export * from './world.js';

package/dist/physics/index.js

@@ -0,0 +1,127 @@
+import { Box3, Line3, Matrix4, Vector3 } from 'three';
+//for this is a kinematic character controller
+//helper variables
+const aabbox = new Box3();
+const segment = new Line3();
+const triPoint = new Vector3();
+const capsulePoint = new Vector3();
+const collisionFreePosition = new Vector3();
+const position = new Vector3();
+const collisionDelta = new Vector3();
+const invertedParentMatrix = new Matrix4();
+/**
+ * assumes the target object origin is at its bottom
+ */
+export class BvhCharacterPhysics {
+    character;
+    world;
+    destroyed = false;
+    stateVelocity = new Vector3();
+    inputVelocity = new Vector3();
+    isGrounded = false;
+    constructor(character, world) {
+        this.character = character;
+        this.world = world;
+    }
+    applyVelocity(velocity) {
+        this.stateVelocity.add(velocity);
+    }
+    /**
+     * @param delta in seconds
+     */
+    update(fullDelta, options = true) {
+        if (options === false) {
+            return;
+        }
+        if (options === true) {
+            options = {};
+        }
+        if (this.destroyed) {
+            return;
+        }
+        //at max catch up to 1 second of physics in one update call (running at less then 1fps is unplayable anyways)
+        fullDelta = Math.min(1, fullDelta);
+        const updatesPerSecond = options.updatesPerSecond ?? 60;
+        const physicsDelta = 1 / updatesPerSecond;
+        //strong simplified fixed physics update: we compute a frame for the fractional
+        while (fullDelta > 0) {
+            const partialDelta = Math.min(fullDelta, physicsDelta);
+            fullDelta -= physicsDelta;
+            //compute global position and inverted parent matrix so that we can compute the position in global space and re-assign it to the local chracter space
+            if (this.character.parent != null) {
+                this.character.parent.updateWorldMatrix(true, false);
+                position.copy(this.character.position).applyMatrix4(this.character.parent.matrixWorld);
+                invertedParentMatrix.copy(this.character.parent.matrixWorld).invert();
+            }
+            else {
+                invertedParentMatrix.identity();
+            }
+            //compute new position based on the state velocity, the input velocity, and the delta
+            const yMovement = this.stateVelocity.y * partialDelta;
+            position.addScaledVector(this.stateVelocity, partialDelta);
+            position.addScaledVector(this.inputVelocity, partialDelta);
+            //compute collision and write the corrected position to the target
+            //TODO: rework - when are we on the ground and how to correct the shapecast
+            this.shapecastCapsule(collisionFreePosition.copy(position), options);
+            this.character.position.copy(collisionFreePosition).applyMatrix4(invertedParentMatrix);
+            //compute new velocity
+            //  apply gravity
+            this.stateVelocity.y += (options.gravity ?? -20) * partialDelta;
+            //  apply linear damping (air resistance)
+            const dampingFactor = 1.0 / (1.0 + partialDelta * (options.linearDamping ?? 0.1));
+            this.stateVelocity.multiplyScalar(dampingFactor);
+            //  apply collision to velocity
+            collisionDelta.copy(collisionFreePosition).sub(position);
+            this.isGrounded = collisionDelta.y >= Math.abs(yMovement * (options.slopeGroundingThreshold ?? 0.6));
+            if (this.isGrounded) {
+                this.stateVelocity.set(0, (options.gravity ?? -20) * partialDelta, 0);
+            }
+            else if (collisionDelta.length() > 1e-5) {
+                collisionDelta.normalize();
+                this.stateVelocity.addScaledVector(collisionDelta, -collisionDelta.dot(this.stateVelocity));
+            }
+        }
+    }
+    destroy() {
+        this.destroyed = true;
+    }
+    shapecastCapsule(position, options) {
+        const radius = options.capsuleRadius ?? 0.4;
+        const height = options.capsuleHeight ?? 1.7;
+        segment.start.copy(position);
+        segment.start.y += radius;
+        segment.end.copy(position);
+        segment.end.y += height - radius;
+        aabbox.makeEmpty();
+        aabbox.expandByPoint(segment.start);
+        aabbox.expandByPoint(segment.end);
+        aabbox.min.addScalar(-radius);
+        aabbox.max.addScalar(radius);
+        for (const bvh of this.world.getBodies()) {
+            bvh.shapecast({
+                intersectsBounds: (bounds) => bounds.intersectsBox(aabbox),
+                intersectsTriangle: (tri) => {
+                    // Use your existing triangle vs segment closestPointToSegment
+                    const distance = tri.closestPointToSegment(segment, triPoint, capsulePoint);
+                    if (distance === 0) {
+                        const scaledDirection = capsulePoint.sub(capsulePoint.distanceTo(segment.start) < capsulePoint.distanceTo(segment.end)
+                            ? segment.start
+                            : segment.end);
+                        scaledDirection.y += radius;
+                        segment.start.add(scaledDirection);
+                        segment.end.add(scaledDirection);
+                    }
+                    else if (distance < radius) {
+                        const depthInsideCapsule = radius - distance;
+                        const direction = capsulePoint.sub(triPoint).divideScalar(distance);
+                        segment.start.addScaledVector(direction, depthInsideCapsule);
+                        segment.end.addScaledVector(direction, depthInsideCapsule);
+                    }
+                },
+            });
+        }
+        position.copy(segment.start);
+        position.y -= radius;
+    }
+}
+export * from './world.js';

package/dist/physics/world.d.ts

@@ -0,0 +1,9 @@
+import { Object3D, Ray } from 'three';
+import { MeshBVH } from 'three-mesh-bvh';
+export declare class BvhPhysicsWorld {
+    private readonly map;
+    getBodies(): Iterable<MeshBVH>;
+    addFixedBody(object: Object3D): void;
+    removeFixedBody(object: Object3D): void;
+    raycast(ray: Ray, far: number): number | undefined;
+}

package/dist/physics/world.js

@@ -0,0 +1,27 @@
+import { computeBoundsTree, StaticGeometryGenerator } from 'three-mesh-bvh';
+export class BvhPhysicsWorld {
+    map = new Map();
+    getBodies() {
+        return this.map.values();
+    }
+    addFixedBody(object) {
+        object.updateWorldMatrix(true, true);
+        const generator = new StaticGeometryGenerator(object);
+        this.map.set(object, computeBoundsTree.apply(generator.generate()));
+    }
+    removeFixedBody(object) {
+        this.map.delete(object);
+    }
+    raycast(ray, far) {
+        let result;
+        for (const body of this.getBodies()) {
+            for (const intersection of body.raycast(ray, undefined, 0, far)) {
+                if (result != null && intersection.distance >= result) {
+                    continue;
+                }
+                result = intersection.distance;
+            }
+        }
+        return result;
+    }
+}

package/dist/simple-character.d.ts

@@ -0,0 +1,105 @@
+import { VRM } from '@pixiv/three-vrm';
+import { AnimationAction, AnimationClip, AnimationMixer, Group, Object3D, Object3DEventMap, Quaternion } from 'three';
+import { simpleCharacterAnimationNames, ModelAnimationOptions } from './animation/index.js';
+import { SimpleCharacterCameraBehavior, SimpleCharacterCameraBehaviorOptions } from './camera.js';
+import { Input, InputSystem } from './input/index.js';
+import { CharacterModelOptions, loadCharacterModel } from './model/index.js';
+import { BvhCharacterPhysicsOptions, BvhCharacterPhysics, BvhPhysicsWorld } from './physics/index.js';
+export type SimpleCharacterMovementOptions = {
+    /**
+     * @default true
+     */
+    jump?: {
+        /**
+         * @default 0.2
+         */
+        delay?: number;
+        /**
+         * @default 0.1
+         */
+        bufferTime?: number;
+        /**
+         * @default 8
+         */
+        speed?: number;
+    } | boolean;
+    /**
+     * @default true
+     */
+    walk?: {
+        speed?: number;
+    } | boolean;
+    /**
+     * @default true
+     */
+    run?: {
+        speed?: number;
+    } | boolean;
+};
+export type SimpleCharacterAnimationOptions = {
+    readonly walk?: ModelAnimationOptions;
+    readonly run?: ModelAnimationOptions;
+    readonly idle?: ModelAnimationOptions;
+    readonly jumpUp?: ModelAnimationOptions;
+    readonly jumpLoop?: ModelAnimationOptions;
+    readonly jumpDown?: ModelAnimationOptions;
+    readonly jumpForward?: ModelAnimationOptions;
+    /**
+     * @default "movement"
+     */
+    yawRotationBasdOn?: 'camera' | 'movement';
+    /**
+     * @default 10
+     */
+    maxYawRotationSpeed?: number;
+    /**
+     * @default 0.3
+     */
+    crossFadeDuration?: number;
+};
+export type SimpleCharacterOptions = {
+    /**
+     * @default [LocomotionKeyboardInput,PointerCaptureInput]
+     */
+    readonly input?: ReadonlyArray<Input | {
+        new (domElement: HTMLElement): Input;
+    }> | InputSystem;
+    movement?: SimpleCharacterMovementOptions;
+    readonly model?: CharacterModelOptions;
+    physics?: BvhCharacterPhysicsOptions;
+    cameraBehavior?: SimpleCharacterCameraBehaviorOptions;
+    readonly animation?: SimpleCharacterAnimationOptions;
+};
+export declare function preloadSimpleCharacterAssets(options: Pick<SimpleCharacterOptions, 'animation' | 'model'>): Promise<{
+    model?: undefined;
+    animations?: undefined;
+} | {
+    model: ((VRM & {
+        scene: Object3D<Object3DEventMap & {
+            dispose: {};
+        }>;
+    }) | (import("three/examples/jsm/Addons.js").GLTF & {
+        scene: Object3D<Object3DEventMap & {
+            dispose: {};
+        }>;
+    })) & {
+        boneRotationOffset?: Quaternion;
+    };
+    animations: Record<"walk" | "run" | "jumpForward" | "idle" | "jumpUp" | "jumpLoop" | "jumpDown", AnimationClip>;
+}>;
+export declare class SimpleCharacter extends Group<Object3DEventMap & {
+    loaded: {};
+}> {
+    readonly options: SimpleCharacterOptions;
+    readonly cameraBehavior: SimpleCharacterCameraBehavior;
+    readonly physics: BvhCharacterPhysics;
+    readonly mixer: AnimationMixer;
+    inputSystem: InputSystem;
+    actions?: Record<(typeof simpleCharacterAnimationNames)[number], AnimationAction> | undefined;
+    model?: Awaited<Exclude<ReturnType<typeof loadCharacterModel>, undefined>>;
+    private updateTimeline?;
+    constructor(camera: Object3D, world: BvhPhysicsWorld, domElement: HTMLElement, options?: SimpleCharacterOptions);
+    private init;
+    update(delta: number): void;
+    dispose(): void;
+}