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

package/src/loader/modelContext.ts

@@ -0,0 +1,80 @@
+import type { CubismJson, Live2DModelSource } from './loadModel'
+
+/** A Metro `require.context` of a model's folder; the path must be a string literal for Metro to bundle it. */
+export interface Live2DModelContext {
+  keys(): string[]
+  (id: string): unknown
+}
+
+export interface Model3Json {
+  FileReferences?: {
+    Moc?: string
+    Textures?: string[]
+    Physics?: string
+    Pose?: string
+    Motions?: Record<string, { File: string }[]>
+    Expressions?: { Name: string; File: string }[]
+  }
+}
+
+export function isModelContext(
+  source: Live2DModelSource | Live2DModelContext,
+): source is Live2DModelContext {
+  return typeof source === 'function'
+}
+
+/** Resolves `file` relative to the folder of `from`, a context key or a URL. */
+export function resolvePath(from: string, file: string): string {
+  const parts = from
+    .replace(/[?#].*$/, '')
+    .split('/')
+    .slice(0, -1)
+  for (const part of file.split('/')) {
+    if (part === '..') parts.pop()
+    else if (part !== '.' && part !== '') parts.push(part)
+  }
+  return parts.join('/')
+}
+
+export function sourceFromContext(context: Live2DModelContext): Live2DModelSource {
+  const keys = context.keys()
+  const model3Keys = keys.filter((k) => k.endsWith('.model3.json'))
+  if (model3Keys.length !== 1) {
+    throw new Error(
+      `Live2D: expected one .model3.json in the require.context, found ${
+        model3Keys.length === 0 ? 'none' : model3Keys.join(', ')
+      }`,
+    )
+  }
+  const model3Key = model3Keys[0]!
+  const settings = context(model3Key) as Model3Json
+  const refs = settings.FileReferences ?? {}
+
+  const load = <T>(file: string): T => {
+    const key = resolvePath(model3Key, file)
+    if (!keys.includes(key)) {
+      throw new Error(
+        `Live2D: ${file} (listed in ${model3Key}) isn't in the require.context. Check its filter.`,
+      )
+    }
+    return context(key) as T
+  }
+
+  if (!refs.Moc) throw new Error(`Live2D: ${model3Key} has no FileReferences.Moc`)
+  return {
+    settings: settings as CubismJson,
+    moc: load(refs.Moc),
+    textures: (refs.Textures ?? []).map((t) => load(t)),
+    physics: refs.Physics ? load(refs.Physics) : undefined,
+    pose: refs.Pose ? load(refs.Pose) : undefined,
+    motions: Object.fromEntries(
+      Object.entries(refs.Motions ?? {}).map(([group, motions]) => [
+        group,
+        motions.map((m) => load<CubismJson>(m.File)),
+      ]),
+    ),
+    expressions: Object.fromEntries(
+      (refs.Expressions ?? []).map((e) => [e.Name, load<CubismJson>(e.File)]),
+    ),
+  }
+}

package/src/loader/modelUrl.ts

@@ -0,0 +1,112 @@
+import { fetch } from 'expo/fetch'
+import type { CubismJson, Live2DModelSource } from './loadModel'
+import { type Model3Json, resolvePath } from './modelContext'
+
+/** How remote model files are requested. */
+export interface Live2DLoadOptions {
+  /** Sent with every request for a remote file, e.g. `{ Authorization: 'Bearer …' }`. */
+  headers?: Record<string, string>
+  /**
+   * Gives the URL to request for a file the `model3.json` lists, e.g. to sign
+   * each one through your backend. `url` is resolved next to the `model3.json`,
+   * without a query; `file` is the path as listed. Replaces the default, which
+   * reuses the `model3.json` URL's query (e.g. a token) for files on its host.
+   */
+  resolveUrl?: (url: string, file: string) => string | Promise<string>
+}
+
+const ABSOLUTE = /^[a-z][a-z0-9+.-]*:\/\//i
+
+export function isRemote(source: unknown): source is string {
+  return typeof source === 'string' && /^https?:\/\//i.test(source)
+}
+
+/** A URL without its query and hash, which can hold tokens: for error messages. */
+export function redactUrl(url: string): string {
+  return url.replace(/[?#].*$/, '')
+}
+
+const origin = (url: string) => /^[a-z][a-z0-9+.-]*:\/\/[^/?#]*/i.exec(url)?.[0]
+const queryOf = (url: string) => /\?[^#]*/.exec(url)?.[0] ?? ''
+
+async function request(url: string, options: Live2DLoadOptions) {
+  let res: Awaited<ReturnType<typeof fetch>>
+  try {
+    res = await fetch(url, { headers: options.headers })
+  } catch (e) {
+    const reason = e instanceof Error ? e.message : String(e)
+    throw new Error(`Live2D: failed to fetch ${redactUrl(url)} (${reason})`)
+  }
+  if (!res.ok) {
+    throw new Error(`Live2D: failed to fetch ${redactUrl(url)} (${res.status})`)
+  }
+  return res
+}
+
+export async function fetchBytes(url: string, options: Live2DLoadOptions): Promise<ArrayBuffer> {
+  return (await request(url, options)).arrayBuffer()
+}
+
+async function fetchJson<T>(url: string, options: Live2DLoadOptions): Promise<T> {
+  return (await (await request(url, options)).json()) as T
+}
+
+// Escapes a model3.json file path for a URL: names can have spaces. Already
+// escaped segments are decoded first, so they aren't escaped twice.
+function encodePath(file: string): string {
+  return file
+    .split('/')
+    .map((part) => {
+      if (part === '.' || part === '..') return part
+      try {
+        return encodeURIComponent(decodeURIComponent(part))
+      } catch {
+        return encodeURIComponent(part)
+      }
+    })
+    .join('/')
+}
+
+/** Fetches a `model3.json` and the JSON files it lists; the moc and textures stay URLs. */
+export async function sourceFromUrl(
+  url: string,
+  options: Live2DLoadOptions = {},
+): Promise<Live2DModelSource> {
+  const settings = await fetchJson<Model3Json>(url, options)
+  const refs = settings.FileReferences ?? {}
+  if (!refs.Moc) {
+    throw new Error(`Live2D: ${redactUrl(url)} has no FileReferences.Moc`)
+  }
+
+  const query = queryOf(url)
+  const resolve = async (file: string): Promise<string> => {
+    const plain = ABSOLUTE.test(file) ? file : resolvePath(url, encodePath(file))
+    if (options.resolveUrl) return options.resolveUrl(plain, file)
+    // The model3.json's query (e.g. a signing token) goes to its own host only.
+    if (!query || origin(plain) !== origin(url)) return plain
+    return plain.includes('?') ? `${plain}&${query.slice(1)}` : plain + query
+  }
+  const json = async (file: string) => fetchJson<CubismJson>(await resolve(file), options)
+
+  const motionGroups = Object.entries(refs.Motions ?? {})
+  const [moc, textures, physics, pose, motions, expressions] = await Promise.all([
+    resolve(refs.Moc),
+    Promise.all((refs.Textures ?? []).map(resolve)),
+    refs.Physics ? json(refs.Physics) : undefined,
+    refs.Pose ? json(refs.Pose) : undefined,
+    Promise.all(motionGroups.map(([, list]) => Promise.all(list.map((m) => json(m.File))))),
+    Promise.all((refs.Expressions ?? []).map((e) => json(e.File))),
+  ])
+
+  return {
+    settings: settings as CubismJson,
+    moc,
+    textures,
+    physics,
+    pose,
+    motions: Object.fromEntries(motionGroups.map(([group], i) => [group, motions[i]!])),
+    expressions: Object.fromEntries(
+      (refs.Expressions ?? []).map((e, i) => [e.Name, expressions[i]!]),
+    ),
+  }
+}

package/src/native.ts

@@ -0,0 +1,4 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import type { Live2dSkia as Live2dSkiaSpec } from './specs/react-native-live2d-skia.nitro'
+
+export const Live2dSkia = NitroModules.createHybridObject<Live2dSkiaSpec>('Live2dSkia')

package/src/rendering/decodeImage.ts

@@ -0,0 +1,12 @@
+import type { SkData, SkImage, SkImageFactory } from './skiaTypes'
+
+/** Null when the data can't be decoded. Throws when this Skia has neither factory method. */
+export function decodeImage(factory: SkImageFactory, data: SkData): SkImage | null {
+  if ('MakeFromEncoded' in factory && factory.MakeFromEncoded) return factory.MakeFromEncoded(data)
+  if ('MakeImageFromEncoded' in factory && factory.MakeImageFromEncoded) {
+    return factory.MakeImageFromEncoded(data)
+  }
+  throw new Error(
+    'Live2D: this version of react-native-skia has neither Image.MakeFromEncoded nor Image.MakeImageFromEncoded',
+  )
+}

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,26 @@
+// 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 { SkiaModule } from './skiaTypes'
+
+export type * from './skiaTypes'
+
+// 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/skiaTypes.ts

@@ -0,0 +1,99 @@
+// The part of react-native-skia that this package uses, as structural types, with no import of
+// Skia itself. rendering/skia.ts loads the real thing, and scripts/skiaCompat.ts checks every
+// supported Skia version against these types.
+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 | null, bounds?: SkRect | null): number
+  restore(): void
+  drawVertices(vertices: SkVertices, mode: number, paint: SkPaint): void
+}
+
+export interface SkPictureRecorder {
+  beginRecording(bounds?: SkRect): SkCanvas
+  finishRecordingAsPicture(): SkPicture
+}
+
+export interface SkData {
+  dispose(): void
+}
+
+// Skia 3.8 renamed MakeImageFromEncoded to MakeFromEncoded; v2 and older v3 only have the old name.
+export type SkImageFactory =
+  | { MakeFromEncoded(data: SkData): SkImage | null }
+  | { MakeImageFromEncoded(data: SkData): SkImage | null }
+
+export 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: SkImageFactory
+  Data: { fromBytes(bytes: Uint8Array): SkData }
+}
+
+export 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 }>
+}

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)
+}