@nayan-ui/engine 0.0.0-stage → 1.0.0-beta.3

package/lib/module/render/GameView.js

@@ -0,0 +1,249 @@
+"use strict";
+
+import { useEffect, useMemo, useRef } from 'react';
+import NativeEngine from '../native/NativeNayanEngine';
+import { MAX_MESHES } from "../types.js";
+import { follow, shake } from "./camera.js";
+import { createTouchResponder, pixelRatio, Surface, useActive } from './host';
+import { getMeshIdLimit, uploadBuiltInMeshes } from "./meshes.js";
+import { AutoQuality, median, QUALITY_LEVELS } from "./quality.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_BACKGROUND = [0.04, 0.05, 0.09];
+const FRAME_LEN = 26; // ENGINE_FRAME_LEN
+const WHITE = [1, 1, 1];
+let nextSurface = 1;
+const defaultCamera = () => ({
+  eye: [0, 40, 60],
+  target: [0, 0, 0],
+  fov: Math.PI / 3
+});
+const defaultLight = () => ({
+  direction: [0.4, 0.8, 0.5],
+  ambient: 0.35
+});
+export function GameView(props) {
+  const {
+    source,
+    camera,
+    light,
+    background,
+    fog,
+    style
+  } = props;
+  const active = useActive();
+  // Latest props, read from the frame loop and touch handlers without restarting them.
+  const live = useRef({
+    props,
+    camera: camera ?? defaultCamera(),
+    light: light ?? defaultLight(),
+    environment: {
+      background: background ?? DEFAULT_BACKGROUND,
+      fog: fog ?? 0
+    }
+  });
+  live.current.props = props;
+  if (camera) live.current.camera = camera;
+  if (light) live.current.light = light;
+  live.current.environment = {
+    background: background ?? DEFAULT_BACKGROUND,
+    fog: fog ?? 0
+  };
+  const touch = useMemo(() => createTouchResponder(() => live.current.props), []);
+  useEffect(() => touch.dispose, [touch]);
+  useEffect(() => {
+    if (props.paused || !active) touch.cancel();
+  }, [touch, props.paused, active]);
+  const surfaceId = useMemo(() => nextSurface++, []);
+  const size = useRef({
+    width: 0,
+    height: 0
+  });
+  // The automatic quality outlives pauses, settings sheets and resumes; only a new source starts over.
+  const autoQuality = useRef(null);
+  useEffect(() => {
+    if (props.paused || !active) return;
+    const native = NativeEngine;
+    const report = error => {
+      const e = error instanceof Error ? error : new Error(String(error));
+      (live.current.props.onError ?? (x => console.error(`GameView: ${x.message}`)))(e);
+    };
+    if (!native) {
+      report(new Error('the native engine is not linked into this build'));
+      return;
+    }
+    uploadBuiltInMeshes();
+    let alive = true;
+    let raf = 0;
+    let errors = 0;
+    if (autoQuality.current?.source !== source) autoQuality.current = {
+      source,
+      auto: new AutoQuality()
+    };
+    const auto = autoQuality.current.auto;
+    const chosen = () => {
+      const setting = live.current.props.quality ?? 'auto';
+      return setting === 'auto' ? auto.quality : setting;
+    };
+    const followed = [0, 0, 0];
+    const shaken = {
+      eye: [0, 0, 0],
+      target: [0, 0, 0],
+      fov: 1
+    };
+    const frameData = new Float64Array(FRAME_LEN);
+    const viewProj = new Float32Array(16);
+    // Sources without texture regions show whole textures.
+    const wholeRegions = s => s.regions ?? new Float32Array(Math.max(1, s.capacity) * 4).map((_, i) => i % 4 < 2 ? 0 : 1);
+    const regions = wholeRegions(source);
+    // Instances actually packed (hidden ones are left out): the furthest range end, at most `count`.
+    // Only the mesh ids in use can have instances, in each half (opaque, then see-through). The
+    // see-through half starts halfway through the ranges, wherever that is (a native core built for
+    // fewer mesh ids has a shorter table).
+    const drawn = s => {
+      const r = s.ranges;
+      const buckets = r.length >> 1;
+      const limit = getMeshIdLimit();
+      const opaqueStop = Math.min(limit, buckets);
+      const half = Math.min(MAX_MESHES, buckets >> 1);
+      const clearStop = Math.min(half + limit, buckets);
+      let end = 0;
+      for (let i = 1, stop = opaqueStop * 2; i < stop; i += 2) {
+        const count = r[i];
+        if (count > 0 && r[i - 1] + count > end) end = r[i - 1] + count;
+      }
+      for (let i = half * 2 + 1, stop = clearStop * 2; i < stop; i += 2) {
+        const count = r[i];
+        if (count > 0 && r[i - 1] + count > end) end = r[i - 1] + count;
+      }
+      return Math.min(s.count, end);
+    };
+    let overlay = null;
+    let last = 0;
+    let frames = 0;
+    let fpsStart = 0;
+    let updateTime = 0;
+    let renderTime = 0;
+    // This second's frame intervals and draw times: the quality picker looks at their medians, so a
+    // single hiccup (garbage collection, a busy JS frame) never costs quality.
+    const intervals = [];
+    const draws = [];
+    // Game time starts with the first frame actually on screen: until then `onUpdate` gets dt = 0, so
+    // intros and animations aren't over before the surface (attached during the screen's transition) shows.
+    let shown = false;
+    const frame = now => {
+      if (!alive) return;
+      raf = requestAnimationFrame(frame);
+      if (!last) last = fpsStart = now;
+      if (now > last) intervals.push(now - last);
+      const dt = shown ? Math.min((now - last) / 1000, 0.1) : 0;
+      last = now;
+      const {
+        props: current,
+        camera,
+        light,
+        environment
+      } = live.current;
+      const t0 = performance.now();
+      current.onUpdate?.(dt);
+      updateTime += performance.now() - t0;
+      follow(camera, source, followed, dt);
+      const view = shake(camera, shaken, dt);
+      const quality = chosen();
+      const level = QUALITY_LEVELS[quality];
+      const {
+        width,
+        height
+      } = size.current;
+      // Phones' GPUs are fill-rate bound: cap the pixels drawn rather than match a 3x+ screen.
+      const ratio = Math.min(pixelRatio(), level.maxPixelRatio);
+      const f = frameData;
+      f.set(view.eye, 0);
+      f.set(view.target, 3);
+      f[6] = view.fov;
+      f[7] = view.ortho ?? 0;
+      f.set(light.direction, 8);
+      f[11] = light.ambient;
+      f[12] = light.shadows ?? true ? 1 : 0;
+      f[13] = light.shadowExtent ?? 30;
+      // Exactly three channels each: either color may carry an alpha that must not spill over.
+      const lightColor = light.color ?? WHITE;
+      f[14] = lightColor[0];
+      f[15] = lightColor[1];
+      f[16] = lightColor[2];
+      const sky = environment.background;
+      f[17] = sky[0];
+      f[18] = sky[1];
+      f[19] = sky[2];
+      f[20] = environment.fog;
+      f[21] = Math.round(width * ratio);
+      f[22] = Math.round(height * ratio);
+      f[23] = level.samples;
+      f[24] = level.shadowSize;
+      f[25] = level.softShadows ? 1 : 0;
+      const t1 = performance.now();
+      const layer = current.overlay;
+      if (layer) {
+        if (overlay?.source !== layer) overlay = {
+          source: layer,
+          regions: wholeRegions(layer)
+        };
+        native.renderOverlay(surfaceId, layer.matrices.buffer, layer.colors.buffer, overlay.regions.buffer, layer.ranges.buffer, drawn(layer), width, height);
+      } else if (overlay) {
+        overlay = null;
+        native.renderOverlay(surfaceId, regions.buffer, regions.buffer, regions.buffer, regions.buffer, 0, 0, 0); // removes it
+      }
+      const rendered = native.renderFrame(surfaceId, f.buffer, source.matrices.buffer, source.colors.buffer, regions.buffer, source.ranges.buffer, drawn(source), viewProj.buffer, source.nativeWorld ?? -1);
+      const drawMs = performance.now() - t1;
+      renderTime += drawMs;
+      draws.push(drawMs);
+      if (rendered === 1) {
+        shown = true;
+        source.setView?.(viewProj, width, height);
+      } else if (rendered < 0 && errors++ < 3) {
+        report(new Error(native.renderError() || 'rendering failed'));
+      }
+      frames++;
+      if (now - fpsStart >= 1000) {
+        auto.report(now, {
+          frameMs: median(intervals),
+          renderMs: median(draws)
+        });
+        intervals.length = 0;
+        draws.length = 0;
+        current.onStats?.({
+          fps: frames * 1000 / (now - fpsStart),
+          updateMs: updateTime / frames,
+          renderMs: renderTime / frames,
+          quality,
+          backend: native.renderBackend()
+        });
+        frames = 0;
+        updateTime = 0;
+        renderTime = 0;
+        fpsStart = now;
+      }
+    };
+    raf = requestAnimationFrame(frame);
+    return () => {
+      alive = false;
+      cancelAnimationFrame(raf);
+    };
+    // A new source or resuming a paused view restarts drawing; other props are read live.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source, props.paused, active]);
+  const touchable = props.onTap || props.onSwipe || props.onDrag || props.onLongPress || props.onPinch || props.onOverlayTouch;
+  return /*#__PURE__*/_jsx(Surface, {
+    surfaceId: surfaceId,
+    style: style,
+    onSize: (width, height) => {
+      size.current = {
+        width,
+        height
+      };
+    },
+    onError: error => (live.current.props.onError ?? console.error)(error),
+    touch: touchable ? touch : undefined,
+    onPrimaryAction: props.onPrimaryAction ? () => live.current.props.onPrimaryAction?.() : undefined
+  });
+}
+//# sourceMappingURL=GameView.js.map

package/lib/module/render/camera.js

@@ -0,0 +1,34 @@
+"use strict";
+
+// Camera helpers: follow an entity, and shake the camera on impacts.
+
+/** `camera.follow`: ease the target toward the entity (where it was last drawn) and keep the eye at the offset. */
+export function follow(camera, source, out, dt) {
+  const f = camera.follow;
+  if (!f || !('worldPosition' in source) || !source.worldPosition(f.target, out)) return;
+  const smoothing = f.smoothing ?? 0.15;
+  const k = smoothing > 0 ? 1 - Math.exp(-dt / smoothing) : 1;
+  for (let i = 0; i < 3; i++) {
+    camera.target[i] = camera.target[i] + (out[i] - camera.target[i]) * k;
+    camera.eye[i] = camera.target[i] + f.offset[i];
+  }
+}
+
+/** `camera.shake`: a jittered copy of the camera; the strength fades by itself. */
+export function shake(camera, out, dt) {
+  const strength = camera.shake ?? 0;
+  if (strength <= 0.001) {
+    if (strength) camera.shake = 0;
+    return camera;
+  }
+  camera.shake = strength * Math.exp(-dt * 8);
+  out.fov = camera.fov;
+  out.ortho = camera.ortho;
+  for (let i = 0; i < 3; i++) {
+    const jitter = (Math.random() * 2 - 1) * strength;
+    out.eye[i] = camera.eye[i] + jitter;
+    out.target[i] = camera.target[i] + jitter;
+  }
+  return out;
+}
+//# sourceMappingURL=camera.js.map

package/lib/module/render/host.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { AppState, PixelRatio, requireNativeComponent, StyleSheet, View } from 'react-native';
+import { createTouchResponder } from "./touch.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const EngineSurface = requireNativeComponent('NayanEngineSurface');
+export { createTouchResponder };
+export const pixelRatio = () => PixelRatio.get();
+export function useActive() {
+  const [active, setActive] = useState(AppState.currentState !== 'background' && AppState.currentState !== 'inactive');
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', state => setActive(state === 'active'));
+    return () => subscription.remove();
+  }, []);
+  return active;
+}
+export function Surface({
+  surfaceId,
+  style,
+  onSize,
+  touch
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.canvas, style],
+    onLayout: e => onSize(e.nativeEvent.layout.width, e.nativeEvent.layout.height),
+    ...touch?.responder.panHandlers,
+    children: /*#__PURE__*/_jsx(EngineSurface, {
+      surfaceId: surfaceId,
+      style: styles.canvas
+    })
+  });
+}
+const styles = StyleSheet.create({
+  canvas: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=host.js.map

package/lib/module/render/host.web.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { PRIMARY_INPUT_EVENT } from "../input/keyboard.js";
+import { attachCanvas, detachCanvas } from "../native/NativeNayanEngine.web.js";
+import { createTouchResponder } from "./touch.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export { createTouchResponder };
+export const pixelRatio = () => typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1;
+export function useActive() {
+  const [active, setActive] = useState(typeof document === 'undefined' || !document.hidden);
+  useEffect(() => {
+    const changed = () => setActive(!document.hidden);
+    document.addEventListener('visibilitychange', changed);
+    return () => document.removeEventListener('visibilitychange', changed);
+  }, []);
+  return active;
+}
+export function Surface({
+  surfaceId,
+  style,
+  onSize,
+  onError,
+  touch,
+  onPrimaryAction
+}) {
+  const parent = useRef(null);
+  const canvas = useRef(null);
+  const live = useRef({
+    onSize,
+    onError,
+    touch,
+    onPrimaryAction
+  });
+  live.current = {
+    onSize,
+    onError,
+    touch,
+    onPrimaryAction
+  };
+  useEffect(() => {
+    let alive = true;
+    const measure = () => {
+      if (!alive || !parent.current) return;
+      const rect = parent.current.getBoundingClientRect();
+      live.current.onSize(rect.width, rect.height);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(parent.current);
+    void attachCanvas(surfaceId, canvas.current).then(() => {
+      if (!alive) detachCanvas(surfaceId);
+    }).catch(error => {
+      if (alive) live.current.onError(error instanceof Error ? error : new Error(String(error)));
+    });
+    const cancel = () => live.current.touch?.cancel();
+    const primary = event => {
+      if (live.current.onPrimaryAction) {
+        event.preventDefault();
+        live.current.onPrimaryAction();
+      }
+    };
+    const element = parent.current;
+    element.addEventListener(PRIMARY_INPUT_EVENT, primary);
+    const visibility = () => {
+      if (document.hidden) cancel();
+    };
+    window.addEventListener('blur', cancel);
+    document.addEventListener('visibilitychange', visibility);
+    return () => {
+      alive = false;
+      observer.disconnect();
+      cancel();
+      element.removeEventListener(PRIMARY_INPUT_EVENT, primary);
+      window.removeEventListener('blur', cancel);
+      document.removeEventListener('visibilitychange', visibility);
+      detachCanvas(surfaceId);
+    };
+  }, [surfaceId]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: parent,
+    style: {
+      position: 'relative',
+      flex: 1,
+      minWidth: 0,
+      minHeight: 0,
+      overflow: 'hidden',
+      touchAction: 'none',
+      ...style
+    },
+    ...touch?.responder.panHandlers,
+    children: /*#__PURE__*/_jsx("canvas", {
+      ref: canvas,
+      style: {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        display: 'block'
+      }
+    })
+  });
+}
+//# sourceMappingURL=host.web.js.map

package/lib/module/render/meshes.js

@@ -0,0 +1,159 @@
+"use strict";
+
+import NativeEngine from '../native/NativeNayanEngine';
+import { prepareEngine } from '../native/prepare';
+import { SHAPE_MESH } from "../types.js";
+
+// Interleaved position(3) + normal(3) + color(3) + uv(2), the same layout loaded models use.
+// Built-in shapes are unit-sized, centered at the origin and white (the instance color tints them).
+export const VERTEX_FLOATS = 11;
+export class Builder {
+  vertices = [];
+  indices = [];
+
+  /** Adds a vertex, returns its index. */
+  vertex(p, n, u, v) {
+    this.vertices.push(p[0], p[1], p[2], n[0], n[1], n[2], 1, 1, 1, u, v);
+    return this.vertices.length / VERTEX_FLOATS - 1;
+  }
+
+  /** Two triangles, counter-clockwise a b c d as seen from the front. */
+  quad(a, b, c, d) {
+    this.indices.push(a, b, c, a, c, d);
+  }
+
+  /**
+   * A (rows + 1) x (cols + 1) vertex grid; `at(u, v)` gives position and normal. u runs along a row and
+   * v down the rows; the grid faces the side from which u goes right and v goes down.
+   */
+  grid(rows, cols, at) {
+    const first = this.vertices.length / VERTEX_FLOATS;
+    for (let i = 0; i <= rows; i++) {
+      for (let j = 0; j <= cols; j++) {
+        const [p, n] = at(j / cols, i / rows);
+        this.vertex(p, n, j / cols, i / rows);
+      }
+    }
+    for (let i = 0; i < rows; i++) {
+      for (let j = 0; j < cols; j++) {
+        const a = first + i * (cols + 1) + j;
+        const b = a + cols + 1;
+        this.indices.push(a, b, a + 1, a + 1, b, b + 1);
+      }
+    }
+  }
+
+  /** A flat disc at height y facing up (+1) or down (-1). */
+  disc(y, radius, facing, segments) {
+    const center = this.vertex([0, y, 0], [0, facing, 0], 0.5, 0.5);
+    const first = center + 1;
+    for (let j = 0; j <= segments; j++) {
+      const t = j / segments * TAU;
+      const x = Math.cos(t);
+      const z = Math.sin(t);
+      this.vertex([x * radius, y, z * radius], [0, facing, 0], 0.5 + x / 2, 0.5 + z / 2);
+    }
+    for (let j = 0; j < segments; j++) {
+      if (facing === 1) this.indices.push(center, first + j + 1, first + j);else this.indices.push(center, first + j, first + j + 1);
+    }
+  }
+}
+const TAU = Math.PI * 2;
+
+/** Render-ready geometry: VERTEX_FLOATS floats per vertex, u32 triangle indices. */
+
+/** What the renderer draws for a mesh id: geometry, and a texture id (see `loadTexture`) if any. */
+/** `shine` 0..1: how glossy (sun highlight and sky reflection), 0 = matte. */
+
+const registered = new Map();
+/** One past the highest mesh id registered (the 16 built-in shapes at least). */
+let idLimit = 16;
+
+/** Registers what a mesh id draws (loaded models, glyphs, textured variants). */
+export function registerMesh(mesh, info, uploadGeometry = true) {
+  registered.set(mesh, info);
+  idLimit = Math.max(idLimit, mesh + 1);
+  if (uploadGeometry) upload(mesh, info);
+}
+
+/** One past the highest mesh id in use: per-frame scans of a source's ranges stop here. */
+export const getMeshIdLimit = () => idLimit;
+
+/** A typed array's bytes as an ArrayBuffer of exactly its length. */
+function exact(data) {
+  const {
+    buffer,
+    byteOffset,
+    byteLength
+  } = data;
+  if (buffer instanceof ArrayBuffer && byteOffset === 0 && byteLength === buffer.byteLength) return buffer;
+  return data.slice().buffer;
+}
+
+/** Hands a mesh's geometry and material to the native renderer (which copies them). */
+function upload(mesh, info) {
+  const {
+    vertices,
+    indices
+  } = info.geometry;
+  NativeEngine?.renderMesh(mesh, exact(vertices), exact(indices), info.texture ?? -1, info.shine ?? 0);
+}
+let builtInsUploaded = false;
+
+/** Generates the built-in shapes in the Rust core and registers them with the native renderer (once). */
+export function uploadBuiltInMeshes() {
+  if (builtInsUploaded) return;
+  NativeEngine?.generateBuiltinMeshes();
+  builtInsUploaded = true;
+}
+
+/**
+ * Initializes the shared core and built-in meshes. Await before using the engine on the web.
+ * Mobile initialization remains synchronous and also warms the GPU on a background thread.
+ * Repeat calls reuse initialization and mesh registration.
+ */
+export function warmUpEngine() {
+  const pending = prepareEngine();
+  const warm = () => {
+    const native = NativeEngine;
+    if (!native) return;
+    uploadBuiltInMeshes();
+    // Apps built before this method existed draw as before: the first GameView makes the device.
+    if (typeof native.renderWarmUp === 'function') native.renderWarmUp();
+  };
+  if (pending) return pending.then(warm);
+  warm();
+  return Promise.resolve();
+}
+
+/** What to draw for a mesh id, or undefined ("none", or unknown). Built-in shapes use native geometry. */
+export function meshInfo(mesh) {
+  const info = registered.get(mesh);
+  if (info || mesh === SHAPE_MESH.none) return info;
+  // Built-in shapes are generated in Rust; read their geometry from the renderer.
+  const shape = Object.keys(SHAPE_MESH).find(s => SHAPE_MESH[s] === mesh);
+  if (!shape || shape === 'none') return undefined;
+  const native = NativeEngine;
+  if (!native) return undefined;
+  let vertices = new Float32Array(native.renderMeshVertices(mesh));
+  // Generate the built-in shapes on first use, so shapeGeometry works before warmUpEngine() on mobile.
+  if (!vertices.length && !builtInsUploaded && typeof native.generateBuiltinMeshes === 'function') {
+    try {
+      uploadBuiltInMeshes();
+    } catch {
+      return undefined; // Browser core not loaded yet: callers report that warmUpEngine() is needed.
+    }
+    vertices = new Float32Array(native.renderMeshVertices(mesh));
+  }
+  const indices = new Uint32Array(native.renderMeshIndices(mesh));
+  if (!vertices.length) return undefined;
+  const made = {
+    geometry: {
+      vertices,
+      indices
+    }
+  };
+  registered.set(mesh, made);
+  return made;
+}
+//# sourceMappingURL=meshes.js.map

package/lib/module/render/quality.js

@@ -0,0 +1,112 @@
+"use strict";
+
+// Rendering quality: how many pixels are drawn and how much each costs. Phones' GPUs are mostly
+// limited by fill rate, so resolution and anti-aliasing matter most, then shadow quality.
+
+/** `"auto"` starts at "high" and steps down only while the device really can't keep up. */
+
+/** From best looking to cheapest; "auto" walks down this list only as far as it must. */
+export const QUALITIES = ['high', 'medium', 'low', 'lowest'];
+export const QUALITY_LEVELS = {
+  // Ordered by what each step costs the eye: shadow detail goes first (barely noticed), then
+  // anti-aliasing; only the last resort draws fewer pixels, since anything below the screen's own
+  // resolution is stretched up and looks soft (text most of all).
+  high: {
+    maxPixelRatio: 3,
+    samples: 4,
+    shadowSize: 2048,
+    softShadows: true
+  },
+  medium: {
+    maxPixelRatio: 3,
+    samples: 4,
+    shadowSize: 1024,
+    softShadows: true
+  },
+  low: {
+    maxPixelRatio: 3,
+    samples: 1,
+    shadowSize: 1024,
+    softShadows: false
+  },
+  lowest: {
+    maxPixelRatio: 2,
+    samples: 1,
+    shadowSize: 512,
+    softShadows: false
+  }
+};
+
+/** A typical frame slower than this (under ~50 fps) is a frame the device can't hold. */
+const SLOW_FRAME_MS = 20;
+/** A typical frame this quick (60 fps with room to spare) is one it holds comfortably. */
+const FAST_FRAME_MS = 17.4;
+/** Only a slow second spent mostly drawing is the GPU's fault (a slow game loop isn't helped by drawing less). */
+const RENDER_SHARE = 0.6;
+/** Ignore start-up (loading, shader compiles) and the moments after a change. */
+const STARTUP_MS = 2500;
+const SETTLE_MS = 2000;
+/** Consecutive slow seconds before stepping down, and smooth seconds before trying a step back up. */
+const SLOW_SECONDS = 3;
+const FAST_SECONDS = 10;
+/** Stepping down again this soon after a step up means that level is too much: never return to it. */
+const RELAPSE_MS = 20_000;
+
+/** One second of frames, as the frame loop measured it. */
+
+/**
+ * Picks the level for "auto": starts at the best, steps down one level after `SLOW_SECONDS`
+ * consecutive seconds whose typical frame misses ~50 fps while drawing took most of it, and steps
+ * back up after `FAST_SECONDS` smooth seconds. A level that fails again soon after being restored
+ * becomes the ceiling, so it never bounces.
+ */
+export class AutoQuality {
+  index = 0;
+  /** The best level it may return to (raised past a level that keeps failing). */
+  ceiling = 0;
+  started = 0;
+  changed = 0;
+  raisedAt = -Infinity;
+  slow = 0;
+  fast = 0;
+  get quality() {
+    return QUALITIES[this.index];
+  }
+
+  /** Feeds one second of frames; returns true when the level changed. */
+  report(now, frames) {
+    if (!this.started) this.started = this.changed = now;
+    if (now - this.started < STARTUP_MS || now - this.changed < SETTLE_MS) return false;
+    const gpuBound = frames.frameMs > SLOW_FRAME_MS && frames.renderMs > frames.frameMs * RENDER_SHARE;
+    const smooth = frames.frameMs <= FAST_FRAME_MS;
+    this.slow = gpuBound ? this.slow + 1 : 0;
+    this.fast = smooth ? this.fast + 1 : 0;
+    if (this.slow >= SLOW_SECONDS && this.index < QUALITIES.length - 1) {
+      // Failing again right after being restored: this level is too much for the device
+      if (now - this.raisedAt < RELAPSE_MS) this.ceiling = Math.max(this.ceiling, this.index + 1);
+      this.index++;
+      return this.moved(now);
+    }
+    if (this.fast >= FAST_SECONDS && this.index > this.ceiling) {
+      this.index--;
+      this.raisedAt = now;
+      return this.moved(now);
+    }
+    return false;
+  }
+  moved(now) {
+    this.changed = now;
+    this.slow = 0;
+    this.fast = 0;
+    return true;
+  }
+}
+
+/** The middle value of `values` (sorted in place). */
+export function median(values) {
+  if (!values.length) return 0;
+  values.sort((a, b) => a - b);
+  const mid = values.length >> 1;
+  return values.length % 2 ? values[mid] : (values[mid - 1] + values[mid]) / 2;
+}
+//# sourceMappingURL=quality.js.map