@fi4f/hg 0.0.0

package/src/stage.ts

@@ -0,0 +1,481 @@
+import { Event } from "./event.js"
+import { Scene } from "./scene.js"
+import type { Maybe } from "./types.js"
+import { Vector2 } from "./vector2.js"
+
+export type Stage = {
+  // configure
+  readonly configureDebug             : "print" | "paint" | boolean
+  readonly configureW                 : number
+  readonly configureH                 : number
+  readonly configureUpdatesPerSecond  : number
+  readonly configureRendersPerSecond  : number
+  readonly configureLogicalBackground : string
+  readonly configureVirtualBackground : string
+  readonly configureScaleIncrement   ?: number                | undefined
+  readonly configureImageSmoothing   ?: ImageSmoothingQuality | undefined
+
+  // canvas
+  logicalCanvasElement: HTMLCanvasElement
+  virtualCanvasElement: OffscreenCanvas
+  logicalCanvasContext: CanvasRenderingContext2D
+  virtualCanvasContext: OffscreenCanvasRenderingContext2D
+  virtualScale: number
+
+  // events
+  events: Event.Tree
+
+  // debugs
+  debugs: Map<string, string | undefined>
+
+  // scene
+  scene ?: Scene | undefined
+
+  // metrics
+  lastUpdate      : number
+  lastRender      : number
+  millisPerUpdate : number
+  millisPerRender : number
+  framesPerSecond : number
+  updatesPerSecond: number
+  rendersPerSecond: number
+
+  averageMillisPerUpdate: number
+  minimumMillisPerUpdate: number
+  maximumMillisPerUpdate: number
+
+  averageMillisPerRender: number
+  minimumMillisPerRender: number
+  maximumMillisPerRender: number
+  
+  oneSecondAccumulator: number
+  updateAccumulator   : number
+  renderAccumulator   : number
+
+  framesPerSecondAccumulator : number
+  updatesPerSecondAccumulator: number
+  rendersPerSecondAccumulator: number
+
+  averageMillisPerUpdateAccumulator: number
+  minimumMillisPerUpdateAccumulator: number
+  maximumMillisPerUpdateAccumulator: number
+
+  averageMillisPerRenderAccumulator: number
+  minimumMillisPerRenderAccumulator: number
+  maximumMillisPerRenderAccumulator: number
+}
+
+export const Stage = {
+  new(c: HTMLCanvasElement, o ?: {
+    debug ?: "print" | "paint" | boolean
+    w     ?: number
+    h     ?: number
+    ups   ?: number
+    rps   ?: number
+    lbg   ?: string
+    vbg   ?: string
+    si    ?: number
+    is    ?: ImageSmoothingQuality
+  }) {
+    const configureDebug             = o?.debug ?? false
+    const configureW                 = o?.w     ?? 0
+    const configureH                 = o?.h     ?? 0
+    const configureUpdatesPerSecond  = o?.ups   ?? 0
+    const configureRendersPerSecond  = o?.rps   ?? 0
+    const configureLogicalBackground = o?.lbg   ?? "#000"
+    const configureVirtualBackground = o?.vbg   ?? "#fff"
+    const configureScaleIncrement    = o?.si
+    const configureImageSmoothing    = o?.is
+
+    const logicalCanvasElement = c
+    const virtualCanvasElement = new OffscreenCanvas(
+      configureW || logicalCanvasElement.width,
+      configureH || logicalCanvasElement.height
+    )
+
+    const logicalCanvasContext = logicalCanvasElement.getContext("2d")!
+    const virtualCanvasContext = virtualCanvasElement.getContext("2d")!
+
+    logicalCanvasContext.imageSmoothingEnabled = !!configureImageSmoothing
+    virtualCanvasContext.imageSmoothingEnabled = !!configureImageSmoothing
+    if (configureImageSmoothing) {
+      logicalCanvasContext.imageSmoothingQuality = configureImageSmoothing
+      virtualCanvasContext.imageSmoothingQuality = configureImageSmoothing
+    }
+
+    let virtualScale = Math.min(
+      logicalCanvasElement.width  / virtualCanvasElement.width,
+      logicalCanvasElement.height / virtualCanvasElement.height
+    )
+    if (configureScaleIncrement)
+      virtualScale = Math.floor(virtualScale / configureScaleIncrement) * configureScaleIncrement
+
+    const millisPerUpdate = configureUpdatesPerSecond ? 1000 / configureUpdatesPerSecond : 0
+    const millisPerRender = configureRendersPerSecond ? 1000 / configureRendersPerSecond : 0
+
+    const stage = {
+      configureDebug,
+      configureW,
+      configureH,
+      configureUpdatesPerSecond,
+      configureRendersPerSecond,
+      configureLogicalBackground,
+      configureVirtualBackground,
+      configureScaleIncrement,
+      configureImageSmoothing,
+
+      logicalCanvasElement,
+      virtualCanvasElement,
+      logicalCanvasContext,
+      virtualCanvasContext,
+      virtualScale,
+
+      events: Event.Tree.new(),
+      debugs: new Map(),
+      
+      lastUpdate: 0,
+      lastRender: 0,
+      millisPerUpdate,
+      millisPerRender,
+      framesPerSecond : 0,
+      updatesPerSecond: 0,
+      rendersPerSecond: 0,
+
+      averageMillisPerUpdate: 0,
+      minimumMillisPerUpdate: 0,
+      maximumMillisPerUpdate: 0,
+
+      averageMillisPerRender: 0,
+      minimumMillisPerRender: 0,
+      maximumMillisPerRender: 0,
+
+      oneSecondAccumulator: 0,
+      updateAccumulator: 0,
+      renderAccumulator: 0,
+
+      framesPerSecondAccumulator : 0,
+      updatesPerSecondAccumulator: 0,
+      rendersPerSecondAccumulator: 0,
+
+      averageMillisPerUpdateAccumulator: 0,
+      minimumMillisPerUpdateAccumulator: Infinity,
+      maximumMillisPerUpdateAccumulator: 0,
+
+      averageMillisPerRenderAccumulator: 0,
+      minimumMillisPerRenderAccumulator: Infinity,
+      maximumMillisPerRenderAccumulator: 0,
+    } satisfies Stage
+
+    Stage.setDebugInfo(stage, "stage:frame" , undefined)
+    Stage.setDebugInfo(stage, "stage:update", undefined)
+    Stage.setDebugInfo(stage, "stage:render", undefined)
+    Stage.setDebugInfo(stage, "stage:canvas", undefined)
+
+    new ResizeObserver(() => resize(stage)).observe(c)
+    Stage.listen<     Vector2>(stage, "stage:resize", wh => onResize(stage, wh))
+    Stage.listen<Maybe<Scene>>(stage, "stage:change", sc => onChange(stage, sc))
+
+    requestAnimationFrame(
+      firstFrame => requestAnimationFrame(
+        lastFrame => requestAnimationFrame(
+          thisFrame => animate(stage, firstFrame, lastFrame, thisFrame)
+        )
+      )
+    )
+
+    return stage
+  },
+
+  getLogicalSize(stage: Stage) {
+    return Vector2.new(
+      stage.logicalCanvasElement.width,
+      stage.logicalCanvasElement.height
+    )
+  },
+
+  getVirtualSize(stage: Stage) {
+    return Vector2.new(
+      stage.virtualCanvasElement.width,
+      stage.virtualCanvasElement.height
+    )
+  },
+
+  getVirtualScale(stage: Stage) {
+    return stage.virtualScale
+  },
+
+  change(stage: Stage, scene: Maybe<Scene>) {
+    Stage.dispatch(stage, "stage:change", scene)
+  },
+
+  listen<T>(stage: Stage, type  : string, listener  : Event.Listener<T>, o ?: { path ?: string, defer ?: boolean }) {
+    Event.listen(stage.events, type, listener, o)
+  },
+
+  deafen<T>(stage: Stage, type ?: string, listener ?: Event.Listener<T>, o ?: { path ?: string, defer ?: boolean }) {
+    Event.deafen(stage.events, type, listener, o)
+  },
+
+  dispatch<T>(stage: Stage, type: string, event: T, o ?: { path ?: string, defer ?: boolean }) {
+    Event.dispatch(stage.events, type, event, o)
+  },
+
+  poll(stage: Stage) {
+    Event.poll(stage.events)
+  },
+
+  getDebugInfo(stage: Stage, id: string) {
+    return stage.debugs.get(id)
+  },
+
+  setDebugInfo(stage: Stage, id: string, info: string | undefined) {
+    stage.debugs.set(id, info)
+  }
+}
+
+function resize(stage: Stage) {
+  const w = stage.logicalCanvasElement.getBoundingClientRect().width
+  const h = stage.logicalCanvasElement.getBoundingClientRect().height
+  Stage.dispatch(stage, "stage:resize", [w, h])
+}
+
+function onResize(stage: Stage, [w, h]: Vector2) {
+  stage.logicalCanvasElement.width  = w
+  stage.logicalCanvasElement.height = h
+  stage.virtualCanvasElement = new OffscreenCanvas(
+    stage.configureW || stage.logicalCanvasElement.width,
+    stage.configureH || stage.logicalCanvasElement.height
+  )
+
+  stage.logicalCanvasContext = stage.logicalCanvasElement.getContext("2d")!
+  stage.virtualCanvasContext = stage.virtualCanvasElement.getContext("2d")!
+
+  stage.logicalCanvasContext.imageSmoothingEnabled = !!stage.configureImageSmoothing
+  stage.virtualCanvasContext.imageSmoothingEnabled = !!stage.configureImageSmoothing
+  if (stage.configureImageSmoothing) {
+    stage.logicalCanvasContext.imageSmoothingQuality = stage.configureImageSmoothing
+    stage.virtualCanvasContext.imageSmoothingQuality = stage.configureImageSmoothing
+  }
+
+  stage.virtualScale = Math.min(
+    stage.logicalCanvasElement.width  / stage.virtualCanvasElement.width,
+    stage.logicalCanvasElement.height / stage.virtualCanvasElement.height
+  )
+  if (stage.configureScaleIncrement)
+    stage.virtualScale = Math.floor(stage.virtualScale / stage.configureScaleIncrement) * stage.configureScaleIncrement
+}
+
+function onChange(stage: Stage, scene: Maybe<Scene>) {
+  if (stage.scene && stage.scene.onDetach)
+    stage.scene.onDetach(stage)
+  stage.scene = scene
+  if (stage.scene && stage.scene.onAttach)
+    stage.scene.onAttach(stage)
+}
+
+function update(stage: Stage, t: number, dt: number) {
+  Stage.poll(stage)
+  if (Scene.doesUpdate(stage.scene))
+    stage.scene.onUpdate({ stage, t, dt })
+}
+
+function render(stage: Stage, t: number, dt: number) {
+  const f = stage.logicalCanvasContext
+  const g = stage.virtualCanvasContext
+
+  f.resetTransform()
+  g.resetTransform()
+
+  f.fillStyle = stage.configureLogicalBackground
+  const [lw, lh] = Stage.getLogicalSize(stage)
+  f.fillRect(0, 0, lw, lh)
+
+  g.fillStyle = stage.configureVirtualBackground
+  const [vw, vh] = Stage.getVirtualSize(stage)
+  g.fillRect(0, 0, vw, vh)
+
+  const vs = Stage.getVirtualScale(stage)
+  f.translate(
+    lw / 2 - vw * vs / 2,
+    lh / 2 - vh * vs / 2
+  )
+  f.scale(vs, vs)
+  
+  if (Scene.doesRender(stage.scene))
+    stage.scene.onRender({ stage, t, dt, g })
+
+  f.drawImage(stage.virtualCanvasElement, 0, 0)
+
+  if (stage.configureDebug && stage.configureDebug !== "print")
+    paintDebugInfos(stage)
+}
+
+function animate(stage: Stage, firstFrame: number, lastFrame: number, thisFrame: number) {
+  const delta = thisFrame - lastFrame
+
+  stage.oneSecondAccumulator += delta
+  stage.updateAccumulator    += delta
+  stage.renderAccumulator    += delta
+
+  stage.framesPerSecondAccumulator += 1
+
+  if (stage.updateAccumulator >= stage.millisPerUpdate) {
+    const t  = (thisFrame -       firstFrame) / 1000
+    const dt = (thisFrame - stage.lastUpdate) / 1000
+
+    const a = performance.now()
+    update(stage, t, dt)
+    const b = performance.now()
+
+    const millisThisUpdate = b - a
+
+    stage.lastUpdate = thisFrame
+    stage.updatesPerSecondAccumulator += 1
+    stage.updateAccumulator -= stage.millisPerUpdate
+
+    stage.averageMillisPerUpdateAccumulator += millisThisUpdate
+    stage.minimumMillisPerUpdateAccumulator  = Math.min(millisThisUpdate, stage.minimumMillisPerUpdateAccumulator)
+    stage.maximumMillisPerUpdateAccumulator  = Math.max(millisThisUpdate, stage.maximumMillisPerUpdateAccumulator)
+  }
+
+  if (stage.renderAccumulator >= stage.millisPerRender) {
+    const t  = (thisFrame -       firstFrame) / 1000
+    const dt = (thisFrame - stage.lastRender) / 1000
+
+    const a = performance.now()
+    render(stage, t, dt)
+    const b = performance.now()
+
+    const millisThisRender = b - a
+
+    stage.lastRender = thisFrame
+    stage.rendersPerSecondAccumulator += 1
+    stage.renderAccumulator -= stage.millisPerRender
+
+    stage.averageMillisPerRenderAccumulator += millisThisRender
+    stage.minimumMillisPerRenderAccumulator  = Math.min(millisThisRender, stage.minimumMillisPerRenderAccumulator)
+    stage.maximumMillisPerRenderAccumulator  = Math.max(millisThisRender, stage.maximumMillisPerRenderAccumulator)
+  }
+
+  if (stage.oneSecondAccumulator >= 1000) {
+    // update metrics
+    stage.framesPerSecond  = stage.framesPerSecondAccumulator
+    stage.updatesPerSecond = stage.updatesPerSecondAccumulator
+    stage.rendersPerSecond = stage.rendersPerSecondAccumulator
+
+    stage.averageMillisPerUpdate = stage.averageMillisPerUpdateAccumulator / stage.updatesPerSecondAccumulator
+    stage.minimumMillisPerUpdate = stage.minimumMillisPerUpdateAccumulator
+    stage.maximumMillisPerUpdate = stage.maximumMillisPerUpdateAccumulator
+
+    stage.averageMillisPerRender = stage.averageMillisPerRenderAccumulator / stage.rendersPerSecondAccumulator
+    stage.minimumMillisPerRender = stage.minimumMillisPerRenderAccumulator
+    stage.maximumMillisPerRender = stage.maximumMillisPerRenderAccumulator
+
+    // reset accumulators
+    stage.framesPerSecondAccumulator  = 0
+    stage.updatesPerSecondAccumulator = 0
+    stage.rendersPerSecondAccumulator = 0
+
+    stage.averageMillisPerUpdateAccumulator = 0
+    stage.minimumMillisPerUpdateAccumulator = Infinity
+    stage.maximumMillisPerUpdateAccumulator = 0
+
+    stage.averageMillisPerRenderAccumulator = 0
+    stage.minimumMillisPerRenderAccumulator = Infinity
+    stage.maximumMillisPerRenderAccumulator = 0
+
+    stage.oneSecondAccumulator -= 1000
+
+    Stage.setDebugInfo(stage, "stage:frame" , getFrameInfo (stage))
+    Stage.setDebugInfo(stage, "stage:update", getUpdateInfo(stage))
+    Stage.setDebugInfo(stage, "stage:render", getRenderInfo(stage))
+    Stage.setDebugInfo(stage, "stage:canvas", getCanvasInfo(stage))
+
+    if (stage.configureDebug && stage.configureDebug !== "paint")
+      printDebugInfos(stage)
+  }
+
+  requestAnimationFrame(nextFrame => animate(stage, firstFrame, thisFrame, nextFrame))
+}
+
+function getFrameInfo(stage: Stage) {
+  return `FRAME  ${stage.framesPerSecond.toFixed(0)} hz`
+}
+
+function getUpdateInfo(stage: Stage) {
+  return `UPDATE ${stage.updatesPerSecond.toFixed(0)} hz @ ${stage.averageMillisPerUpdate.toFixed(2)} [${stage.minimumMillisPerUpdate.toFixed(2)} - ${stage.maximumMillisPerUpdate.toFixed(2)}] of ${stage.millisPerUpdate.toFixed(2)} ms`
+}
+
+function getRenderInfo(stage: Stage) {
+  return `RENDER ${stage.rendersPerSecond.toFixed(0)} hz @ ${stage.averageMillisPerRender.toFixed(2)} [${stage.minimumMillisPerRender.toFixed(2)} - ${stage.maximumMillisPerRender.toFixed(2)}] of ${stage.millisPerRender.toFixed(2)} ms`
+}
+
+function getCanvasInfo(stage: Stage) {
+  const [lw, lh] = Stage.getLogicalSize (stage)
+  const [vw, vh] = Stage.getVirtualSize (stage)
+  const vs       = Stage.getVirtualScale(stage)
+  return `CANVAS ${lw}x${lh} ${vw}x${vh} ${(100 * vs).toFixed(2)}%`
+}
+
+function printDebugInfos(stage: Stage) {
+  let infos = "*** DEBUG ***\n"
+  for (const [id, info] of stage.debugs) {
+    if (!info) continue
+    infos += `${info}\n`
+  }
+  console.log(infos)
+}
+
+function paintDebugInfos(stage: Stage) {
+  const g = stage.logicalCanvasContext
+
+  const configureDebugBackground = "#000a"
+  const configureDebugForeground = "#ffff"
+  const configurePaddingX = 10 as const
+  const configurePaddingY = 10 as const
+  const configureSpacingY = 0  as const
+  const configureFont     = "16px monospace" as const
+
+  g.resetTransform()
+  g.font = configureFont
+
+  let w = 0;
+  let h = 0;   
+  for (const [id, info] of stage.debugs) {
+    if (!info) continue
+
+    const tm = g.measureText(info)
+    w  = Math.max(w, tm.width)
+    h += (
+      tm.fontBoundingBoxAscent  + 
+      tm.fontBoundingBoxDescent +
+      configureSpacingY
+    )
+  }
+
+  if (h > 0) {
+    w += configurePaddingX * 2
+    h += configurePaddingY * 2
+    h -= configureSpacingY
+  }
+
+  // draw background
+  g.fillStyle = configureDebugBackground
+  g.fillRect(0, 0, w, h)
+
+  // draw foreground
+  g.fillStyle = configureDebugForeground
+  let x = configurePaddingX
+  let y = configurePaddingY
+  for (const [id, info] of stage.debugs) {
+    if (!info) continue
+
+    const tm = g.measureText(info)
+    g.fillText(info, x, y + tm.fontBoundingBoxAscent)
+    y += (
+      configureSpacingY + 
+      tm.fontBoundingBoxAscent +
+      tm.fontBoundingBoxDescent
+    )
+  }
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type Maybe<T> = T | undefined

package/src/vector2.ts

@@ -0,0 +1,80 @@
+import { ADD, SUB, MUL, DIV, MOD } from "./math.js";
+
+export type Vector2 = [number, number]
+
+export const X = 0 as const;
+export const Y = 1 as const;
+
+export const __get__ = {
+  x(a: Vector2) { return a[X] },
+  y(a: Vector2) { return a[Y] },
+}
+
+export const __set__ = {
+  x(a: Vector2, x: number) { return a[X] = x },
+  y(a: Vector2, y: number) { return a[Y] = y },
+}
+
+export function x(a: Vector2, x ?: number) {
+  return x === undefined ? __get__.x(a) : __set__.x(a, x)
+}
+
+export function y(a: Vector2, y ?: number) {
+  return y === undefined ? __get__.y(a) : __set__.y(a, y)
+}
+
+export const Vector2 = {
+  X, Y,
+  __get__,
+  __set__,
+  x, y,
+
+  new(...a: Array<number>) {
+    if (a.length === 1) return [ a[X]!    , a[X]!     ] satisfies Vector2
+    else                return [ a[X] ?? 0, a[Y] ?? 0 ] satisfies Vector2
+  },
+
+  from(a: number | Array<number>) {
+    if (typeof a === "number") return [ a        , a         ] satisfies Vector2
+    else                       return [ a[X] ?? 0, a[Y] ?? 0 ] satisfies Vector2
+  },
+
+  el(op: (a: number, b: number) => number, a: number | Vector2, b: number | Vector2, out: Vector2 = Vector2.new()) {
+    const [ xa, ya ] = Vector2.from(a)
+    const [ xb, yb ] = Vector2.from(b)
+    __set__.x(out, op(xa, xb))
+    __set__.y(out, op(ya, yb))
+    return out
+  },
+
+  add(a: number | Vector2, b: number | Vector2, out: Vector2 = Vector2.new()) {
+    return Vector2.el(ADD, a, b, out)
+  },
+
+  sub(a: number | Vector2, b: number | Vector2, out: Vector2 = Vector2.new()) {
+    return Vector2.el(SUB, a, b, out)
+  },
+
+  hmul(a: number | Vector2, b: number | Vector2, out: Vector2 = Vector2.new()) {
+    return Vector2.el(MUL, a, b, out)
+  },
+
+  hdiv(a: number | Vector2, b: number | Vector2, out: Vector2 = Vector2.new()) {
+    return Vector2.el(DIV, a, b, out)
+  },
+
+  hmod(a: number | Vector2, b: number | Vector2, out: Vector2 = Vector2.new()) {
+    return Vector2.el(MOD, a, b, out)
+  },
+
+  dot(a: number | Vector2, b: number | Vector2 = a) {
+    const [xa, ya] = Vector2.from(a)
+    const [xb, yb] = Vector2.from(b)
+    return xa * xb + ya * yb
+  },
+
+  toString(a: number | Vector2) {
+    const [x, y] = Vector2.from(a)
+    return `vec2<${x}, ${y}>`
+  }
+}

package/src/vector3.ts

@@ -0,0 +1,88 @@
+import { ADD, SUB, MUL, DIV, MOD } from "./math.js";
+
+export type Vector3 = [number, number, number]
+
+export const X = 0 as const;
+export const Y = 1 as const;
+export const Z = 2 as const;
+
+export const __get__ = {
+  x(a: Vector3) { return a[X] },
+  y(a: Vector3) { return a[Y] },
+  z(a: Vector3) { return a[Z] },
+}
+
+export const __set__ = {
+  x(a: Vector3, x: number) { return a[X] = x },
+  y(a: Vector3, y: number) { return a[Y] = y },
+  z(a: Vector3, z: number) { return a[Z] = z },
+}
+
+export function x(a: Vector3, x ?: number) {
+  return x === undefined ? __get__.x(a) : __set__.x(a, x)
+}
+
+export function y(a: Vector3, y ?: number) {
+  return y === undefined ? __get__.y(a) : __set__.y(a, y)
+}
+
+export function z(a: Vector3, z ?: number) {
+  return z === undefined ? __get__.z(a) : __set__.z(a, z)
+}
+
+export const Vector3 = {
+  X, Y, Z,
+  __get__,
+  __set__,
+  x, y, z,
+
+  new(...a: Array<number>) {
+    if (a.length === 1) return [ a[X]!    , a[X]!    , a[X]!     ] satisfies Vector3
+    else                return [ a[X] ?? 0, a[Y] ?? 0, a[Z] ?? 0 ] satisfies Vector3
+  },
+
+  from(a: number | Array<number>) {
+    if (typeof a === "number") return [ a        , a        , a         ] satisfies Vector3
+    else                       return [ a[X] ?? 0, a[Y] ?? 0, a[Z] ?? 0 ] satisfies Vector3
+  },
+
+  el(op: (a: number, b: number) => number, a: number | Vector3, b: number | Vector3, out: Vector3 = Vector3.new()) {
+    const [ xa, ya, za ] = Vector3.from(a)
+    const [ xb, yb, zb ] = Vector3.from(b)
+    __set__.x(out, op(xa, xb))
+    __set__.y(out, op(ya, yb))
+    __set__.z(out, op(za, zb))
+    return out
+  },
+
+  add(a: number | Vector3, b: number | Vector3, out: Vector3 = Vector3.new()) {
+    return Vector3.el(ADD, a, b, out)
+  },
+
+  sub(a: number | Vector3, b: number | Vector3, out: Vector3 = Vector3.new()) {
+    return Vector3.el(SUB, a, b, out)
+  },
+
+  hmul(a: number | Vector3, b: number | Vector3, out: Vector3 = Vector3.new()) {
+    return Vector3.el(MUL, a, b, out)
+  },
+
+  hdiv(a: number | Vector3, b: number | Vector3, out: Vector3 = Vector3.new()) {
+    return Vector3.el(DIV, a, b, out)
+  },
+
+  hmod(a: number | Vector3, b: number | Vector3, out: Vector3 = Vector3.new()) {
+    return Vector3.el(MOD, a, b, out)
+  },
+
+  dot(a: number | Vector3, b: number | Vector3 = a) {
+    const [xa, ya, za] = Vector3.from(a)
+    const [xb, yb, zb] = Vector3.from(b)
+    return xa * xb + ya * yb + za * zb
+  },
+
+  toString(a: number | Vector3) {
+    const [x, y, z] = Vector3.from(a)
+    return `vec3<${x}, ${y}, ${z}>`
+  }
+}