@doki-land/live2d-renderer 0.0.0 → 0.0.12

package/src/moc/moc3.ts

@@ -0,0 +1,222 @@
+import type {
+    FrameDrawable,
+    FrameSnapshot,
+    InternalModel,
+    ModelInstance,
+    ModelProgram,
+    ModelSettings,
+} from "@doki-land/live2d-core";
+import { detectModelSettingsFormat } from "@doki-land/live2d-core";
+import { isCpuProgramBytes, parseCpuProgram } from "../cpu/cpu-program.js";
+import {
+    createModelInstance,
+    evaluateFrame,
+    setParameterValue,
+} from "../cpu/evaluate.js";
+import type {
+    ModelBackend,
+    ModelBackendOptions,
+    ParameterBinding,
+} from "../model-runtime.js";
+import type { BlendMode, DrawableMesh } from "../types.js";
+import { cascadedPartOpacity, readMoc3PartTables } from "./moc3-parts.js";
+import { type Moc3Document, parseMoc3Document } from "./moc3-reader.js";
+import { moc3DocumentToProgram } from "./moc3-to-program.js";
+
+function toDrawableMesh(d: FrameDrawable): DrawableMesh {
+    return {
+        index: d.index,
+        textureIndex: d.textureIndex,
+        vertexPositions: d.positions,
+        uvs: d.uvs,
+        indices: d.indices,
+        opacity: d.opacity,
+        blendMode: d.blendMode as BlendMode,
+        invertedMask: d.invertedMask,
+        renderOrder: d.renderOrder,
+        dynamicFlag: true,
+        maskIndices: [...d.maskIndices],
+        visible: d.visible,
+    };
+}
+
+function paramFingerprint(values: ArrayLike<number>): string {
+    let s = "";
+    for (let i = 0; i < values.length; i++) {
+        s += `${values[i]?.toFixed(5)},`;
+    }
+    return s;
+}
+
+interface Moc3State {
+    /** Present for official MOC3; null for cpu-program fixtures. */
+    doc: Moc3Document | null;
+    instance: ModelInstance;
+    lastFrame: FrameSnapshot | null;
+    bakedFingerprint: string;
+    /** Runtime PartOpacity overrides (id → 0..1). */
+    partOpacity: Map<string, number>;
+}
+
+const stateByModel = new WeakMap<InternalModel, Moc3State>();
+
+function bakePose(state: Moc3State): void {
+    if (!state.doc) {
+        state.lastFrame = evaluateFrame(state.instance);
+        return;
+    }
+
+    const values = Float32Array.from(state.instance.parameterValues);
+    const timeSeconds = state.instance.timeSeconds;
+    const fp = paramFingerprint(values);
+    if (fp === state.bakedFingerprint && state.lastFrame) return;
+
+    const program = moc3DocumentToProgram(state.doc, {
+        getParamByIndex: (i) => values[i] ?? 0,
+    });
+    const next = createModelInstance(program);
+    next.parameterValues.set(values);
+    next.timeSeconds = timeSeconds;
+    state.instance = next;
+    state.bakedFingerprint = fp;
+    state.lastFrame = evaluateFrame(next);
+}
+
+/** moc3 model backend — official `.moc3` or CPU `.program.json` fixture. */
+export class Moc3Backend implements ModelBackend {
+    readonly format = "moc3" as const;
+
+    canHandle(json: unknown): boolean {
+        return detectModelSettingsFormat(json) === "moc3";
+    }
+
+    async createModel(
+        settings: ModelSettings,
+        options?: ModelBackendOptions,
+    ): Promise<InternalModel> {
+        let bytes = options?.mocBytes;
+        if (!bytes) {
+            if (!options?.resolver) {
+                throw new Error(
+                    "@doki-land/live2d-renderer: Moc3Backend.createModel requires resolver or mocBytes",
+                );
+            }
+            bytes = await options.resolver.fetchBytes(settings.moc);
+        }
+
+        const isCpu =
+            settings.moc.toLowerCase().endsWith(".program.json") ||
+            isCpuProgramBytes(bytes);
+
+        let doc: Moc3Document | null = null;
+        let program: ModelProgram;
+        if (isCpu) {
+            program = parseCpuProgram(bytes);
+        } else {
+            doc = parseMoc3Document(bytes);
+            program = moc3DocumentToProgram(doc);
+        }
+
+        const instance = createModelInstance(program);
+        const model: InternalModel = {
+            id: settings.name ?? settings.url,
+            settings,
+            format: "moc3",
+        };
+        stateByModel.set(model, {
+            doc,
+            instance,
+            lastFrame: null,
+            bakedFingerprint: paramFingerprint(instance.parameterValues),
+            partOpacity: new Map(),
+        });
+        return model;
+    }
+
+    updateModel(model: InternalModel, deltaTimeSeconds: number): void {
+        const state = stateByModel.get(model);
+        if (!state) return;
+        state.instance.timeSeconds += deltaTimeSeconds;
+        bakePose(state);
+        if (state.lastFrame) {
+            state.lastFrame = {
+                ...state.lastFrame,
+                timeSeconds: state.instance.timeSeconds,
+            };
+        }
+    }
+
+    getDrawables(model: InternalModel): DrawableMesh[] {
+        const state = stateByModel.get(model);
+        if (!state) return [];
+        bakePose(state);
+        const frame = state.lastFrame ?? evaluateFrame(state.instance);
+        state.lastFrame = frame;
+        const tables = state.doc ? readMoc3PartTables(state.doc) : null;
+        return frame.drawables.map((d) => {
+            const mesh = toDrawableMesh(d);
+            if (!tables || state.partOpacity.size === 0) return mesh;
+            const mul = cascadedPartOpacity(tables, d.index, state.partOpacity);
+            return { ...mesh, opacity: mesh.opacity * mul };
+        });
+    }
+
+    captureFrame(model: InternalModel): FrameSnapshot | null {
+        const state = stateByModel.get(model);
+        if (!state) return null;
+        bakePose(state);
+        const frame = state.lastFrame ?? evaluateFrame(state.instance);
+        state.lastFrame = frame;
+        const tables = state.doc ? readMoc3PartTables(state.doc) : null;
+        if (!tables || state.partOpacity.size === 0) return frame;
+        return {
+            ...frame,
+            drawables: frame.drawables.map((d) => ({
+                ...d,
+                opacity:
+                    d.opacity *
+                    cascadedPartOpacity(tables, d.index, state.partOpacity),
+            })),
+        };
+    }
+
+    setParameter(model: InternalModel, id: string, value: number): void {
+        const state = stateByModel.get(model);
+        if (!state) return;
+        setParameterValue(state.instance, id, value);
+        state.lastFrame = null;
+        state.bakedFingerprint = "";
+    }
+
+    setPartOpacity(model: InternalModel, id: string, value: number): void {
+        const state = stateByModel.get(model);
+        if (!state) return;
+        const v = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+        state.partOpacity.set(id, v);
+        // Opacity is applied in getDrawables; no need to rebake deform.
+    }
+
+    listParameters(model: InternalModel): readonly ParameterBinding[] {
+        const state = stateByModel.get(model);
+        if (!state) return [];
+        return state.instance.program.parameters.map((p, i) => ({
+            id: p.id,
+            min: p.min,
+            max: p.max,
+            defaultValue: p.defaultValue,
+            value: state.instance.parameterValues[i] ?? p.defaultValue,
+        }));
+    }
+
+    hitTest(_model: InternalModel, _x: number, _y: number): string | null {
+        return null;
+    }
+
+    destroyModel(model: InternalModel): void {
+        stateByModel.delete(model);
+    }
+}
+
+export function createMoc3Backend(): Moc3Backend {
+    return new Moc3Backend();
+}

package/src/model-runtime.ts

@@ -0,0 +1,73 @@
+import type {
+    AssetResolver,
+    FrameSnapshot,
+    InternalModel,
+    ModelFormat,
+    ModelSettings,
+} from "@doki-land/live2d-core";
+import type { DrawableMesh, Renderer } from "./types.js";
+
+/**
+ * Model-format runtime contract (moc2 / moc3 / cpu-program).
+ * Not a graphics backend — those live under `backends/`.
+ */
+export interface ModelBackendOptions {
+    /** Bound graphics renderer, if the runtime needs GPU handles. */
+    renderer?: Renderer | null;
+    /** Asset resolver for moc / textures. */
+    resolver?: AssetResolver;
+    /** Preloaded moc bytes (tests). */
+    mocBytes?: ArrayBuffer;
+}
+
+/** Live parameter binding for inspectors / playground. */
+export interface ParameterBinding {
+    readonly id: string;
+    readonly min: number;
+    readonly max: number;
+    readonly defaultValue: number;
+    readonly value: number;
+}
+
+/** moc2 / moc3 model runtime. */
+export interface ModelBackend {
+    readonly format: ModelFormat;
+
+    canHandle(json: unknown): boolean;
+
+    createModel(
+        settings: ModelSettings,
+        options?: ModelBackendOptions,
+    ): Promise<InternalModel>;
+
+    updateModel(model: InternalModel, deltaTimeSeconds: number): void;
+
+    getDrawables(model: InternalModel): DrawableMesh[];
+
+    hitTest(model: InternalModel, x: number, y: number): string | null;
+
+    destroyModel(model: InternalModel): void;
+
+    /** Optional CPU snapshot (moc3 CPU path). */
+    captureFrame?(model: InternalModel): FrameSnapshot | null;
+
+    setParameter?(model: InternalModel, id: string, value: number): void;
+
+    /** Optional PartOpacity override (moc3 parts / pose / motion). */
+    setPartOpacity?(model: InternalModel, id: string, value: number): void;
+
+    listParameters?(model: InternalModel): readonly ParameterBinding[];
+}
+
+export function selectModelBackend(
+    backends: ModelBackend[],
+    json: unknown,
+): ModelBackend {
+    const hit = backends.find((b) => b.canHandle(json));
+    if (!hit) {
+        throw new Error(
+            "@doki-land/live2d-renderer: no ModelBackend can handle this model JSON",
+        );
+    }
+    return hit;
+}

package/src/preview-style.ts

@@ -0,0 +1,33 @@
+/** Shared untextured preview colors (Canvas2D / WebGL2 / WebGPU parity). */
+
+export const PREVIEW_FILL = {
+    r: 0x5b / 255,
+    g: 0x8d / 255,
+    b: 0xef / 255,
+    a: 1,
+} as const;
+
+export const PREVIEW_STROKE = {
+    r: 0x1b / 255,
+    g: 0x3a / 255,
+    b: 0x6b / 255,
+    a: 1,
+} as const;
+
+/** Expand triangle indices into a line-list (each edge twice-wound). */
+export function triangleEdgesToLineList(indices: Uint16Array): Uint16Array {
+    const out = new Uint16Array(Math.floor(indices.length / 3) * 6);
+    let o = 0;
+    for (let i = 0; i + 2 < indices.length; i += 3) {
+        const a = indices[i]!;
+        const b = indices[i + 1]!;
+        const c = indices[i + 2]!;
+        out[o++] = a;
+        out[o++] = b;
+        out[o++] = b;
+        out[o++] = c;
+        out[o++] = c;
+        out[o++] = a;
+    }
+    return out;
+}

package/src/types.ts

@@ -0,0 +1,71 @@
+/** Implemented renderer kinds. */
+export type RendererKind = "webgpu" | "webgl2" | "canvas2d";
+
+/** Blend modes for Live2D drawable compositing. */
+export const BlendMode = {
+    Normal: 0,
+    Additive: 1,
+    Multiplicative: 2,
+} as const;
+
+export type BlendMode = (typeof BlendMode)[keyof typeof BlendMode];
+
+/** A single drawable mesh submitted to the GPU backend. */
+export interface DrawableMesh {
+    index: number;
+    textureIndex: number;
+    vertexPositions: Float32Array;
+    uvs: Float32Array;
+    indices: Uint16Array;
+    opacity: number;
+    blendMode: BlendMode;
+    invertedMask: boolean;
+    renderOrder: number;
+    dynamicFlag: boolean;
+    maskIndices: number[];
+    visible: boolean;
+}
+
+export interface TextureData {
+    index: number;
+    image: HTMLImageElement | ImageBitmap;
+    width: number;
+    height: number;
+}
+
+export interface ModelDrawPass {
+    setTextures(textures: TextureData[]): void;
+
+    draw(drawables: DrawableMesh[], modelMatrix: Float32Array): void;
+
+    destroy(): void;
+}
+
+/** Top-level renderer bound to a canvas. */
+export interface Renderer {
+    readonly kind: RendererKind;
+
+    initialize(canvas: HTMLCanvasElement): Promise<void>;
+
+    createModelDrawPass(): ModelDrawPass;
+
+    beginFrame(): void;
+
+    endFrame(): void;
+
+    resize(width: number, height: number): void;
+
+    destroy(): void;
+}
+
+export interface WebGpuRenderer extends Renderer {
+    readonly kind: "webgpu";
+
+    getDevice(): GPUDevice | null;
+}
+
+export interface WebGl2Renderer extends Renderer {
+    readonly kind: "webgl2";
+
+    getGL(): WebGL2RenderingContext | null;
+}