lgimgui 0.1.0

package/src/render/glyphs.js

@@ -0,0 +1,177 @@
+const ATLAS_SIZE = 2048
+const PADDING = 2
+
+function makeCanvas(size) {
+  if (typeof OffscreenCanvas !== 'undefined') return new OffscreenCanvas(size, size)
+  const canvas = document.createElement('canvas')
+  canvas.width = size
+  canvas.height = size
+  return canvas
+}
+
+const segmenter = typeof Intl !== 'undefined' && Intl.Segmenter ? new Intl.Segmenter(undefined, { granularity: 'grapheme' }) : null
+
+export function graphemes(text) {
+  if (!segmenter) return Array.from(text)
+  const out = []
+  for (const part of segmenter.segment(text)) out.push(part.segment)
+  return out
+}
+
+export function fontString(font) {
+  const weight = font.weight ?? 400
+  const style = font.italic ? 'italic ' : ''
+  return `${style}${weight} ${font.size}px ${font.family}`
+}
+
+export function createGlyphAtlas(gl) {
+  const canvas = makeCanvas(ATLAS_SIZE)
+  const context = canvas.getContext('2d', { willReadFrequently: false })
+  const measureCanvas = makeCanvas(8)
+  const measureContext = measureCanvas.getContext('2d')
+  const glyphs = new Map()
+  const widths = new Map()
+  const fontMetrics = new Map()
+  let shelfX = PADDING
+  let shelfY = PADDING
+  let shelfHeight = 0
+  let dirty = false
+  let generation = 0
+
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, ATLAS_SIZE, ATLAS_SIZE, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, 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)
+
+  function reset() {
+    glyphs.clear()
+    context.clearRect(0, 0, ATLAS_SIZE, ATLAS_SIZE)
+    shelfX = PADDING
+    shelfY = PADDING
+    shelfHeight = 0
+    generation += 1
+    dirty = true
+  }
+
+  function advance(fontKey, font, grapheme) {
+    const key = fontKey + '
' + grapheme
+    let width = widths.get(key)
+    if (width == null) {
+      measureContext.font = fontKey
+      width = measureContext.measureText(grapheme).width
+      widths.set(key, width)
+    }
+    return width
+  }
+
+  function glyph(fontKey, font, grapheme, scale) {
+    const key = fontKey + '
' + grapheme + '
' + scale
+    let entry = glyphs.get(key)
+    if (entry) return entry
+
+    const renderFont = fontString({ ...font, size: font.size * scale })
+    measureContext.font = renderFont
+    const metrics = measureContext.measureText(grapheme)
+    const ascent = Math.ceil(metrics.actualBoundingBoxAscent ?? font.size * scale)
+    const descent = Math.ceil(metrics.actualBoundingBoxDescent ?? 0)
+    const left = Math.ceil(metrics.actualBoundingBoxLeft ?? 0)
+    const right = Math.ceil(metrics.actualBoundingBoxRight ?? metrics.width)
+    const w = Math.max(1, left + right + 2)
+    const h = Math.max(1, ascent + descent + 2)
+
+    if (shelfX + w + PADDING > ATLAS_SIZE) {
+      shelfX = PADDING
+      shelfY += shelfHeight + PADDING
+      shelfHeight = 0
+    }
+    if (shelfY + h + PADDING > ATLAS_SIZE) {
+      reset()
+      return glyph(fontKey, font, grapheme, scale)
+    }
+
+    context.font = renderFont
+    context.textBaseline = 'alphabetic'
+    context.fillStyle = '#fff'
+    context.fillText(grapheme, shelfX + left + 1, shelfY + ascent + 1)
+
+    entry = {
+      u0: shelfX / ATLAS_SIZE,
+      v0: shelfY / ATLAS_SIZE,
+      u1: (shelfX + w) / ATLAS_SIZE,
+      v1: (shelfY + h) / ATLAS_SIZE,
+      w: w / scale,
+      h: h / scale,
+      offsetX: -(left + 1) / scale,
+      offsetY: -(ascent + 1) / scale,
+      generation,
+    }
+    glyphs.set(key, entry)
+    shelfX += w + PADDING
+    shelfHeight = Math.max(shelfHeight, h)
+    dirty = true
+    return entry
+  }
+
+  function upload() {
+    if (!dirty) return
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false)
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, canvas)
+    dirty = false
+  }
+
+  function metrics(font) {
+    const fontKey = fontString(font)
+    let entry = fontMetrics.get(fontKey)
+    if (entry) return entry
+    measureContext.font = fontKey
+    const m = measureContext.measureText('Hg')
+    entry = {
+      ascent: m.fontBoundingBoxAscent ?? font.size * 0.8,
+      descent: m.fontBoundingBoxDescent ?? font.size * 0.2,
+    }
+    fontMetrics.set(fontKey, entry)
+    return entry
+  }
+
+  function measure(text, font) {
+    const fontKey = fontString(font)
+    let width = 0
+    for (const grapheme of graphemes(text)) width += advance(fontKey, font, grapheme)
+    return { w: width, h: font.size * (font.lineHeight ?? 1.25) }
+  }
+
+  function layoutText(text, font, scale) {
+    const fontKey = fontString(font)
+    const items = []
+    let x = 0
+    for (const grapheme of graphemes(text)) {
+      if (grapheme !== ' ') items.push({ x, glyph: glyph(fontKey, font, grapheme, scale) })
+      x += advance(fontKey, font, grapheme)
+    }
+    return { items, width: x }
+  }
+
+  function truncate(text, font, maxWidth) {
+    const fontKey = fontString(font)
+    const parts = graphemes(text)
+    let width = 0
+    for (let i = 0; i < parts.length; i++) width += advance(fontKey, font, parts[i])
+    if (width <= maxWidth) return text
+    const ellipsisWidth = advance(fontKey, font, '…')
+    let out = ''
+    let used = ellipsisWidth
+    for (const part of parts) {
+      const w = advance(fontKey, font, part)
+      if (used + w > maxWidth) break
+      out += part
+      used += w
+    }
+    return out + '…'
+  }
+
+  return { texture, measure, metrics, layoutText, truncate, upload, get generation() { return generation } }
+}

package/src/render/probe.js

@@ -0,0 +1,64 @@
+const TARGET_WIDTH = 72
+const EMPTY = { width: 0, height: 0, data: new Uint8Array(0), scaleX: 0, scaleY: 0 }
+
+export function createProbe(gl) {
+  const slots = []
+
+  function slot(index) {
+    while (slots.length <= index) slots.push({ buffer: gl.createBuffer(), pending: null, result: EMPTY })
+    return slots[index]
+  }
+
+  function levelFor(surface) {
+    let level = 0
+    while (level + 1 < surface.levels && surface.sizes[level + 1].w >= TARGET_WIDTH) level += 1
+    return level
+  }
+
+  function request(index, surface, cssWidth, cssHeight) {
+    const entry = slot(index)
+    if (entry.pending) return
+    const level = levelFor(surface)
+    const size = surface.sizes[level]
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, entry.buffer)
+    gl.bufferData(gl.PIXEL_PACK_BUFFER, size.w * size.h * 4, gl.STREAM_READ)
+    gl.bindFramebuffer(gl.FRAMEBUFFER, surface.fbos[level])
+    gl.readPixels(0, 0, size.w, size.h, gl.RGBA, gl.UNSIGNED_BYTE, 0)
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null)
+    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0)
+    gl.flush()
+    entry.pending = { sync, width: size.w, height: size.h, scaleX: size.w / cssWidth, scaleY: size.h / cssHeight }
+  }
+
+  function poll() {
+    let changed = false
+    let collected = 0
+    for (const entry of slots) {
+      const pending = entry.pending
+      if (!pending) continue
+      const status = gl.clientWaitSync(pending.sync, 0, 0)
+      if (status === gl.TIMEOUT_EXPIRED) continue
+      gl.deleteSync(pending.sync)
+      entry.pending = null
+      if (status === gl.WAIT_FAILED) continue
+      const length = pending.width * pending.height * 4
+      const data = entry.result.data.length === length ? entry.result.data : new Uint8Array(length)
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, entry.buffer)
+      gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data)
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null)
+      collected += 1
+      let checksum = 0
+      for (let i = 0; i < data.length; i += 4) checksum += data[i] * 3 + data[i + 1] * 5 + data[i + 2]
+      if (Math.abs(checksum - (entry.checksum ?? -1)) > 64) changed = true
+      entry.checksum = checksum
+      entry.result = { width: pending.width, height: pending.height, data, scaleX: pending.scaleX, scaleY: pending.scaleY }
+    }
+    return { collected, changed }
+  }
+
+  function current(index) {
+    return slots[index]?.result ?? EMPTY
+  }
+
+  return { request, poll, current, get slots() { return slots.map((s) => ({ pending: Boolean(s.pending), width: s.result.width })) } }
+}

package/src/render/pyramid.js

@@ -0,0 +1,48 @@
+import { compileProgram, setUniforms } from './context.js'
+import { blitVertex, downsampleFragment } from './shaders/ui.js'
+
+const LEVEL_SIGMA = 1.1547
+
+export function blurRadiusToLod(radius, levels) {
+  const sigma = radius / 3
+  const lod = Math.log2(Math.max(sigma, 0.0001) / LEVEL_SIGMA)
+  return Math.max(0, Math.min(levels - 1, lod))
+}
+
+export function createPyramid(gl) {
+  const program = compileProgram(gl, blitVertex, downsampleFragment, 'downsample')
+
+  function build(surface, scratch) {
+    gl.useProgram(program.program)
+    gl.disable(gl.BLEND)
+    gl.disable(gl.SCISSOR_TEST)
+    gl.activeTexture(gl.TEXTURE0)
+    for (let level = 1; level < surface.levels; level++) {
+      const size = surface.sizes[level]
+      const sourceSize = surface.sizes[level - 1]
+      gl.bindFramebuffer(gl.FRAMEBUFFER, scratch.fbos[level])
+      gl.viewport(0, 0, size.w, size.h)
+      gl.bindTexture(gl.TEXTURE_2D, surface.texture)
+      setUniforms(gl, program, {
+        u_texture: 0,
+        u_texel: [1 / sourceSize.w, 1 / sourceSize.h],
+        u_direction: [2, 0],
+        u_lod: level - 1,
+      })
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+
+      gl.bindFramebuffer(gl.FRAMEBUFFER, surface.fbos[level])
+      gl.viewport(0, 0, size.w, size.h)
+      gl.bindTexture(gl.TEXTURE_2D, scratch.texture)
+      setUniforms(gl, program, {
+        u_texture: 0,
+        u_texel: [1 / size.w, 1 / size.h],
+        u_direction: [0, 1],
+        u_lod: level,
+      })
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+    }
+  }
+
+  return { build }
+}

package/src/render/renderer.js

@@ -0,0 +1,296 @@
+import { createContext, compileProgram, setUniforms, createSurface, destroySurface, mipLevelsFor, createImageTexture, updateImageTexture } from './context.js'
+import { createPyramid, blurRadiusToLod } from './pyramid.js'
+import { createGlyphAtlas } from './glyphs.js'
+import { createBatch } from './batch.js'
+import { createProbe } from './probe.js'
+import { glassVertex, glassFragment, MAX_SHAPES } from './shaders/glass.js'
+import { blitVertex, blitFragment } from './shaders/ui.js'
+import { materialUniforms, shadowUniforms } from '../material/material.js'
+
+function createColorTarget(gl, width, height) {
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, 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)
+  const fbo = gl.createFramebuffer()
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+  return { texture, fbo, width, height }
+}
+
+export function createRenderer(canvas) {
+  const gl = createContext(canvas)
+  const atlas = createGlyphAtlas(gl)
+  const batch = createBatch(gl, atlas)
+  const pyramid = createPyramid(gl)
+  const probe = createProbe(gl)
+  const glassProgram = compileProgram(gl, glassVertex, glassFragment, 'glass')
+  const blitProgram = compileProgram(gl, blitVertex, blitFragment, 'blit')
+
+  let width = 0
+  let height = 0
+  let dpr = 1
+  let physicalWidth = 0
+  let physicalHeight = 0
+  let levels = 1
+  let strata = []
+  let scratch = null
+
+  function ensureStrata(count) {
+    while (strata.length < count) {
+      strata.push({
+        color: createColorTarget(gl, physicalWidth, physicalHeight),
+        pyramid: createSurface(gl, physicalWidth, physicalHeight, levels),
+      })
+    }
+  }
+
+  function releaseTargets() {
+    for (const stratum of strata) {
+      gl.deleteFramebuffer(stratum.color.fbo)
+      gl.deleteTexture(stratum.color.texture)
+      destroySurface(gl, stratum.pyramid)
+    }
+    strata = []
+    if (scratch) destroySurface(gl, scratch)
+    scratch = null
+  }
+
+  function resize(cssWidth, cssHeight, ratio) {
+    const nextWidth = Math.max(1, Math.round(cssWidth * ratio))
+    const nextHeight = Math.max(1, Math.round(cssHeight * ratio))
+    if (nextWidth === physicalWidth && nextHeight === physicalHeight && ratio === dpr) {
+      width = cssWidth
+      height = cssHeight
+      return
+    }
+    width = cssWidth
+    height = cssHeight
+    dpr = ratio
+    physicalWidth = nextWidth
+    physicalHeight = nextHeight
+    canvas.width = physicalWidth
+    canvas.height = physicalHeight
+    levels = mipLevelsFor(physicalWidth, physicalHeight)
+    releaseTargets()
+    scratch = createSurface(gl, physicalWidth, physicalHeight, levels)
+  }
+
+  function bindTarget(target) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo)
+    gl.viewport(0, 0, physicalWidth, physicalHeight)
+  }
+
+  function blit(sourceTexture, targetFbo) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, targetFbo)
+    gl.viewport(0, 0, physicalWidth, physicalHeight)
+    gl.disable(gl.BLEND)
+    gl.disable(gl.SCISSOR_TEST)
+    gl.useProgram(blitProgram.program)
+    gl.activeTexture(gl.TEXTURE0)
+    gl.bindTexture(gl.TEXTURE_2D, sourceTexture)
+    setUniforms(gl, blitProgram, { u_texture: 0, u_lod: 0 })
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+  }
+
+  function buildPyramid(stratum) {
+    blit(stratum.color.texture, stratum.pyramid.fbos[0])
+    pyramid.build(stratum.pyramid, scratch)
+  }
+
+  function scissor(clip) {
+    if (!clip) {
+      gl.disable(gl.SCISSOR_TEST)
+      return
+    }
+    gl.enable(gl.SCISSOR_TEST)
+    const x = Math.floor(clip.x * dpr)
+    const y = Math.floor((height - clip.y - clip.h) * dpr)
+    const w = Math.ceil(clip.w * dpr) + 1
+    const h = Math.ceil(clip.h * dpr) + 1
+    gl.scissor(x, y, w, h)
+  }
+
+  const shapeData = new Float32Array(MAX_SHAPES * 4)
+  const cornerData = new Float32Array(MAX_SHAPES * 2)
+  const fadeData = new Float32Array(MAX_SHAPES)
+
+  function uploadShapes(op) {
+    const count = Math.min(MAX_SHAPES, op.shapes.length)
+    shapeData.fill(0)
+    cornerData.fill(0)
+    fadeData.fill(1)
+    for (let i = 0; i < count; i++) {
+      const shape = op.shapes[i]
+      shapeData[i * 4] = shape.x
+      shapeData[i * 4 + 1] = shape.y
+      shapeData[i * 4 + 2] = shape.w
+      shapeData[i * 4 + 3] = shape.h
+      cornerData[i * 2] = shape.radius
+      cornerData[i * 2 + 1] = shape.roundness ?? 5
+      fadeData[i] = shape.fade ?? 1
+    }
+    setUniforms(gl, glassProgram, { u_shapeCount: count, u_shapes: shapeData, u_corners: cornerData, u_shapeFade: fadeData, u_mergeRate: op.mergeRate ?? 0, u_hardFirst: op.hardFirst ? 1 : 0 })
+  }
+
+  function drawGlass(op, sceneTexture) {
+    gl.useProgram(glassProgram.program)
+    gl.activeTexture(gl.TEXTURE0)
+    gl.bindTexture(gl.TEXTURE_2D, sceneTexture)
+    uploadShapes(op)
+    const material = op.material
+    setUniforms(gl, glassProgram, {
+      u_scene: 0,
+      u_viewport: [width, height],
+      u_resolution: [physicalWidth, physicalHeight],
+      u_dpr: dpr,
+      u_pass: 1,
+      u_quad: [op.bounds.x, op.bounds.y, op.bounds.w, op.bounds.h],
+      ...materialUniforms(material),
+      u_blurLod: blurRadiusToLod(material.blurRadius, levels),
+      u_dimming: op.dimming ?? 0,
+      u_glow: op.glow ?? [0, 0, 0, 0],
+      u_coverageScale: op.coverageScale ?? 1,
+      u_border: op.border ?? 0,
+      u_borderColor: op.borderColor ?? [0, 0, 0, 0],
+    })
+    scissor(op.clip)
+    gl.enable(gl.BLEND)
+    gl.blendEquation(gl.FUNC_ADD)
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+  }
+
+  function drawShadow(op) {
+    const material = op.material
+    if (material.shadowFactor <= 0) return
+    gl.useProgram(glassProgram.program)
+    uploadShapes(op)
+    const shadow = shadowUniforms(material)
+    const reach = material.shadowExpand * 5 + Math.abs(material.shadowPosition.x) + Math.abs(material.shadowPosition.y) + (op.mergeRate ?? 0)
+    setUniforms(gl, glassProgram, {
+      u_viewport: [width, height],
+      u_resolution: [physicalWidth, physicalHeight],
+      u_dpr: dpr,
+      u_pass: 0,
+      u_quad: [op.bounds.x - reach, op.bounds.y - reach, op.bounds.w + reach * 2, op.bounds.h + reach * 2],
+      u_shadowExpand: shadow.u_shadowExpand,
+      u_shadowFactor: shadow.u_shadowFactor * (op.shadowScale ?? 1),
+      u_shadowOffset: [-shadow.u_shadowPosition[0], shadow.u_shadowPosition[1]],
+      u_shadowClipOn: op.shadowClip ? 1 : 0,
+      u_shadowClipRect: op.shadowClip ? [op.shadowClip.x, op.shadowClip.y, op.shadowClip.w, op.shadowClip.h] : [0, 0, 0, 0],
+      u_shadowClipCorner: op.shadowClip ? [op.shadowClip.radius, op.shadowClip.roundness ?? 5] : [0, 5],
+    })
+    scissor(op.clip)
+    gl.enable(gl.BLEND)
+    gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT)
+    gl.blendFunc(gl.ONE, gl.ONE)
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+    gl.blendEquation(gl.FUNC_ADD)
+  }
+
+  function drawOps(ops, sceneTexture) {
+    batch.begin({ width, height, dpr, sceneTexture })
+    let clip = undefined
+    for (const op of ops) {
+      if (op.clip !== clip) {
+        batch.flush()
+        clip = op.clip
+        scissor(clip)
+      }
+      batch.draw(op)
+    }
+    batch.flush()
+    gl.disable(gl.SCISSOR_TEST)
+  }
+
+  function render(frame) {
+    const count = frame.strata.length
+    ensureStrata(count)
+    const generation = atlas.generation
+
+    for (let k = 0; k < count; k++) {
+      const stratum = strata[k]
+      const below = k > 0 ? strata[k - 1] : null
+      const layer = frame.strata[k]
+      const sceneTexture = below ? below.pyramid.texture : stratum.pyramid.texture
+
+      if (k === 0) {
+        bindTarget(stratum.color)
+        gl.disable(gl.SCISSOR_TEST)
+        const c = frame.clearColor ?? [0, 0, 0, 1]
+        gl.clearColor(c[0], c[1], c[2], c[3])
+        gl.clear(gl.COLOR_BUFFER_BIT)
+      } else {
+        blit(below.color.texture, stratum.color.fbo)
+        for (const op of layer.glass) drawGlass(op, sceneTexture)
+        gl.disable(gl.SCISSOR_TEST)
+      }
+
+      drawOps(layer.ops, sceneTexture)
+
+      const next = frame.strata[k + 1]
+      if (next) {
+        bindTarget(stratum.color)
+        for (const op of next.glass) drawShadow(op)
+        gl.disable(gl.SCISSOR_TEST)
+        buildPyramid(stratum)
+        probe.request(k, stratum.pyramid, width, height)
+      }
+    }
+
+    if (atlas.generation !== generation) {
+      render(frame)
+      return
+    }
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+    gl.viewport(0, 0, physicalWidth, physicalHeight)
+    gl.disable(gl.BLEND)
+    gl.disable(gl.SCISSOR_TEST)
+    gl.useProgram(blitProgram.program)
+    gl.activeTexture(gl.TEXTURE0)
+    gl.bindTexture(gl.TEXTURE_2D, strata[count - 1].color.texture)
+    setUniforms(gl, blitProgram, { u_texture: 0, u_lod: 0 })
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+  }
+
+  function loadImage(source, options) {
+    return createImageTexture(gl, source, options)
+  }
+
+  function updateImage(image, source) {
+    updateImageTexture(gl, image, source)
+  }
+
+  function destroyImage(image) {
+    gl.deleteTexture(image.texture)
+  }
+
+  return {
+    gl,
+    atlas,
+    probe,
+    resize,
+    render,
+    loadImage,
+    updateImage,
+    destroyImage,
+    get levels() {
+      return levels
+    },
+    get width() {
+      return width
+    },
+    get height() {
+      return height
+    },
+    get dpr() {
+      return dpr
+    },
+  }
+}

package/src/render/shaders/color.js

@@ -0,0 +1,58 @@
+export const colorLib = /* glsl */ `
+const vec3 D65_WHITE = vec3(0.95045592705, 1.0, 1.08905775076);
+const mat3 RGB_TO_XYZ_M = mat3(
+  0.4124, 0.3576, 0.1805,
+  0.2126, 0.7152, 0.0722,
+  0.0193, 0.1192, 0.9505
+);
+const mat3 XYZ_TO_RGB_M = mat3(
+   3.2406255, -1.537208 , -0.4986286,
+  -0.9689307,  1.8757561,  0.0415175,
+   0.0557101, -0.2040211,  1.0569959
+);
+float UNCOMPAND_SRGB(float a) {
+  return a > 0.04045 ? pow((a + 0.055) / 1.055, 2.4) : a / 12.92;
+}
+float COMPAND_RGB(float a) {
+  return a <= 0.0031308 ? 12.92 * a : 1.055 * pow(a, 0.41666666666) - 0.055;
+}
+vec3 SRGB_TO_RGB(vec3 srgb) {
+  return vec3(UNCOMPAND_SRGB(srgb.x), UNCOMPAND_SRGB(srgb.y), UNCOMPAND_SRGB(srgb.z));
+}
+vec3 RGB_TO_SRGB(vec3 rgb) {
+  return vec3(COMPAND_RGB(rgb.x), COMPAND_RGB(rgb.y), COMPAND_RGB(rgb.z));
+}
+float XYZ_TO_LAB_F(float x) {
+  return x > 0.00885645167 ? pow(x, 0.333333333) : 7.78703703704 * x + 0.13793103448;
+}
+vec3 XYZ_TO_LAB(vec3 xyz) {
+  vec3 s = xyz / D65_WHITE;
+  s = vec3(XYZ_TO_LAB_F(s.x), XYZ_TO_LAB_F(s.y), XYZ_TO_LAB_F(s.z));
+  return vec3(116.0 * s.y - 16.0, 500.0 * (s.x - s.y), 200.0 * (s.y - s.z));
+}
+vec3 SRGB_TO_LAB(vec3 srgb) {
+  return XYZ_TO_LAB(SRGB_TO_RGB(srgb) * RGB_TO_XYZ_M);
+}
+vec3 LAB_TO_LCH(vec3 lab) {
+  return vec3(lab.x, sqrt(dot(lab.yz, lab.yz)), atan(lab.z, lab.y) * 57.2957795131);
+}
+vec3 SRGB_TO_LCH(vec3 srgb) {
+  return LAB_TO_LCH(SRGB_TO_LAB(srgb));
+}
+float LAB_TO_XYZ_F(float x) {
+  return x > 0.206897 ? x * x * x : 0.12841854934 * (x - 0.137931034);
+}
+vec3 LAB_TO_XYZ(vec3 lab) {
+  float w = (lab.x + 16.0) / 116.0;
+  return D65_WHITE * vec3(LAB_TO_XYZ_F(w + lab.y / 500.0), LAB_TO_XYZ_F(w), LAB_TO_XYZ_F(w - lab.z / 200.0));
+}
+vec3 LAB_TO_SRGB(vec3 lab) {
+  return RGB_TO_SRGB(LAB_TO_XYZ(lab) * XYZ_TO_RGB_M);
+}
+vec3 LCH_TO_LAB(vec3 lch) {
+  return vec3(lch.x, lch.y * cos(lch.z * 0.01745329251), lch.y * sin(lch.z * 0.01745329251));
+}
+vec3 LCH_TO_SRGB(vec3 lch) {
+  return LAB_TO_SRGB(LCH_TO_LAB(lch));
+}
+`