@airisu-dev/react-native-live2d-skia 0.0.0-stage → 0.1.1

package/plugin/build/index.js

@@ -0,0 +1,81 @@
+"use strict";
+// Expo config plugin: tells the native builds where the Cubism SDK for Native is.
+//
+//   "plugins": [["@airisu-dev/react-native-live2d-skia", { "cubismSdkPath": "./vendor/CubismSdkForNative" }]]
+//
+// Cubism Core is proprietary and not shipped: download the SDK with
+// `@airisu-dev/react-native-live2d-skia fetch-sdk`, accepting Live2D's license. The path is relative to the app's root.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withLive2dSkia = void 0;
+exports.nativeProperties = nativeProperties;
+exports.skiaPackageOf = skiaPackageOf;
+exports.warnIfMissing = warnIfMissing;
+const config_plugins_1 = require("expo/config-plugins");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+// Read by android/build.gradle and Live2dSkia.podspec.
+const SDK_PROPERTY = 'live2dSkia.cubismSdkPath';
+const SKIA_PROPERTY = 'live2dSkia.skiaPackage';
+// The Skia packages react-native-live2d-skia can draw with in C++, by preference.
+const SKIA_PACKAGES = ['react-native-skia', '@shopify/react-native-skia'];
+const FETCH_HINT = 'Download it with `@airisu-dev/react-native-live2d-skia fetch-sdk --accept-license` (through npx, bunx, yarn or pnpm).';
+const pkg = JSON.parse(fs_1.default.readFileSync(path_1.default.join(__dirname, '..', '..', 'package.json'), 'utf8'));
+// Paths are written relative to the native folder, so a prebuilt project
+// still builds after it's moved or checked out somewhere else.
+const relativeTo = (dir, target) => path_1.default.relative(dir, target).split(path_1.default.sep).join('/');
+function nativeProperties(projectRoot, platformProjectRoot, sdkPath) {
+    const sdkDir = path_1.default.resolve(projectRoot, sdkPath);
+    return {
+        [SDK_PROPERTY]: relativeTo(platformProjectRoot, sdkDir),
+        [SKIA_PROPERTY]: skiaPackageOf(projectRoot),
+    };
+}
+const withLive2dSkia = (config, props) => {
+    const sdkPath = props?.cubismSdkPath;
+    if (!sdkPath) {
+        throw new Error('[react-native-live2d-skia] Set the Cubism SDK for Native folder: ' +
+            '["@airisu-dev/react-native-live2d-skia", { "cubismSdkPath": "./vendor/CubismSdkForNative" }]. ' +
+            FETCH_HINT);
+    }
+    config = (0, config_plugins_1.withGradleProperties)(config, (c) => {
+        const { projectRoot, platformProjectRoot } = c.modRequest;
+        warnIfMissing(path_1.default.resolve(projectRoot, sdkPath));
+        const values = nativeProperties(projectRoot, platformProjectRoot, sdkPath);
+        c.modResults = c.modResults.filter((item) => !(item.type === 'property' && item.key in values));
+        for (const [key, value] of Object.entries(values)) {
+            c.modResults.push({ type: 'property', key, value });
+        }
+        return c;
+    });
+    config = (0, config_plugins_1.withPodfileProperties)(config, (c) => {
+        const { projectRoot, platformProjectRoot } = c.modRequest;
+        Object.assign(c.modResults, nativeProperties(projectRoot, platformProjectRoot, sdkPath));
+        return c;
+    });
+    return config;
+};
+exports.withLive2dSkia = withLive2dSkia;
+// The Skia package the app depends on, by its own package.json: in a monorepo
+// both can be installed, but an app uses one. Empty when it has neither: the
+// native build then leaves out the C++ drawer.
+function skiaPackageOf(projectRoot) {
+    const appPackage = JSON.parse(fs_1.default.readFileSync(path_1.default.join(projectRoot, 'package.json'), 'utf8'));
+    const found = SKIA_PACKAGES.filter((name) => appPackage.dependencies?.[name]);
+    if (found.length > 1) {
+        console.warn(`[react-native-live2d-skia] The app depends on both ${found.join(' and ')}: drawing with ${found[0]}. Skia says not to install both.`);
+    }
+    if (found.length === 0) {
+        console.warn(`[react-native-live2d-skia] The app depends on neither ${SKIA_PACKAGES.join(' nor ')}. Install one: react-native-live2d-skia draws with Skia.`);
+    }
+    return found[0] ?? '';
+}
+// Not an error: CI may fetch the SDK after prebuild. The native build checks again.
+function warnIfMissing(sdkDir) {
+    if (!fs_1.default.existsSync(path_1.default.join(sdkDir, 'cubism-info.yml'))) {
+        console.warn(`[react-native-live2d-skia] Cubism SDK for Native not found at ${sdkDir}. ${FETCH_HINT}`);
+    }
+}
+exports.default = (0, config_plugins_1.createRunOncePlugin)(exports.withLive2dSkia, pkg.name, pkg.version);

package/src/components/Live2D.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useFrameCallback, useSharedValue } from 'react-native-reanimated'
+import {
+  createSynchronizable,
+  createWorkletRuntime,
+  scheduleOnRuntime,
+  type WorkletRuntime,
+} from 'react-native-worklets'
+import type { Live2DModel } from '../loader/loadModel'
+import { Group, Picture, Skia, type SkPicture } from '../rendering/skia'
+import { addToTicker, type Live2DFrameStats, type PublishedFrame } from '../rendering/ticker'
+
+export type { Live2DFrameStats } from '../rendering/ticker'
+
+export interface Live2DProps {
+  model: Live2DModel | null
+  /** Top-left position on the canvas. */
+  x?: number
+  y?: number
+  /** Uniform scale of the model's native canvas size. */
+  scale?: number
+  /** Stops animating and keeps the current frame. */
+  paused?: boolean
+  /** Caps the frame rate, e.g. 30 to save battery. Default: the display's refresh rate. */
+  maxFps?: number
+  /** Called about once a second with timings of the animation loop. */
+  onFrameStats?: (stats: Live2DFrameStats) => void
+}
+
+const DISPLAY_SAMPLE_FRAMES = 60
+
+// Shown until the model loads. A recorder must begin recording before it can finish.
+const emptyRecorder = Skia.PictureRecorder()
+emptyRecorder.beginRecording(Skia.XYWHRect(0, 0, 0, 0))
+const EMPTY_PICTURE = emptyRecorder.finishRecordingAsPicture()
+
+// Models animate on a background thread so a busy JS thread doesn't drop frames:
+// one runtime and one loop (rendering/ticker) for every <Live2D>.
+let runtime: WorkletRuntime | null = null
+const live2dRuntime = () => (runtime ??= createWorkletRuntime({ name: 'live2d' }))
+
+export function Live2D({
+  model,
+  x = 0,
+  y = 0,
+  scale = 1,
+  paused = false,
+  maxFps,
+  onFrameStats,
+}: Live2DProps) {
+  // A shared value lets Skia redraw each frame without a React re-render.
+  const picture = useSharedValue<SkPicture>(model?.picture ?? EMPTY_PICTURE)
+  // Reset to the load-time frame only when the model changes, so pausing keeps the current frame.
+  const shownModel = useRef<Live2DModel | null>(null)
+  // The loop publishes frames here. scheduleOnUI can't be called from a custom
+  // worklet runtime (outside Bundle Mode), so the UI thread polls instead.
+  const [latest] = useState(() => createSynchronizable<PublishedFrame>(null))
+  // The frame shown, told back to the loop so it frees only frames no longer shown.
+  const [shown] = useState(() => createSynchronizable(-1))
+  // The display's frame interval: the shortest over a window of UI frames, so
+  // dropped frames don't count. 0 until measured.
+  const [displayFrameMs] = useState(() => createSynchronizable(0))
+  const sampleMin = useSharedValue(Infinity)
+  const sampleCount = useSharedValue(0)
+  useFrameCallback(({ timeSincePreviousFrame }) => {
+    const next = latest.getDirty()
+    if (next && next.frame !== shown.getDirty()) {
+      picture.value = next.picture
+      shown.setBlocking(next.frame)
+    }
+    if (timeSincePreviousFrame !== null && timeSincePreviousFrame > 0) {
+      sampleMin.value = Math.min(sampleMin.value, timeSincePreviousFrame)
+      if (++sampleCount.value >= DISPLAY_SAMPLE_FRAMES) {
+        displayFrameMs.setBlocking(sampleMin.value)
+        sampleMin.value = Infinity
+        sampleCount.value = 0
+      }
+    }
+  })
+
+  // Stable for the loop to call; updated after render, as refs mustn't be written while rendering.
+  const onFrameStatsRef = useRef(onFrameStats)
+  useLayoutEffect(() => {
+    onFrameStatsRef.current = onFrameStats
+  })
+  const reportStats = useCallback((stats: Live2DFrameStats) => onFrameStatsRef.current?.(stats), [])
+  const wantStats = onFrameStats !== undefined
+  const capFrameMs = maxFps ? 1000 / maxFps : 0
+
+  useEffect(() => {
+    if (!model) return
+    if (shownModel.current !== model) {
+      shownModel.current = model
+      // set(), not `.value =`, outside worklets: the React Compiler form.
+      picture.set(model.picture)
+    }
+    if (paused) return
+
+    // Frame numbers restart when the model starts animating again.
+    latest.setBlocking(null)
+    shown.setBlocking(-1)
+    const running = createSynchronizable(true)
+    scheduleOnRuntime(
+      live2dRuntime(),
+      addToTicker,
+      {
+        id: model.id,
+        native: model.native,
+        textures: model.textures,
+        shaders: model.shaders,
+        canvas: model.canvas,
+      },
+      {
+        target: latest,
+        shown,
+        running,
+        displayMs: displayFrameMs,
+        capMs: capFrameMs,
+        report: wantStats ? reportStats : null,
+      },
+    )
+    return () => running.setBlocking(false)
+  }, [model, paused, picture, latest, shown, displayFrameMs, capFrameMs, wantStats, reportStats])
+
+  if (!model) return null
+  return (
+    <Group transform={[{ translateX: x }, { translateY: y }, { scale }]}>
+      <Picture picture={picture} />
+    </Group>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export type { Live2DFrameStats, Live2DProps } from './Live2D'
+export { Live2D } from './Live2D'

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export type {
+  Live2DGestureOptions,
+  Live2DGesturesOptions,
+  Live2DGestureTarget,
+} from './useLive2DGesture'
+export { useLive2DGesture, useLive2DGestures } from './useLive2DGesture'
+export type { Live2DModelState } from './useLive2DModel'
+export { useLive2DModel } from './useLive2DModel'

package/src/hooks/useLive2DGesture.ts

@@ -0,0 +1,140 @@
+import { useLayoutEffect, useMemo, useRef } from 'react'
+import { Gesture } from 'react-native-gesture-handler'
+import type { Live2DModel } from '../loader/loadModel'
+
+export interface Live2DGestureTarget {
+  model: Live2DModel | null
+  x?: number
+  y?: number
+  scale?: number
+  /**
+   * Called with the hit areas under a tap. Return true to skip the default
+   * reaction: a `Tap<area>` motion, else a random expression for `Head`, else a `Tap` motion.
+   */
+  onHit?: (hitAreas: string[]) => boolean | void
+  /** Makes the model draggable by long-press. Called with its new top-left; the app moves it. */
+  onMove?: (x: number, y: number) => void
+}
+
+export interface Live2DGesturesOptions {
+  /** Models follow the finger while it's down. Default true. */
+  focus?: boolean
+}
+
+export interface Live2DGestureOptions
+  extends Omit<Live2DGestureTarget, 'model'>,
+    Live2DGesturesOptions {}
+
+function react(model: Live2DModel, hitAreas: string[]) {
+  for (const area of hitAreas) {
+    const group = `Tap${area}`
+    if (model.motionGroups.includes(group)) {
+      model.motion(group)
+      return
+    }
+    if (area === 'Head' && model.expressionNames.length > 0) {
+      model.expression()
+      return
+    }
+  }
+  // Some models have one `Tap` group for every area.
+  if (model.motionGroups.includes('Tap')) model.motion('Tap')
+}
+
+const LONG_PRESS_MS = 350
+
+function toModel({ x = 0, y = 0, scale = 1 }: Live2DGestureTarget, px: number, py: number) {
+  return [(px - x) / scale, (py - y) / scale] as const
+}
+
+function topmostHit(targets: Live2DGestureTarget[], px: number, py: number) {
+  // Later targets are drawn over earlier ones.
+  for (let i = targets.length - 1; i >= 0; i--) {
+    const t = targets[i]!
+    if (!t.model) continue
+    const hitAreas = t.model.hitTest(...toModel(t, px, py))
+    if (hitAreas.length > 0) return { target: t, hitAreas }
+  }
+  return null
+}
+
+/**
+ * Touch interaction for several `<Live2D>` models in one canvas, for a
+ * `<GestureDetector>` around the `<Canvas>`. List targets in drawing order.
+ */
+export function useLive2DGestures(
+  targets: Live2DGestureTarget[],
+  { focus = true }: Live2DGesturesOptions = {},
+) {
+  // The React Compiler miscompiled these callbacks (a `let` shared between them).
+  'use no memo'
+
+  // Read at event time, so the gesture is built once. Updated after render.
+  const latest = useRef(targets)
+  useLayoutEffect(() => {
+    latest.current = targets
+  })
+
+  // The callbacks only run on touch events; the refs rule can't tell through RNGH's builder API.
+  /* eslint-disable react-hooks/refs */
+  return useMemo(() => {
+    const focusAll = (px: number, py: number) => {
+      for (const t of latest.current) t.model?.focus(...toModel(t, px, py))
+    }
+
+    const pan = Gesture.Pan()
+      .runOnJS(true)
+      .enabled(focus)
+      .onBegin((e) => focusAll(e.x, e.y))
+      .onUpdate((e) => focusAll(e.x, e.y))
+      .onFinalize(() => {
+        for (const t of latest.current) t.model?.resetFocus()
+      })
+
+    // Shorter than a long press, so picking a model up isn't also a tap.
+    const tap = Gesture.Tap()
+      .runOnJS(true)
+      .maxDuration(LONG_PRESS_MS - 50)
+      .onEnd((e, success) => {
+        if (!success) return
+        const hit = topmostHit(latest.current, e.x, e.y)
+        if (hit && hit.target.onHit?.(hit.hitAreas) !== true) {
+          react(hit.target.model!, hit.hitAreas)
+        }
+      })
+
+    // The dragged model (found again by model, as targets can change) and the finger's
+    // offset from its top-left. On an object so it survives recompilation.
+    const drag: {
+      current: { model: Live2DModel; dx: number; dy: number } | null
+    } = { current: null }
+    const dragPan = Gesture.Pan()
+      .runOnJS(true)
+      .activateAfterLongPress(LONG_PRESS_MS)
+      .onStart((e) => {
+        const hit = topmostHit(latest.current, e.x, e.y)
+        if (!hit?.target.onMove) return
+        const { model, x = 0, y = 0 } = hit.target
+        drag.current = { model: model!, dx: e.x - x, dy: e.y - y }
+      })
+      .onUpdate((e) => {
+        if (!drag.current) return
+        const { model, dx, dy } = drag.current
+        latest.current.find((t) => t.model === model)?.onMove?.(e.x - dx, e.y - dy)
+      })
+      .onFinalize(() => {
+        drag.current = null
+      })
+
+    return Gesture.Simultaneous(pan, tap, dragPan)
+  }, [focus])
+  /* eslint-enable react-hooks/refs */
+}
+
+/** Touch interaction for one `<Live2D>`. For several models in one canvas, use `useLive2DGestures`. */
+export function useLive2DGesture(
+  model: Live2DModel | null,
+  { focus, ...target }: Live2DGestureOptions = {},
+) {
+  return useLive2DGestures([{ model, ...target }], { focus })
+}

package/src/hooks/useLive2DModel.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from 'react'
+import { type Live2DModel, type Live2DModelSource, loadLive2DModel } from '../loader/loadModel'
+import type { Live2DModelContext } from '../loader/modelContext'
+import type { Live2DLoadOptions } from '../loader/modelUrl'
+
+export interface Live2DModelState {
+  /** The loaded model, `null` while loading or after an error. */
+  model: Live2DModel | null
+  /** Why the last load failed, e.g. a network error for a URL source. */
+  error: Error | null
+  loading: boolean
+  /** Loads the model again, e.g. after an error. */
+  retry: () => void
+}
+
+/** Loads a model on mount. `options` apply to remote files (see `Live2DLoadOptions`). */
+export function useLive2DModel(
+  source: Live2DModelSource | Live2DModelContext | string,
+  options?: Live2DLoadOptions,
+): Live2DModelState {
+  const [model, setModel] = useState<Live2DModel | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const [attempt, setAttempt] = useState(0)
+  // Read once: remount to load another model. Wrapped because a require.context
+  // is a function, which useState would call as an initializer.
+  const [initialSource] = useState(() => source)
+  const [initialOptions] = useState(options)
+
+  useEffect(() => {
+    let cancelled = false
+    loadLive2DModel(initialSource, initialOptions).then(
+      (m) => !cancelled && setModel(m),
+      (e: unknown) => !cancelled && setError(e instanceof Error ? e : new Error(String(e))),
+    )
+    return () => {
+      cancelled = true
+    }
+  }, [initialSource, initialOptions, attempt])
+
+  const retry = useCallback(() => {
+    setError(null)
+    setModel(null)
+    setAttempt((n) => n + 1)
+  }, [])
+
+  return { model, error, loading: !model && !error, retry }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './hooks'
+export * from './loader'
+export { Live2dSkia } from './native'
+export type { MotionPriority } from './specs/react-native-live2d-skia.nitro'

package/src/loader/cubismJson.ts

@@ -0,0 +1,23 @@
+// Serializes a parsed Cubism JSON file (model3, physics3, motion3, ...) for the
+// Cubism Framework's own JSON parser, which is stricter than JSON:
+// - a number must be followed by a newline or a comma, never `}`, `]` or a space
+//   (CubismJson::ParseNumeric), so every value goes on its own line;
+// - exponents aren't supported, so numbers like 1e-7 are written out in full.
+// Files from Cubism Editor already look like this; `JSON.stringify(x)` does not.
+
+const PLACEHOLDER = '\u0000num:'
+
+function plainNumber(n: number): string {
+  const s = String(n)
+  if (!/e/i.test(s)) return s
+  // toFixed(20) keeps far more precision than the Framework's float32 parser reads.
+  return n.toFixed(20).replace(/\.?0+$/, '')
+}
+
+export function toCubismJson(value: unknown): string {
+  return JSON.stringify(
+    value,
+    (_key, v) => (typeof v === 'number' && /e/i.test(String(v)) ? PLACEHOLDER + plainNumber(v) : v),
+    '\t',
+  ).replace(/"\\u0000num:([^"]+)"/g, '$1')
+}

package/src/loader/index.ts

@@ -0,0 +1,9 @@
+export type {
+  AssetSource,
+  CubismJson,
+  Live2DModel,
+  Live2DModelSource,
+} from './loadModel'
+export { loadLive2DModel } from './loadModel'
+export type { Live2DModelContext } from './modelContext'
+export type { Live2DLoadOptions } from './modelUrl'

package/src/loader/loadModel.ts

@@ -0,0 +1,195 @@
+import { Asset } from 'expo-asset'
+import { File } from 'expo-file-system'
+import { Live2dSkia } from '../native'
+import { decodeImage } from '../rendering/decodeImage'
+import {
+  type CanvasInfo,
+  createDrawer,
+  createNativeDrawer,
+  setNativeTextures,
+} from '../rendering/drawer'
+import {
+  FilterMode,
+  MipmapMode,
+  type SkImage,
+  Skia,
+  type SkPicture,
+  type SkShader,
+  TileMode,
+} from '../rendering/skia'
+import type {
+  MotionPriority,
+  Live2DModel as NativeModel,
+} from '../specs/react-native-live2d-skia.nitro'
+import { toCubismJson } from './cubismJson'
+import { isModelContext, type Live2DModelContext, sourceFromContext } from './modelContext'
+import { fetchBytes, isRemote, type Live2DLoadOptions, redactUrl, sourceFromUrl } from './modelUrl'
+
+export type AssetSource = number | string
+
+/** A parsed Cubism JSON file, e.g. `require('../model.physics3.json')`. */
+export type CubismJson = object
+
+export interface Live2DModelSource {
+  /** Parsed `model3.json`. */
+  settings: CubismJson
+  moc: AssetSource
+  /** In the order of `FileReferences.Textures`. */
+  textures: AssetSource[]
+  physics?: CubismJson
+  pose?: CubismJson
+  /** By group, in the order of `FileReferences.Motions`. A random `Idle` motion plays when nothing else does. */
+  motions?: Record<string, CubismJson[]>
+  expressions?: Record<string, CubismJson>
+}
+
+/** A loaded model. Points are in model pixels: native canvas size, origin top-left, like `picture`. */
+export interface Live2DModel {
+  /**
+   * Plays a motion of `group`, a random one without `index`. Returns false
+   * if there's no such motion or one with a higher priority is playing.
+   */
+  motion(group: string, index?: number, priority?: MotionPriority): boolean
+  /** Fades to an expression, a random one without `name`. Returns false if there's none. */
+  expression(name?: string): boolean
+  resetExpression(): void
+  /** Holds a parameter at `value`, over motions, until `resetParameter`. */
+  setParameter(id: string, value: number): void
+  resetParameter(id: string): void
+  focus(x: number, y: number): void
+  resetFocus(): void
+  /** Names of the `model3.json` hit areas at a point, e.g. `['Head', 'Body']`. */
+  hitTest(x: number, y: number): string[]
+  motionGroups: string[]
+  expressionNames: string[]
+
+  /** Unique per loaded model: <Live2D>s showing the same model share its frames. */
+  id: number
+  /** Native model. Thread-safe. */
+  native: NativeModel
+  /** The model drawn at load, at its native canvas size, origin top-left. */
+  picture: SkPicture
+  width: number
+  height: number
+  /** Draws the model's current state (after `native.update`) into a new picture. */
+  draw(): SkPicture
+  /** For drawing on another worklet runtime with `createDrawer`. */
+  textures: SkImage[]
+  shaders: SkShader[]
+  canvas: CanvasInfo
+}
+
+// For error messages: URLs lose their query, which can hold tokens.
+const describe = (source: AssetSource) =>
+  typeof source === 'string' ? redactUrl(source) : String(source)
+
+async function readAsset(source: AssetSource, options: Live2DLoadOptions): Promise<ArrayBuffer> {
+  // Remote files are fetched directly: expo-asset can't send headers.
+  if (isRemote(source)) return fetchBytes(source, options)
+  const asset = Asset.fromModule(source)
+  // Android release builds embed images as drawables, and expo-asset marks them
+  // downloaded with a bare resource name (enough for <Image>), which isn't a file.
+  // Download for real: that copies the resource into the cache.
+  if (asset.localUri && !asset.localUri.includes(':')) {
+    asset.downloaded = false
+    asset.localUri = null
+  }
+  await asset.downloadAsync()
+  if (!asset.localUri) {
+    throw new Error(`Live2D: failed to download asset ${describe(source)}`)
+  }
+  return new File(asset.localUri).arrayBuffer()
+}
+
+async function loadTexture(source: AssetSource, options: Live2DLoadOptions): Promise<SkImage> {
+  const bytes = new Uint8Array(await readAsset(source, options))
+  const image = decodeImage(Skia.Image, Skia.Data.fromBytes(bytes))
+  if (!image) {
+    throw new Error(`Live2D: failed to decode texture ${describe(source)}`)
+  }
+  return image
+}
+
+let nextModelId = 1
+
+/**
+ * Loads a model from its files, from a `require.context` of its folder, or
+ * from the URL of its `model3.json` (the files it lists are fetched next to it).
+ * `options` apply to every remote file.
+ */
+export async function loadLive2DModel(
+  input: Live2DModelSource | Live2DModelContext | string,
+  options: Live2DLoadOptions = {},
+): Promise<Live2DModel> {
+  const source =
+    typeof input === 'string'
+      ? await sourceFromUrl(input, options)
+      : isModelContext(input)
+        ? sourceFromContext(input)
+        : input
+  const [moc, textures] = await Promise.all([
+    readAsset(source.moc, options),
+    Promise.all(source.textures.map((t) => loadTexture(t, options))),
+  ])
+  const native = Live2dSkia.loadModel(moc, toCubismJson(source.settings))
+  if (source.physics) native.loadPhysics(toCubismJson(source.physics))
+  if (source.pose) native.loadPose(toCubismJson(source.pose))
+  for (const [group, motions] of Object.entries(source.motions ?? {})) {
+    motions.forEach((motion, i) => {
+      native.loadMotion(group, i, toCubismJson(motion))
+    })
+  }
+  for (const [name, expression] of Object.entries(source.expressions ?? {})) {
+    native.loadExpression(name, toCubismJson(expression))
+  }
+  // Apply the pose and the first idle motion's starting state.
+  native.update(0)
+
+  // Trilinear: models are usually drawn far smaller than their 2048px textures,
+  // and without mipmaps thin lines (hair, outlines) break up into jaggies.
+  const shaders = textures.map((t) =>
+    t.makeShaderOptions(TileMode.Clamp, TileMode.Clamp, FilterMode.Linear, MipmapMode.Linear),
+  )
+  const width = native.canvasWidth
+  const height = native.canvasHeight
+  const canvas: CanvasInfo = {
+    width,
+    height,
+    originX: native.originX,
+    originY: native.originY,
+    pixelsPerUnit: native.pixelsPerUnit,
+  }
+  setNativeTextures(native, textures, shaders)
+  const nativeDraw = createNativeDrawer(native, canvas)
+  const drawer = createDrawer(textures, shaders, canvas)
+  const draw = nativeDraw ?? (() => drawer(native.getDrawables()))
+  // Model pixels (y-down) to model units (y-up).
+  const toUnits = (x: number, y: number) =>
+    [
+      (x - canvas.originX) / canvas.pixelsPerUnit,
+      (canvas.originY - y) / canvas.pixelsPerUnit,
+    ] as const
+
+  return {
+    id: nextModelId++,
+    motion: (group, index, priority) => native.startMotion(group, index, priority),
+    expression: (name) => native.setExpression(name),
+    resetExpression: () => native.clearExpression(),
+    setParameter: (id, value) => native.setParameter(id, value),
+    resetParameter: (id) => native.clearParameter(id),
+    // Relative to the canvas center, -1..1, y-up.
+    focus: (x, y) => native.focus((x / width) * 2 - 1, 1 - (y / height) * 2),
+    resetFocus: () => native.focus(0, 0),
+    hitTest: (x, y) => native.hitTest(...toUnits(x, y)),
+    motionGroups: Object.keys(source.motions ?? {}),
+    expressionNames: Object.keys(source.expressions ?? {}),
+    native,
+    picture: draw(),
+    width,
+    height,
+    draw,
+    textures,
+    shaders,
+    canvas,
+  }
+}