lgimgui 0.1.0

package/src/material/presets.js

@@ -0,0 +1,291 @@
+import { normalizeMaterial } from './params.js'
+
+function tint(r, g, b, a) {
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a }
+}
+
+export const ROLE_PRESETS = {
+  window: normalizeMaterial({
+    cornerRadius: 36,
+    refThickness: 10,
+    refFactor: 1.38,
+    refDispersion: 7.2,
+    refFresnelRange: 21,
+    refFresnelHardness: 14,
+    refFresnelFactor: 15,
+    glareRange: 16,
+    glareHardness: 27,
+    glareFactor: 93,
+    glareConvergence: 82,
+    glareOppositeFactor: 100,
+    glareAngle: -180,
+    blurRadius: 92,
+    blurEdge: false,
+    tint: tint(1, 1, 1, 1),
+    shadowExpand: 12,
+    shadowFactor: 26,
+    shadowPosition: { x: 0, y: 3 },
+    borderWidth: 1,
+    borderColor: { r: 255, g: 255, b: 255, a: 0.45 },
+    adaptTint: 0,
+    adaptShadow: 0,
+  }),
+  dock: normalizeMaterial({
+    cornerRadius: 36,
+    refThickness: 7,
+    refFactor: 2.77,
+    refDispersion: 14.22,
+    refFresnelRange: 19,
+    refFresnelHardness: 47,
+    refFresnelFactor: 43,
+    glareRange: 18,
+    glareHardness: 43,
+    glareFactor: 34,
+    glareConvergence: 30,
+    glareOppositeFactor: 57,
+    glareAngle: 45,
+    blurRadius: 48,
+    blurEdge: true,
+    tint: tint(0.93, 0.95, 0.99, 0.36),
+    shadowExpand: 18,
+    shadowFactor: 4,
+    shadowPosition: { x: 0, y: -3 },
+  }),
+  clear: normalizeMaterial({
+    cornerRadius: 14,
+    refThickness: 10,
+    refFactor: 1.41,
+    refDispersion: 20.82,
+    refFresnelRange: 22,
+    refFresnelHardness: 16,
+    refFresnelFactor: 47,
+    glareRange: 35,
+    glareHardness: 5,
+    glareFactor: 47,
+    glareConvergence: 38,
+    glareOppositeFactor: 61,
+    glareAngle: 45,
+    blurRadius: 15,
+    blurEdge: false,
+    tint: tint(0.86, 0.9, 0.98, 0.22),
+    shadowExpand: 15,
+    shadowFactor: 4,
+    shadowPosition: { x: 0, y: -3 },
+  }),
+  thumb: normalizeMaterial({
+    cornerRadius: 60,
+    refThickness: 13,
+    refFactor: 1.9,
+    refDispersion: 32,
+    refFresnelRange: 30,
+    refFresnelHardness: 12,
+    refFresnelFactor: 38,
+    glareRange: 34,
+    glareHardness: 10,
+    glareFactor: 70,
+    glareConvergence: 55,
+    glareOppositeFactor: 75,
+    glareAngle: -45,
+    blurRadius: 4,
+    blurEdge: false,
+    tint: tint(1, 1, 1, 0.06),
+    shadowExpand: 14,
+    shadowFactor: 8,
+    shadowPosition: { x: 0, y: -3 },
+  }),
+  control: normalizeMaterial({
+    cornerRadius: 60,
+    refThickness: 13,
+    refFactor: 1.5,
+    refDispersion: 7,
+    refFresnelRange: 38,
+    refFresnelHardness: 11,
+    refFresnelFactor: 21,
+    glareRange: 35,
+    glareHardness: 15,
+    glareFactor: 43,
+    glareConvergence: 50,
+    glareOppositeFactor: 80,
+    glareAngle: -45,
+    blurRadius: 14,
+    blurEdge: false,
+    tint: tint(0.9, 0.9, 0.88, 0.5),
+    shadowExpand: 18,
+    shadowFactor: 14,
+    shadowPosition: { x: 0, y: -4 },
+  }),
+  accent: normalizeMaterial({
+    cornerRadius: 60,
+    refThickness: 12,
+    refFactor: 1.5,
+    refDispersion: 5,
+    refFresnelRange: 30,
+    refFresnelHardness: 12,
+    refFresnelFactor: 30,
+    glareRange: 30,
+    glareHardness: 12,
+    glareFactor: 60,
+    glareConvergence: 50,
+    glareOppositeFactor: 70,
+    glareAngle: -45,
+    blurRadius: 20,
+    blurEdge: false,
+    tint: tint(0.17, 0.44, 1, 0.75),
+    shadowExpand: 16,
+    shadowFactor: 10,
+    shadowPosition: { x: 0, y: -4 },
+  }),
+  toolbar: normalizeMaterial({
+    cornerRadius: 60,
+    refThickness: 5,
+    refFactor: 1.12,
+    refDispersion: 0,
+    refFresnelRange: 18,
+    refFresnelHardness: 12,
+    refFresnelFactor: 10,
+    glareRange: 20,
+    glareHardness: 10,
+    glareFactor: 12,
+    glareConvergence: 50,
+    glareOppositeFactor: 50,
+    glareAngle: -45,
+    blurRadius: 60,
+    blurEdge: true,
+    tint: tint(1, 1, 1, 0.78),
+    shadowExpand: 16,
+    shadowFactor: 9,
+    shadowPosition: { x: 0, y: -3 },
+  }),
+  menu: normalizeMaterial({
+    cornerRadius: 16,
+    refThickness: 8,
+    refFactor: 1.3,
+    refDispersion: 4,
+    refFresnelRange: 30,
+    refFresnelHardness: 12,
+    refFresnelFactor: 18,
+    glareRange: 30,
+    glareHardness: 15,
+    glareFactor: 30,
+    glareConvergence: 50,
+    glareOppositeFactor: 70,
+    glareAngle: -45,
+    blurRadius: 60,
+    blurEdge: true,
+    tint: tint(0.96, 0.96, 0.97, 0.62),
+    shadowExpand: 24,
+    shadowFactor: 16,
+    shadowPosition: { x: 0, y: -6 },
+    borderWidth: 1,
+    borderColor: { r: 255, g: 255, b: 255, a: 0.5 },
+  }),
+  pane: normalizeMaterial({
+    cornerRadius: 36,
+    refThickness: 4,
+    refFactor: 1.08,
+    refDispersion: 0,
+    refFresnelRange: 20,
+    refFresnelHardness: 10,
+    refFresnelFactor: 8,
+    glareRange: 0,
+    glareHardness: 0,
+    glareFactor: 0,
+    glareConvergence: 0,
+    glareOppositeFactor: 0,
+    glareAngle: 0,
+    blurRadius: 90,
+    blurEdge: true,
+    tint: tint(1, 1, 1, 0.24),
+    shadowExpand: 14,
+    shadowFactor: 5,
+    shadowPosition: { x: 0, y: -3 },
+  }),
+  thin: normalizeMaterial({
+    cornerRadius: 14,
+    refThickness: 1,
+    refFactor: 1,
+    refDispersion: 0,
+    refFresnelRange: 0,
+    refFresnelHardness: 0,
+    refFresnelFactor: 0,
+    glareRange: 0,
+    glareHardness: 0,
+    glareFactor: 0,
+    glareConvergence: 0,
+    glareOppositeFactor: 0,
+    glareAngle: 0,
+    blurRadius: 102,
+    blurEdge: true,
+    tint: tint(1, 1, 1, 0.18),
+    shadowExpand: 12,
+    shadowFactor: 4,
+    shadowPosition: { x: 0, y: -3 },
+  }),
+  studio: normalizeMaterial({ cornerRadius: 40 }),
+}
+
+export const ROLES = Object.keys(ROLE_PRESETS)
+
+export const ROLE_SURFACE = {
+  window: 'large',
+  dock: 'small',
+  clear: 'small',
+  thumb: 'small',
+  control: 'small',
+  accent: 'small',
+  toolbar: 'small',
+  menu: 'large',
+  pane: 'large',
+  thin: 'small',
+  studio: 'small',
+}
+
+export function clonePresets(presets = ROLE_PRESETS) {
+  return structuredClone(presets)
+}
+
+export const MATERIALS_VERSION = 1
+
+const VARIANTS = ['unfocused', 'dark']
+
+export function serializeMaterials(materials) {
+  const roles = {}
+  for (const role of Object.keys(materials)) {
+    if (VARIANTS.includes(role)) continue
+    roles[role] = structuredClone(materials[role])
+  }
+  const out = { version: MATERIALS_VERSION, roles }
+  for (const variant of VARIANTS) {
+    out[variant] = {}
+    for (const role of Object.keys(materials[variant] ?? {})) out[variant][role] = structuredClone(materials[variant][role])
+  }
+  return out
+}
+
+export function parseMaterials(data) {
+  const source = typeof data === 'string' ? JSON.parse(data) : data
+  if (!source || typeof source !== 'object') throw new Error('materials file is not an object')
+  const roles = source.roles ?? source
+  const result = {}
+  for (const [role, material] of Object.entries(roles)) {
+    if (VARIANTS.includes(role) || role === 'version') continue
+    result[role] = normalizeMaterial(material, ROLE_PRESETS[role])
+  }
+  for (const variant of VARIANTS) {
+    if (!source[variant]) continue
+    result[variant] = {}
+    for (const [role, material] of Object.entries(source[variant])) result[variant][role] = normalizeMaterial(material, ROLE_PRESETS[role])
+  }
+  return result
+}
+
+export function assignMaterials(target, parsed) {
+  for (const key of Object.keys(target)) delete target[key]
+  for (const preset of Object.keys(ROLE_PRESETS)) target[preset] = structuredClone(ROLE_PRESETS[preset])
+  for (const [role, material] of Object.entries(parsed)) {
+    if (VARIANTS.includes(role)) continue
+    target[role] = material
+  }
+  for (const variant of VARIANTS) if (parsed[variant]) target[variant] = parsed[variant]
+  return target
+}

package/src/render/batch.js

@@ -0,0 +1,236 @@
+import { compileProgram, setUniforms } from './context.js'
+import {
+  uiVertex,
+  uiFragment,
+  MODE_FILL,
+  MODE_IMAGE,
+  MODE_GLYPH,
+  MODE_STROKE,
+  MODE_VIBRANT_GLYPH,
+  MODE_GRADIENT,
+  MODE_TINTED_FILL,
+} from './shaders/ui.js'
+
+const FLOATS_PER_INSTANCE = 32
+const ATTRIBUTES = 8
+const NO_CLIP = [0, 0, 0, 0]
+const NO_FADE = [0, 0, 0, 0]
+
+export function createBatch(gl, atlas) {
+  const program = compileProgram(gl, uiVertex, uiFragment, 'ui')
+  const vao = gl.createVertexArray()
+  const buffer = gl.createBuffer()
+  let capacity = 1024
+  let data = new Float32Array(capacity * FLOATS_PER_INSTANCE)
+  let count = 0
+  let mode = -1
+  let texture = null
+  let frameContext = null
+
+  gl.bindVertexArray(vao)
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+  gl.bufferData(gl.ARRAY_BUFFER, data.byteLength, gl.DYNAMIC_DRAW)
+  for (let i = 0; i < ATTRIBUTES; i++) {
+    gl.enableVertexAttribArray(i)
+    gl.vertexAttribPointer(i, 4, gl.FLOAT, false, FLOATS_PER_INSTANCE * 4, i * 16)
+    gl.vertexAttribDivisor(i, 1)
+  }
+  gl.bindVertexArray(null)
+
+  function grow() {
+    capacity *= 2
+    const next = new Float32Array(capacity * FLOATS_PER_INSTANCE)
+    next.set(data)
+    data = next
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+    gl.bufferData(gl.ARRAY_BUFFER, data.byteLength, gl.DYNAMIC_DRAW)
+  }
+
+  function begin(context) {
+    frameContext = context
+    count = 0
+    mode = -1
+    texture = null
+  }
+
+  function flush() {
+    if (count === 0) return
+    gl.useProgram(program.program)
+    gl.bindVertexArray(vao)
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, data.subarray(0, count * FLOATS_PER_INSTANCE))
+    if (mode === MODE_GLYPH || mode === MODE_VIBRANT_GLYPH) atlas.upload()
+    gl.activeTexture(gl.TEXTURE0)
+    gl.bindTexture(gl.TEXTURE_2D, texture ?? atlas.texture)
+    gl.activeTexture(gl.TEXTURE1)
+    gl.bindTexture(gl.TEXTURE_2D, frameContext.sceneTexture)
+    setUniforms(gl, program, {
+      u_viewport: [frameContext.width, frameContext.height],
+      u_resolution: [frameContext.width * frameContext.dpr, frameContext.height * frameContext.dpr],
+      u_dpr: frameContext.dpr,
+      u_mode: mode,
+      u_texture: 0,
+      u_scene: 1,
+    })
+    gl.enable(gl.BLEND)
+    gl.blendEquation(gl.FUNC_ADD)
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count)
+    gl.bindVertexArray(null)
+    count = 0
+  }
+
+  function push(nextMode, nextTexture, values) {
+    if (nextMode !== mode || nextTexture !== texture) {
+      flush()
+      mode = nextMode
+      texture = nextTexture
+    }
+    if (count >= capacity) {
+      flush()
+      grow()
+    }
+    data.set(values, count * FLOATS_PER_INSTANCE)
+    count += 1
+  }
+
+  function clipOf(op) {
+    const clip = op.clip
+    return clip ? [clip.x, clip.y, clip.w, clip.h] : NO_CLIP
+  }
+
+  function fadeOf(op) {
+    const fade = op.fade
+    return fade ? [fade.topStart, fade.topEnd, fade.bottomStart, fade.bottomEnd] : NO_FADE
+  }
+
+  function rect(op) {
+    const r = op.rect
+    const c = op.color
+    const rotation = op.rotation ?? 0
+    const expand = rotation ? (r.w + r.h) / 2 : 0
+    push(MODE_FILL, null, [
+      r.x, r.y, r.w, r.h,
+      op.radius ?? 0, op.roundness ?? 5, 0, 0,
+      c[0], c[1], c[2], c[3],
+      0, 0, 1, 1,
+      ...clipOf(op),
+      0, 0, rotation, expand,
+      0, 0, 0, 0,
+      ...fadeOf(op),
+    ])
+  }
+
+  function tintedFill(op) {
+    const r = op.rect
+    const c = op.color
+    push(MODE_TINTED_FILL, null, [
+      r.x, r.y, r.w, r.h,
+      op.radius ?? 0, op.roundness ?? 5, 0, 0,
+      c[0], c[1], c[2], c[3],
+      0, 0, 1, 1,
+      ...clipOf(op),
+      op.tone ?? 0.5, 0, 0, 0,
+      0, 0, 0, 0,
+      ...fadeOf(op),
+    ])
+  }
+
+  function gradient(op) {
+    const r = op.rect
+    const c = op.color
+    const d = op.color2
+    push(MODE_GRADIENT, null, [
+      r.x, r.y, r.w, r.h,
+      op.radius ?? 0, op.roundness ?? 5, 0, 0,
+      c[0], c[1], c[2], c[3],
+      0, 0, 1, 1,
+      ...clipOf(op),
+      0, op.horizontal ? 1 : 0, 0, 0,
+      d[0], d[1], d[2], d[3],
+      ...fadeOf(op),
+    ])
+  }
+
+  function stroke(op) {
+    const r = op.rect
+    const c = op.color
+    push(MODE_STROKE, null, [
+      r.x, r.y, r.w, r.h,
+      op.radius ?? 0, op.roundness ?? 5, 0, 0,
+      c[0], c[1], c[2], c[3],
+      0, 0, 1, 1,
+      ...clipOf(op),
+      op.width ?? 1, 0, 0, 1,
+      0, 0, 0, 0,
+      ...fadeOf(op),
+    ])
+  }
+
+  function image(op) {
+    const r = op.rect
+    const c = op.color ?? [1, 1, 1, 1]
+    const uv = op.uv ?? [0, 0, 1, 1]
+    push(MODE_IMAGE, op.image.texture, [
+      r.x, r.y, r.w, r.h,
+      op.radius ?? 0, op.roundness ?? 5, 0, 0,
+      c[0], c[1], c[2], c[3],
+      uv[0], uv[1], uv[2], uv[3],
+      ...clipOf(op),
+      0, 0, 0, 0,
+      0, 0, 0, 0,
+      ...fadeOf(op),
+    ])
+  }
+
+  function text(op) {
+    const dpr = frameContext.dpr
+    const scale = dpr
+    const layout = atlas.layoutText(op.text, op.font, scale)
+    const c = op.color
+    const clip = clipOf(op)
+    const fade = fadeOf(op)
+    const glyphMode = op.vibrancy > 0 ? MODE_VIBRANT_GLYPH : MODE_GLYPH
+    const k = op.scale ?? 1
+    const metrics = atlas.metrics(op.font)
+    const lineBox = op.font.size * (op.font.lineHeight ?? 1.25) * k
+    const baseline = op.y + (lineBox - (metrics.ascent + metrics.descent) * k) / 2 + metrics.ascent * k
+    const snap = (value) => (k === 1 ? Math.round(value * dpr) / dpr : value)
+    for (const item of layout.items) {
+      const g = item.glyph
+      const x = snap(op.x + (item.x + g.offsetX) * k)
+      const y = snap(baseline + g.offsetY * k)
+      push(glyphMode, null, [
+        x, y, g.w * k, g.h * k,
+        0, 2, 0, 0,
+        c[0], c[1], c[2], c[3],
+        g.u0, g.v0, g.u1, g.v1,
+        ...clip,
+        op.vibrancy ?? 0, 0, 0, 0,
+        0, 0, 0, 0,
+        ...fade,
+      ])
+    }
+  }
+
+  function draw(op) {
+    switch (op.type) {
+      case 'rect':
+        return rect(op)
+      case 'gradient':
+        return gradient(op)
+      case 'tintedFill':
+        return tintedFill(op)
+      case 'stroke':
+        return stroke(op)
+      case 'image':
+        return image(op)
+      case 'text':
+        return text(op)
+      default:
+        throw new Error(`unknown ui op ${op.type}`)
+    }
+  }
+
+  return { begin, draw, flush }
+}

package/src/render/context.js

@@ -0,0 +1,138 @@
+export function createContext(canvas) {
+  const gl = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: false,
+    depth: false,
+    stencil: false,
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+    powerPreference: 'high-performance',
+  })
+  if (!gl) throw new Error('webgl2 is required')
+  return gl
+}
+
+export function compileProgram(gl, vertexSource, fragmentSource, name) {
+  const program = gl.createProgram()
+  gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, vertexSource, name + '.vert'))
+  gl.attachShader(program, compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource, name + '.frag'))
+  gl.linkProgram(program)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(`link ${name}: ${gl.getProgramInfoLog(program)}`)
+  }
+  const uniforms = {}
+  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)
+  for (let i = 0; i < count; i++) {
+    const info = gl.getActiveUniform(program, i)
+    const key = info.name.replace(/\[0\]$/, '')
+    uniforms[key] = { location: gl.getUniformLocation(program, info.name), type: info.type, size: info.size }
+  }
+  return { program, uniforms }
+}
+
+function compileShader(gl, type, source, name) {
+  const shader = gl.createShader(type)
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader)
+    const lines = source.split('\n').map((line, i) => `${i + 1}: ${line}`)
+    throw new Error(`compile ${name}: ${log}\n${lines.join('\n')}`)
+  }
+  return shader
+}
+
+export function setUniforms(gl, program, values) {
+  for (const [key, value] of Object.entries(values)) {
+    const uniform = program.uniforms[key]
+    if (!uniform) continue
+    applyUniform(gl, uniform, value)
+  }
+}
+
+function applyUniform(gl, uniform, value) {
+  const { location, type } = uniform
+  switch (type) {
+    case gl.FLOAT:
+      if (Array.isArray(value) || ArrayBuffer.isView(value)) gl.uniform1fv(location, value)
+      else gl.uniform1f(location, value)
+      break
+    case gl.FLOAT_VEC2:
+      gl.uniform2fv(location, value)
+      break
+    case gl.FLOAT_VEC3:
+      gl.uniform3fv(location, value)
+      break
+    case gl.FLOAT_VEC4:
+      gl.uniform4fv(location, value)
+      break
+    case gl.INT:
+    case gl.SAMPLER_2D:
+    case gl.BOOL:
+      gl.uniform1i(location, value)
+      break
+    case gl.INT_VEC2:
+      gl.uniform2iv(location, value)
+      break
+    default:
+      throw new Error(`unsupported uniform type ${type}`)
+  }
+}
+
+export function createSurface(gl, width, height, levels) {
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texStorage2D(gl.TEXTURE_2D, levels, gl.RGBA8, width, height)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  const fbos = []
+  const sizes = []
+  for (let level = 0; level < levels; level++) {
+    const fbo = gl.createFramebuffer()
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, level)
+    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER)
+    if (status !== gl.FRAMEBUFFER_COMPLETE) throw new Error(`framebuffer incomplete at level ${level}: ${status}`)
+    fbos.push(fbo)
+    sizes.push({ w: Math.max(1, width >> level), h: Math.max(1, height >> level) })
+  }
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+  return { texture, width, height, levels, fbos, sizes }
+}
+
+export function destroySurface(gl, surface) {
+  for (const fbo of surface.fbos) gl.deleteFramebuffer(fbo)
+  gl.deleteTexture(surface.texture)
+}
+
+export function createImageTexture(gl, source, options = {}) {
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true)
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false)
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source)
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false)
+  const mipmap = options.mipmap ?? true
+  if (mipmap) gl.generateMipmap(gl.TEXTURE_2D)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, mipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  return { texture, width: source.width ?? source.videoWidth, height: source.height ?? source.videoHeight, mipmap }
+}
+
+export function updateImageTexture(gl, image, source) {
+  gl.bindTexture(gl.TEXTURE_2D, image.texture)
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true)
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source)
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false)
+  if (image.mipmap) gl.generateMipmap(gl.TEXTURE_2D)
+  image.width = source.width ?? source.videoWidth
+  image.height = source.height ?? source.videoHeight
+}
+
+export function mipLevelsFor(width, height) {
+  return Math.max(1, Math.min(8, Math.floor(Math.log2(Math.max(width, height))) - 1))
+}