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

package/src/rendering/drawer.ts

@@ -0,0 +1,256 @@
+// Records a model's drawables into Skia pictures. Everything here is a worklet,
+// so it can run on the JS thread (model.draw) or a background worklet runtime (<Live2D>).
+
+import type { DrawableData } from '../specs/react-native-live2d-skia.nitro'
+import { now } from '../utils/clock'
+import {
+  BlendMode,
+  type SkCanvas,
+  type SkImage,
+  Skia,
+  type SkPaint,
+  type SkPicture,
+  type SkPoint,
+  type SkRect,
+  type SkShader,
+  type SkVertices,
+  VertexMode,
+} from './skia'
+
+// Cubism constant flags (Live2DCubismCore.h).
+const csmBlendAdditive = 1 << 0
+const csmBlendMultiplicative = 1 << 1
+const csmIsInvertedMask = 1 << 3
+
+function blendModeOf(flags: number): number {
+  'worklet'
+  if (flags & csmBlendAdditive) return BlendMode.Plus
+  if (flags & csmBlendMultiplicative) return BlendMode.Multiply
+  return BlendMode.SrcOver
+}
+
+interface Mesh {
+  vertices: SkVertices
+  bounds: SkRect
+  shader: SkShader
+  /** The model-space positions this mesh was built from, to detect changes. */
+  positions: Float32Array
+}
+
+interface StaticMeshData {
+  texCoords: SkPoint[]
+  indices: number[]
+}
+
+function sameFloats(a: Float32Array, b: Float32Array): boolean {
+  'worklet'
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false
+  return true
+}
+
+/** Added to by a drawer when passed in, for frame stats. */
+export interface DrawStats {
+  /** Time spent building Skia vertices (`MakeVertices` and point arrays). */
+  meshMs: number
+  /** Meshes rebuilt because their vertices moved. */
+  meshesBuilt: number
+  /** `saveLayer`s for masks: two per masked drawable. */
+  layers: number
+}
+
+export interface CanvasInfo {
+  width: number
+  height: number
+  originX: number
+  originY: number
+  pixelsPerUnit: number
+}
+
+/** Records drawables into a picture. A mesh is rebuilt only when its vertices moved: building them is the costliest part of a frame. */
+export function createDrawer(
+  textures: SkImage[],
+  shaders: SkShader[],
+  { width, height, originX, originY, pixelsPerUnit }: CanvasInfo,
+): (drawables: DrawableData[], stats?: DrawStats) => SkPicture {
+  'worklet'
+  const bounds = Skia.XYWHRect(0, 0, width, height)
+  const paint = Skia.Paint()
+  paint.setAntiAlias(true)
+  const layerPaint = Skia.Paint()
+  const staticData = new Map<number, StaticMeshData>()
+  let lastMeshes = new Map<number, Mesh>()
+
+  const staticDataOf = (d: DrawableData, texture: SkImage): StaticMeshData => {
+    let data = staticData.get(d.index)
+    if (!data) {
+      const uv = new Float32Array(d.uvs)
+      const texW = texture.width()
+      const texH = texture.height()
+      const texCoords: SkPoint[] = []
+      for (let i = 0; i < uv.length; i += 2) {
+        // Cubism UVs are v-up.
+        texCoords.push({ x: uv[i]! * texW, y: (1 - uv[i + 1]!) * texH })
+      }
+      data = { texCoords, indices: Array.from(new Uint16Array(d.indices)) }
+      staticData.set(d.index, data)
+    }
+    return data
+  }
+
+  return (drawables, stats) => {
+    const byIndex = new Map(drawables.map((d) => [d.index, d]))
+
+    // Masks reuse the same meshes many times, so look each one up once per frame.
+    const meshes = new Map<number, Mesh | null>()
+    const meshOf = (index: number): Mesh | null => {
+      if (meshes.has(index)) return meshes.get(index)!
+      const d = byIndex.get(index)
+      const texture = d && textures[d.textureIndex]
+      const shader = d && shaders[d.textureIndex]
+      let mesh: Mesh | null = null
+      if (d && texture && shader && d.indices.byteLength > 0) {
+        const positions = new Float32Array(d.positions)
+        const last = lastMeshes.get(index)
+        if (last && sameFloats(last.positions, positions)) {
+          mesh = last
+        } else {
+          const start = stats ? now() : 0
+          const { texCoords, indices } = staticDataOf(d, texture)
+          const points: SkPoint[] = []
+          let minX = Infinity,
+            minY = Infinity,
+            maxX = -Infinity,
+            maxY = -Infinity
+          for (let i = 0; i < positions.length; i += 2) {
+            // Cubism is y-up in model units; Skia is y-down in pixels.
+            const x = originX + positions[i]! * pixelsPerUnit
+            const y = originY - positions[i + 1]! * pixelsPerUnit
+            points.push({ x, y })
+            minX = Math.min(minX, x)
+            maxX = Math.max(maxX, x)
+            minY = Math.min(minY, y)
+            maxY = Math.max(maxY, y)
+          }
+          mesh = {
+            vertices: Skia.MakeVertices(
+              VertexMode.Triangles,
+              points,
+              texCoords,
+              undefined,
+              indices,
+            ),
+            bounds: Skia.XYWHRect(minX, minY, maxX - minX, maxY - minY),
+            shader,
+            positions,
+          }
+          if (stats) {
+            stats.meshMs += now() - start
+            stats.meshesBuilt++
+          }
+        }
+      }
+      meshes.set(index, mesh)
+      return mesh
+    }
+
+    const drawMesh = (canvas: SkCanvas, mesh: Mesh, paint: SkPaint) => {
+      paint.setShader(mesh.shader)
+      // No per-vertex colors, so the vertex blend mode is unused; the shader alone colors the mesh.
+      canvas.drawVertices(mesh.vertices, BlendMode.Dst, paint)
+    }
+
+    const recorder = Skia.PictureRecorder()
+    const canvas = recorder.beginRecording(bounds)
+
+    for (const d of drawables) {
+      if (!d.visible || d.opacity <= 0) continue
+      const mesh = meshOf(d.index)
+      if (!mesh) continue
+
+      if (d.masks.length === 0) {
+        paint.setAlphaf(d.opacity)
+        paint.setBlendMode(blendModeOf(d.constantFlags))
+        drawMesh(canvas, mesh, paint)
+        continue
+      }
+
+      // Draw into a layer, cut it with the union of the masks, then composite
+      // the layer with the drawable's blend mode.
+      if (stats) stats.layers += 2
+      layerPaint.setBlendMode(blendModeOf(d.constantFlags))
+      canvas.saveLayer(layerPaint, mesh.bounds)
+      paint.setAlphaf(d.opacity)
+      paint.setBlendMode(BlendMode.SrcOver)
+      drawMesh(canvas, mesh, paint)
+
+      layerPaint.setBlendMode(
+        d.constantFlags & csmIsInvertedMask ? BlendMode.DstOut : BlendMode.DstIn,
+      )
+      canvas.saveLayer(layerPaint, mesh.bounds)
+      paint.setAlphaf(1)
+      for (const maskIndex of d.masks) {
+        const maskMesh = meshOf(maskIndex)
+        if (maskMesh) drawMesh(canvas, maskMesh, paint)
+      }
+      canvas.restore()
+      canvas.restore()
+    }
+    const picture = recorder.finishRecordingAsPicture()
+    // Free the meshes that were replaced or not used this frame. Pictures hold
+    // their own references, and the GC doesn't see this native memory.
+    const nextMeshes = new Map<number, Mesh>()
+    for (const [index, mesh] of meshes) if (mesh) nextMeshes.set(index, mesh)
+    for (const [index, mesh] of lastMeshes) {
+      if (nextMeshes.get(index) !== mesh) mesh.vertices.dispose()
+    }
+    lastMeshes = nextMeshes
+    return picture
+  }
+}
+
+/** Raw JSI methods of a native model built with Skia (cpp/drawing/SkiaDrawer.cpp). */
+interface NativeDrawing {
+  setTextures(shaders: SkShader[], sizes: number[]): void
+  drawTo(canvas: SkCanvas, wantStats: boolean): DrawStats | undefined
+}
+
+function nativeDrawing(native: object): NativeDrawing | null {
+  'worklet'
+  const n = native as Partial<NativeDrawing>
+  return typeof n.drawTo === 'function' && typeof n.setTextures === 'function'
+    ? (n as NativeDrawing)
+    : null
+}
+
+/** Hands the textures to the native drawer, if there is one. Call once per model. */
+export function setNativeTextures(native: object, textures: SkImage[], shaders: SkShader[]): void {
+  const drawing = nativeDrawing(native)
+  if (!drawing) return
+  drawing.setTextures(
+    shaders,
+    textures.flatMap((t) => [t.width(), t.height()]),
+  )
+}
+
+/** Like createDrawer, but drawn in C++ straight from the model. Null when not built with Skia. */
+export function createNativeDrawer(
+  native: object,
+  { width, height }: CanvasInfo,
+): ((stats?: DrawStats) => SkPicture) | null {
+  'worklet'
+  const drawing = nativeDrawing(native)
+  if (!drawing) return null
+  const bounds = Skia.XYWHRect(0, 0, width, height)
+  return (stats) => {
+    const recorder = Skia.PictureRecorder()
+    const canvas = recorder.beginRecording(bounds)
+    const s = drawing.drawTo(canvas, stats !== undefined)
+    if (stats && s) {
+      stats.meshMs += s.meshMs
+      stats.meshesBuilt += s.meshesBuilt
+      stats.layers += s.layers
+    }
+    return recorder.finishRecordingAsPicture()
+  }
+}

package/src/rendering/skia.ts

@@ -0,0 +1,114 @@
+// The Skia package in use: react-native-skia (v3) or @shopify/react-native-skia (v2).
+// Types are declared structurally rather than imported: the app type-checks these
+// sources and may have only one of the two packages.
+import type { ComponentType, ReactNode } from 'react'
+
+export interface SkPoint {
+  x: number
+  y: number
+}
+
+export interface SkRect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface SkShader {
+  dispose(): void
+}
+
+export interface SkPicture {
+  dispose(): void
+}
+
+export interface SkVertices {
+  dispose(): void
+}
+
+export interface SkImage {
+  width(): number
+  height(): number
+  makeShaderOptions(tx: number, ty: number, fm: number, mm: number): SkShader
+  dispose(): void
+}
+
+export interface SkPaint {
+  setAntiAlias(antiAlias: boolean): void
+  setAlphaf(alpha: number): void
+  setBlendMode(blendMode: number): void
+  setShader(shader: SkShader | null): void
+}
+
+export interface SkCanvas {
+  saveLayer(paint?: SkPaint, bounds?: SkRect | null): number
+  restore(): void
+  drawVertices(vertices: SkVertices, mode: number, paint: SkPaint): void
+}
+
+interface SkPictureRecorder {
+  beginRecording(bounds?: SkRect): SkCanvas
+  finishRecordingAsPicture(): SkPicture
+}
+
+interface SkData {
+  dispose(): void
+}
+
+interface SkiaApi {
+  XYWHRect(x: number, y: number, width: number, height: number): SkRect
+  Paint(): SkPaint
+  PictureRecorder(): SkPictureRecorder
+  MakeVertices(
+    mode: number,
+    positions: SkPoint[],
+    textures?: SkPoint[] | null,
+    colors?: undefined,
+    indices?: number[] | null,
+  ): SkVertices
+  Image: { MakeImageFromEncoded(data: SkData): SkImage | null }
+  Data: { fromBytes(bytes: Uint8Array): SkData }
+}
+
+interface SkiaModule {
+  Skia: SkiaApi
+  BlendMode: {
+    SrcOver: number
+    Dst: number
+    DstIn: number
+    DstOut: number
+    Plus: number
+    Multiply: number
+  }
+  VertexMode: { Triangles: number }
+  TileMode: { Clamp: number }
+  FilterMode: { Linear: number }
+  MipmapMode: { Linear: number }
+  Group: ComponentType<{
+    transform?: Record<string, number>[]
+    children?: ReactNode
+  }>
+  // A picture or a shared value of one (Reanimated).
+  Picture: ComponentType<{ picture: unknown }>
+}
+
+// Guarded requires: Metro (Expo enables optional dependencies) bundles the
+// missing one as a require that throws. v3 first: in a monorepo both can be
+// installed, and an app on v2 maps react-native-skia to it in its Metro config.
+function loadSkia(): SkiaModule {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require('react-native-skia') as SkiaModule
+  } catch {}
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require('@shopify/react-native-skia') as SkiaModule
+  } catch {}
+  throw new Error(
+    'react-native-live2d-skia needs react-native-skia (v3) or @shopify/react-native-skia (v2).',
+  )
+}
+
+export const { Skia, BlendMode, VertexMode, TileMode, FilterMode, MipmapMode, Group, Picture } =
+  loadSkia()

package/src/rendering/ticker/addToTicker.ts

@@ -0,0 +1,52 @@
+import { scheduleOnRN } from 'react-native-worklets'
+import { now } from '../../utils/clock'
+import { createDrawer, createNativeDrawer } from '../drawer'
+import { runFrame } from './loop'
+import { reportError, tickerState } from './state'
+import type { TickerModel, TickerView } from './types'
+
+/** Starts showing a model's frames in a view (call on the live2d runtime); stop with `view.running = false`. */
+export function addToTicker(model: TickerModel, view: TickerView) {
+  'worklet'
+  const ticker = tickerState()
+  let entry = ticker.entries.get(model.id)
+  if (!entry) {
+    try {
+      const nativeDraw = createNativeDrawer(model.native, model.canvas)
+      entry = {
+        native: model.native,
+        nativeDraw,
+        jsDraw: nativeDraw ? null : createDrawer(model.textures, model.shaders, model.canvas),
+        views: [],
+        frames: [],
+        frame: 0,
+        last: null,
+        statsStart: now(),
+        statsFrames: 0,
+        updateMs: 0,
+        drawablesMs: 0,
+        drawMs: 0,
+        drawStats: { meshMs: 0, meshesBuilt: 0, layers: 0 },
+      }
+    } catch (e) {
+      view.running.setBlocking(false)
+      scheduleOnRN(reportError, String((e as Error)?.stack ?? e))
+      return
+    }
+    ticker.entries.set(model.id, entry)
+  }
+  entry.views.push({ view, since: entry.frame })
+  // Joining a model that's already animating: show its newest frame right away.
+  const newest = entry.frames[entry.frames.length - 1]
+  if (newest) view.target.setBlocking({ frame: newest.frame, picture: newest.picture })
+  if (!ticker.running) {
+    ticker.running = true
+    ticker.nextFrameAt = 0
+    ticker.loopStatsStart = now()
+    const loop = () => {
+      const delay = runFrame()
+      if (delay !== null) setTimeout(loop, delay)
+    }
+    loop()
+  }
+}

package/src/rendering/ticker/constants.ts

@@ -0,0 +1,11 @@
+// Longest step per frame, so returning from the background doesn't jump motions and physics.
+export const MAX_DELTA_SECONDS = 0.1
+// How far drawing may run ahead of the slowest view's UI thread. Beyond it the
+// model waits, e.g. while the app is in the background and the UI thread doesn't draw.
+export const MAX_FRAMES_AHEAD = 4
+export const DEFAULT_FRAME_MS = 1000 / 60
+export const MIN_FRAME_MS = 1000 / 144
+export const MAX_FRAME_MS = 1000 / 30
+export const STATS_INTERVAL_MS = 1000
+// A capped model draws on the first tick at least this close to its interval.
+export const CAP_TOLERANCE_MS = 1

package/src/rendering/ticker/frames.ts

@@ -0,0 +1,35 @@
+import type { Entry, Slot, Ticker } from './state'
+
+// The oldest frame a view may be showing.
+export function oldestShown(slot: Slot) {
+  'worklet'
+  const shown = slot.view.shown.getDirty()
+  return shown >= 0 ? shown : slot.since
+}
+
+// A view stopped (paused or unmounted) but keeps showing its last frame, and
+// its UI thread may still take a newer one already published. Those frames are
+// handed over to it: dropped from the entry unfreed, for the GC to collect.
+export function releaseView(entry: Entry, slot: Slot) {
+  'worklet'
+  const oldest = oldestShown(slot)
+  entry.frames = entry.frames.filter((f) => f.frame < oldest)
+}
+
+// Frees frames older than every view's shown frame, keeping one more: the JS
+// thread may have just read the shown picture for a redraw.
+export function freeFrames(entry: Entry) {
+  'worklet'
+  const keepFrom = Math.min(...entry.views.map(oldestShown)) - 1
+  while (entry.frames.length > 0 && entry.frames[0]!.frame < keepFrom) {
+    entry.frames.shift()!.picture.dispose()
+  }
+}
+
+export function stopEntry(ticker: Ticker, id: number, entry: Entry) {
+  'worklet'
+  // Its views are released: no view can show what's left.
+  for (const f of entry.frames) f.picture.dispose()
+  entry.frames = []
+  ticker.entries.delete(id)
+}

package/src/rendering/ticker/index.ts

@@ -0,0 +1,5 @@
+// One animation loop for every <Live2D> on the live2d worklet runtime: each
+// frame, every shown model is updated and drawn once, in one pass. Everything
+// here runs on that runtime, and its state lives in the runtime's globalThis.
+export { addToTicker } from './addToTicker'
+export type { Live2DFrameStats, PublishedFrame, TickerModel, TickerView } from './types'

package/src/rendering/ticker/loop.ts

@@ -0,0 +1,115 @@
+import { scheduleOnRN } from 'react-native-worklets'
+import { now } from '../../utils/clock'
+import type { SkPicture } from '../skia'
+import {
+  CAP_TOLERANCE_MS,
+  DEFAULT_FRAME_MS,
+  MAX_DELTA_SECONDS,
+  MAX_FRAME_MS,
+  MAX_FRAMES_AHEAD,
+  MIN_FRAME_MS,
+  STATS_INTERVAL_MS,
+} from './constants'
+import { freeFrames, oldestShown, releaseView, stopEntry } from './frames'
+import { type Entry, reportError, tickerState } from './state'
+import { reportEntry } from './stats'
+
+function drawEntry(entry: Entry, frameStart: number, wantStats: boolean) {
+  'worklet'
+  const dt = entry.last === null ? 0 : Math.min((frameStart - entry.last) / 1000, MAX_DELTA_SECONDS)
+  entry.last = frameStart
+  // Timed from here: frameStart is when the whole loop frame began.
+  const start = wantStats ? now() : 0
+  entry.native.update(dt)
+  const updated = wantStats ? now() : 0
+  const stats = wantStats ? entry.drawStats : undefined
+  let copied = updated
+  let picture: SkPicture
+  if (entry.nativeDraw) {
+    picture = entry.nativeDraw(stats)
+  } else {
+    const drawables = entry.native.getDrawables()
+    copied = wantStats ? now() : 0
+    picture = entry.jsDraw!(drawables, stats)
+  }
+  entry.frame++
+  for (const { view } of entry.views) {
+    view.target.setBlocking({ frame: entry.frame, picture })
+  }
+  entry.frames.push({ frame: entry.frame, picture })
+  if (wantStats) {
+    const end = now()
+    entry.statsFrames++
+    entry.updateMs += updated - start
+    entry.drawablesMs += copied - updated
+    entry.drawMs += end - copied
+  }
+}
+
+/** Updates and draws every model once. Returns the delay until the next frame, or null to stop. */
+export function runFrame(): number | null {
+  'worklet'
+  const ticker = tickerState()
+  const frameStart = now()
+  let displayMs = 0
+  for (const [id, entry] of ticker.entries) {
+    const stopped = entry.views.filter((s) => !s.view.running.getDirty())
+    if (stopped.length > 0) {
+      for (const slot of stopped) releaseView(entry, slot)
+      entry.views = entry.views.filter((s) => !stopped.includes(s))
+    }
+    if (entry.views.length === 0) {
+      stopEntry(ticker, id, entry)
+      continue
+    }
+    freeFrames(entry)
+    for (const { view } of entry.views) {
+      const ms = view.displayMs.getDirty()
+      if (ms > 0 && (displayMs === 0 || ms < displayMs)) displayMs = ms
+    }
+    // The fastest view sets the model's frame rate.
+    const capMs = Math.min(...entry.views.map((s) => s.view.capMs))
+    if (entry.last !== null && frameStart - entry.last < capMs - CAP_TOLERANCE_MS) {
+      continue
+    }
+    // Wait for a UI thread that's behind, rather than draw frames it won't show.
+    if (entry.frame - Math.min(...entry.views.map(oldestShown)) >= MAX_FRAMES_AHEAD) {
+      continue
+    }
+    const wantStats = entry.views.some((s) => s.view.report !== null)
+    try {
+      drawEntry(entry, frameStart, wantStats)
+    } catch (e) {
+      // An uncaught error on this runtime aborts the app: drop the model instead.
+      for (const slot of entry.views) {
+        slot.view.running.setBlocking(false)
+        releaseView(entry, slot)
+      }
+      stopEntry(ticker, id, entry)
+      scheduleOnRN(reportError, String((e as Error)?.stack ?? e))
+    }
+  }
+
+  const end = now()
+  ticker.loopWorkMs += end - frameStart
+  ticker.loopFrames++
+  const interval = Math.min(MAX_FRAME_MS, Math.max(MIN_FRAME_MS, displayMs || DEFAULT_FRAME_MS))
+  for (const entry of ticker.entries.values()) {
+    const capMs = Math.min(...entry.views.map((s) => s.view.capMs))
+    reportEntry(ticker, entry, end, Math.max(interval, capMs))
+  }
+  if (end - ticker.loopStatsStart >= STATS_INTERVAL_MS) {
+    ticker.loopStatsStart = end
+    ticker.loopWorkMs = 0
+    ticker.loopFrames = 0
+  }
+
+  if (ticker.entries.size === 0) {
+    ticker.running = false
+    return null
+  }
+  ticker.nextFrameAt += interval
+  // More than a frame behind (a stall, or the first frame): start over from now.
+  if (ticker.nextFrameAt < end - interval) ticker.nextFrameAt = end + interval
+  return Math.max(0, ticker.nextFrameAt - end)
+}

package/src/rendering/ticker/state.ts

@@ -0,0 +1,65 @@
+import type { Live2DModel as NativeModel } from '../../specs/react-native-live2d-skia.nitro'
+import type { createDrawer, DrawStats } from '../drawer'
+import type { SkPicture } from '../skia'
+import type { TickerView } from './types'
+
+export interface Slot {
+  view: TickerView
+  /** The entry's newest frame when the view joined: the oldest it can show before acking one. */
+  since: number
+}
+
+export interface Frame {
+  frame: number
+  picture: SkPicture
+}
+
+export interface Entry {
+  native: NativeModel
+  /** Draws the model's current state: in C++ when built with Skia, else in JS. */
+  nativeDraw: ((stats?: DrawStats) => SkPicture) | null
+  jsDraw: ReturnType<typeof createDrawer> | null
+  views: Slot[]
+  /**
+   * Frames a view may still show, oldest first. Freed explicitly once no view
+   * can show them: the GC doesn't see their native memory.
+   */
+  frames: Frame[]
+  frame: number
+  last: number | null
+  statsStart: number
+  statsFrames: number
+  updateMs: number
+  drawablesMs: number
+  drawMs: number
+  drawStats: DrawStats
+}
+
+export interface Ticker {
+  entries: Map<number, Entry>
+  running: boolean
+  /** When the next frame is due (absolute, so late timer wake-ups don't add up). */
+  nextFrameAt: number
+  loopStatsStart: number
+  loopWorkMs: number
+  loopFrames: number
+}
+
+export const reportError = (message: string) =>
+  console.error('[react-native-live2d-skia] animation stopped:', message)
+
+export function tickerState(): Ticker {
+  'worklet'
+  const global = globalThis as unknown as { __live2dSkiaTicker?: Ticker }
+  if (!global.__live2dSkiaTicker) {
+    global.__live2dSkiaTicker = {
+      entries: new Map(),
+      running: false,
+      nextFrameAt: 0,
+      loopStatsStart: 0,
+      loopWorkMs: 0,
+      loopFrames: 0,
+    }
+  }
+  return global.__live2dSkiaTicker
+}

package/src/rendering/ticker/stats.ts

@@ -0,0 +1,36 @@
+import { scheduleOnRN } from 'react-native-worklets'
+import { STATS_INTERVAL_MS } from './constants'
+import type { Entry, Ticker } from './state'
+import type { Live2DFrameStats } from './types'
+
+export function reportEntry(ticker: Ticker, entry: Entry, at: number, frameMs: number) {
+  'worklet'
+  const elapsed = at - entry.statsStart
+  if (elapsed < STATS_INTERVAL_MS || entry.statsFrames === 0) return
+  const n = entry.statsFrames
+  const s = entry.drawStats
+  const stats: Live2DFrameStats = {
+    fps: (n * 1000) / elapsed,
+    targetFps: 1000 / frameMs,
+    workMs: (entry.updateMs + entry.drawablesMs + entry.drawMs) / n,
+    updateMs: entry.updateMs / n,
+    drawablesMs: entry.drawablesMs / n,
+    drawMs: entry.drawMs / n,
+    meshMs: s.meshMs / n,
+    meshesBuilt: s.meshesBuilt / n,
+    layers: s.layers / n,
+    models: ticker.entries.size,
+    loopWorkMs: ticker.loopFrames > 0 ? ticker.loopWorkMs / ticker.loopFrames : 0,
+  }
+  for (const { view } of entry.views) {
+    if (view.report) scheduleOnRN(view.report, stats)
+  }
+  entry.statsStart = at
+  entry.statsFrames = 0
+  entry.updateMs = 0
+  entry.drawablesMs = 0
+  entry.drawMs = 0
+  s.meshMs = 0
+  s.meshesBuilt = 0
+  s.layers = 0
+}