@doki-land/live2d 0.0.9 → 0.0.11

package/src/index.ts

@@ -1,200 +1,68 @@
-import '../lib/cubism2.min.js';
-import '../lib/cubism5.min.js';
-import * as PIXI from 'pixi.js';
-
-import { Ticker, TickerPlugin } from '@pixi/ticker';
-import {
-    Live2DModel,
-    MotionManager,
-    SoundManager
-} from 'pixi-live2d-display-lipsyncpatch';
-import { Application,  } from 'pixi.js';
-import './icons/style.css';
-import { Live2dOptions } from '@/types/index.js';
-
-export {MotionManager, SoundManager, Live2DModel, PIXI};
-
-/**
- * 创建Live2D模型
- * @param options 模型配置选项
- * @returns Promise<Live2DModel> 加载完成的Live2D模型实例
- */
-export async function createLive2D(options: Live2dOptions): Promise<Live2DModel> {
-    const {
-        element_id = 'live2d-canvas',
-        models,
-        width = 300,
-        height = 300,
-        auto_fit = true,
-        auto_motion = true,
-        mouse_tracking = true
-    } = options;
-    // 创建画布
-    let element = findOrCreateCanvas(element_id, options)
-    // 初始化PIXI应用
-    const app = new Application({
-        view: element,
-        width: width,
-        height: height,
-        // resolution: 1,
-        backgroundAlpha: 0,
-        autoDensity: true,
-        antialias: true,
-        eventMode: 'static',
-        eventFeatures: {
-            move: true,
-            globalMove: true,
-            click: true,
-            wheel: true
-        }
-    });
-
-    // 加载模型
-    const model = await Live2DModel.from(models[0].model_url,  {
-        ticker: Ticker.system,
-    });
-    // 添加模型到舞台
-    app.stage.addChild(model);
-
-    // 自动适应大小
-    if (auto_fit) {
-        // 修复auto_fit功能，确保模型不被截断且保持正确比例
-        const scale = Math.min(width / model.width, height / model.height);
-        model.scale.set(scale);
-
-        // 居中显示，确保模型完全可见
-        model.x = (width - model.width * scale) / 2;
-        model.y = (height - model.height * scale) / 2;
-    }
-
-    // 启用鼠标跟踪
-    if (mouse_tracking) {
-        enableMouseTracking(model, app.view);
-    }
-
-    // 自动开始动画
-    if (auto_motion) {
-        await startIdleAnimation(model);
-    }
-    
-    // 创建右侧图标栏
-    // createIconPanel(model, element);
-
-    return model;
-}
-
-function findOrCreateCanvas(id: string, options: Live2dOptions): HTMLCanvasElement {
-    let canvas = document.getElementById(id) as HTMLCanvasElement;
-    if (!canvas) {
-        canvas = document.createElement('canvas');
-        canvas.id = id;
-        document.body.appendChild(canvas);
-        canvas.style.display = 'none';
-        canvas.style.position = 'fixed';
-        // 设置画布样式
-        canvas.style.display = 'block';
-        canvas.style.position = 'absolute';
-        canvas.style.bottom = `${options.spacing_y || 0}px`;
-        canvas.style[options.position === 'left' ? 'left' : 'right'] = `${options.spacing_x || 0}px`;
-        canvas.style.zIndex = '9999';
-    }
-    return canvas;
-}
-
-
-/**
- * 启用鼠标跟踪功能
- * @param model Live2D模型实例
- * @param canvas 画布元素
- */
-function enableMouseTracking(model: Live2DModel, canvas: any) {
-    // 跟踪鼠标移动
-    document.addEventListener('mousemove', (event) => {
-        const rect = canvas.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-
-        // 计算鼠标位置相对于画布中心的偏移
-        const mouseX = (event.clientX - centerX) / rect.width;
-        // 修正Y轴方向，使用负值来反转方向
-        const mouseY = -(event.clientY - centerY) / rect.height;
-
-        // 更新模型的视线方向
-        if (model.internalModel) {
-            model.internalModel.focusController?.focus(mouseX, mouseY);
-        }
-    });
-    
-    // 添加点击模型触发动作的交互
-    canvas.addEventListener('click', () => {
-        // 尝试播放tap_body动作，如果没有则尝试其他可用动作
-        try {
-            const motions = model.internalModel?.motionManager.definitions;
-            if (motions) {
-                if (motions.tap_body) {
-                    model.motion('tap_body');
-                } else if (motions.tap) {
-                    model.motion('tap');
-                } else {
-                    // 使用第一个可用的动作组
-                    const firstMotionGroup = Object.keys(motions)[0];
-                    if (firstMotionGroup) {
-                        model.motion(firstMotionGroup);
-                    }
-                }
-            }
-        } catch (error) {
-            console.warn('Failed to play tap animation:', error);
-        }
-    });
-}
-
-/**
- * 开始空闲动画
- * @param model Live2D模型实例
- */
-async function startIdleAnimation(model: Live2DModel) {
-    // 尝试播放内置的动作组
-    try {
-        // 获取模型支持的动作组
-        const motions = model.internalModel?.motionManager.definitions;
-
-        if (motions) {
-            // 优先使用Idle动作组
-            if (motions.idle) {
-                await model.motion('idle');
-            } else if (motions.tap_body) {
-                // 如果没有idle动作，尝试使用 tap_body 动作
-                await model.motion('tap_body');
-            } else {
-                // 使用第一个可用的动作组
-                const firstMotionGroup = Object.keys(motions)[0];
-                if (firstMotionGroup) {
-                    await model.motion(firstMotionGroup);
-                }
-            }
-        }
-    } catch (error) {
-        console.warn('Failed to start idle animation:', error);
-    }
-}
-
 /**
- * 加载Cubism SDK
- * 在使用Live2D功能前必须调用此函数
- * @param cubism2 可选的CubismCore对象，如果在非浏览器环境中使用，需要传入
- * @param cubism5
+ * `@doki-land/live2d` — public facade.
+ *
+ * ```ts
+ * import { createLive2D } from "@doki-land/live2d";
+ * ```
  */
-export async function initializeLive2D() {
-    // 首先初始化 Cubism2 SDK
-    // console.log('sdk2:', Cubism2);
-    // console.log('sdk5:', Cubism5);
-    // @ts-ignore
-    // window.Live2D = cubism2 || Cubism2;
-    // 然后初始化 Cubism5 SDK
-    // @ts-ignore
-    // window.Live2DCubismCore = cubism5 || Cubism5().Live2DCubismCore;
 
-    // 注册 InteractionManager 以支持 Live2D 模型的自动交互
-    // PIXI.extensions.add(InteractionManager);
-}
+export type {
+    AssetResolver,
+    FrameProfile,
+    FrameSnapshot,
+    InternalModel,
+    Live2DSession,
+    LoadProgress,
+    LoadProgressStage,
+    ModelFormat,
+    ModelInstance,
+    ModelProgram,
+    ModelSettings,
+    ModelSource,
+    SessionPhase,
+    SessionState,
+} from "@doki-land/live2d-core";
+export { EventEmitter } from "@doki-land/live2d-core";
+export {
+    DEFAULT_NPM_CDN,
+    resolveModelSourceUrl,
+    resolveNpmSpecifier,
+} from "@doki-land/live2d-loader";
+
+export {
+    createCanvas2DRenderer,
+    createMoc2Backend,
+    createMoc3Backend,
+    createQuadProgram,
+    createRenderer,
+    createWebGl2Renderer,
+    createWebGpuRenderer,
+    decodeMoc3,
+    evaluateFrame,
+    fingerprintSnapshot,
+    type ModelBackend,
+    type ParameterBinding,
+    parseCpuProgram,
+    type Renderer,
+    type RendererKind,
+    serializeCpuProgram,
+} from "@doki-land/live2d-renderer";
+export {
+    type CreateLive2DOptions,
+    createLive2D,
+    type Live2DRuntime,
+    MotionPriority,
+    type PlayMotionOptions,
+} from "./create-live2d.js";
+export { focusParameterUpdates } from "./focus.js";
+export {
+    blendMotionLayers,
+    evaluateCurve,
+    evaluateMotion3,
+    type Motion3Clip,
+    type MotionApplySample,
+    MotionPlayer,
+    parseMotion3,
+} from "./motion/index.js";
+
+export const LIVE2D_VERSION = "0.0.0" as const;

package/src/load-textures.ts

@@ -0,0 +1,85 @@
+/**
+ * Fetch model texture images via AssetResolver → TextureData for draw passes.
+ */
+
+import type { AssetResolver } from "@doki-land/live2d-core";
+import type { TextureData } from "@doki-land/live2d-renderer";
+
+export interface LoadTexturesOptions {
+    onProgress?: (update: {
+        index: number;
+        total: number;
+        key: string;
+        bytesLoaded: number;
+        bytesTotal: number | null;
+    }) => void;
+}
+
+function guessMime(path: string): string {
+    const lower = path.toLowerCase();
+    if (lower.endsWith(".jpg") || lower.endsWith(".jpeg")) return "image/jpeg";
+    if (lower.endsWith(".webp")) return "image/webp";
+    if (lower.endsWith(".gif")) return "image/gif";
+    return "image/png";
+}
+
+async function bytesToImageBitmap(
+    bytes: ArrayBuffer,
+    path: string,
+): Promise<ImageBitmap> {
+    if (typeof createImageBitmap !== "function") {
+        throw new Error(
+            "@doki-land/live2d: createImageBitmap is not available in this environment",
+        );
+    }
+    const blob = new Blob([new Uint8Array(bytes)], {
+        type: guessMime(path),
+    });
+    return createImageBitmap(blob);
+}
+
+/** Load texture paths from a resolver into GPU-uploadable TextureData. */
+export async function loadTextureData(
+    resolver: AssetResolver,
+    paths: readonly string[],
+    options: LoadTexturesOptions = {},
+): Promise<TextureData[]> {
+    const out: TextureData[] = [];
+    const total = paths.length;
+    for (let i = 0; i < paths.length; i++) {
+        const key = paths[i]!;
+        options.onProgress?.({
+            index: i,
+            total,
+            key,
+            bytesLoaded: 0,
+            bytesTotal: null,
+        });
+        const bytes = await resolver.fetchBytes(key);
+        options.onProgress?.({
+            index: i,
+            total,
+            key,
+            bytesLoaded: bytes.byteLength,
+            bytesTotal: bytes.byteLength,
+        });
+        const image = await bytesToImageBitmap(bytes, key);
+        out.push({
+            index: i,
+            image,
+            width: image.width,
+            height: image.height,
+        });
+    }
+    return out;
+}
+
+/** Close ImageBitmaps previously passed to setTextures. */
+export function releaseTextureData(textures: readonly TextureData[]): void {
+    for (const t of textures) {
+        const img = t.image;
+        if (typeof ImageBitmap !== "undefined" && img instanceof ImageBitmap) {
+            img.close();
+        }
+    }
+}

package/src/motion/evaluate-curve.ts

@@ -0,0 +1,119 @@
+import type { Motion3Clip, MotionCurve, MotionSegment } from "./types.js";
+
+/**
+ * Sample all curves of a clip at `timeSeconds` (clamped to [0, duration]
+ * unless looping — caller should wrap time for loops).
+ */
+export function evaluateMotion3(
+    clip: Motion3Clip,
+    timeSeconds: number,
+): Array<{ target: MotionCurve["target"]; id: string; value: number }> {
+    const t = clamp(timeSeconds, 0, clip.duration);
+    const out: Array<{
+        target: MotionCurve["target"];
+        id: string;
+        value: number;
+    }> = [];
+    for (const curve of clip.curves) {
+        out.push({
+            target: curve.target,
+            id: curve.id,
+            value: evaluateCurve(curve, t, clip.areBeziersRestricted),
+        });
+    }
+    return out;
+}
+
+export function evaluateCurve(
+    curve: MotionCurve,
+    timeSeconds: number,
+    areBeziersRestricted: boolean,
+): number {
+    const segs = curve.segments;
+    if (segs.length === 0) return 0;
+
+    if (timeSeconds <= segs[0]!.p0.time) return segs[0]!.p0.value;
+    const last = segs[segs.length - 1]!;
+    if (timeSeconds >= last.p3.time) return last.p3.value;
+
+    for (let i = 0; i < segs.length; i += 1) {
+        const seg = segs[i]!;
+        const isLast = i === segs.length - 1;
+        // At a segment boundary, hand off to the next segment so stepped ends
+        // expose their end value as the next key.
+        if (
+            timeSeconds < seg.p3.time ||
+            (isLast && timeSeconds <= seg.p3.time)
+        ) {
+            return evaluateSegment(seg, timeSeconds, areBeziersRestricted);
+        }
+    }
+    return last.p3.value;
+}
+
+function evaluateSegment(
+    seg: MotionSegment,
+    time: number,
+    areBeziersRestricted: boolean,
+): number {
+    const { p0, p3 } = seg;
+    switch (seg.kind) {
+        case "linear": {
+            const span = p3.time - p0.time;
+            if (span <= 0) return p3.value;
+            const u = (time - p0.time) / span;
+            return p0.value + (p3.value - p0.value) * u;
+        }
+        case "stepped":
+            return p0.value;
+        case "inverseStepped":
+            return p3.value;
+        case "bezier": {
+            const p1 = seg.p1!;
+            const p2 = seg.p2!;
+            if (areBeziersRestricted) {
+                const span = p3.time - p0.time;
+                if (span <= 0) return p3.value;
+                const u = (time - p0.time) / span;
+                return cubic(p0.value, p1.value, p2.value, p3.value, u);
+            }
+            // Unrestricted: solve cubic for time, then sample value.
+            const u = solveBezierTime(p0.time, p1.time, p2.time, p3.time, time);
+            return cubic(p0.value, p1.value, p2.value, p3.value, u);
+        }
+        default:
+            return p3.value;
+    }
+}
+
+function cubic(a: number, b: number, c: number, d: number, t: number): number {
+    const u = 1 - t;
+    return (
+        u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d
+    );
+}
+
+/** Binary-search parameter u in [0,1] so cubic(time) ~= targetTime. */
+function solveBezierTime(
+    t0: number,
+    t1: number,
+    t2: number,
+    t3: number,
+    target: number,
+): number {
+    let lo = 0;
+    let hi = 1;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (lo + hi) * 0.5;
+        const x = cubic(t0, t1, t2, t3, mid);
+        if (x < target) lo = mid;
+        else hi = mid;
+    }
+    return (lo + hi) * 0.5;
+}
+
+function clamp(n: number, min: number, max: number): number {
+    if (n < min) return min;
+    if (n > max) return max;
+    return n;
+}

package/src/motion/index.ts

@@ -0,0 +1,20 @@
+export { evaluateCurve, evaluateMotion3 } from "./evaluate-curve.js";
+export {
+    blendMotionLayers,
+    MotionPlayer,
+    type MotionPlayerHandlers,
+} from "./motion-player.js";
+export { parseMotion3 } from "./parse-motion3.js";
+export type {
+    Motion3Clip,
+    MotionApplySample,
+    MotionCurve,
+    MotionCurveTarget,
+    MotionPoint,
+    MotionPriorityLevel,
+    MotionSegment,
+    MotionSegmentKind,
+    MotionUserData,
+    PlayMotionOptions,
+} from "./types.js";
+export { MotionPriority } from "./types.js";