@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/src/rendering/render/__tests__/webglRenderer.test.ts

@@ -0,0 +1,364 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { createWebGLRenderer } from '../createWebGLRenderer'
+import type { SurfaceBackend, SurfaceRegion } from '../index'
+
+const mocks = vi.hoisted(() => ({
+  mockDrawRectBuffer: vi.fn(() => true),
+  mockDrawLineStrips: vi.fn(() => true),
+  mockDrawFilledBand: vi.fn(() => true),
+  mockSetRegion: vi.fn(),
+  mockResize: vi.fn(),
+  mockDestroyCandle: vi.fn(),
+  mockDestroyLine: vi.fn(),
+}))
+
+vi.mock('../../../engine/renderers/webgl/candleSurface', () => {
+  const mr = mocks
+  return {
+    CandleWebGLSurface: class {
+      isAvailable = () => true
+      setRegion = mr.mockSetRegion
+      resize = mr.mockResize
+      clear = () => {}
+      drawRectBuffer = mr.mockDrawRectBuffer
+      drawRects = () => true
+      destroy = mr.mockDestroyCandle
+    },
+    LineWebGLSurface: class {
+      isAvailable = () => true
+      setRegion = mr.mockSetRegion
+      resize = mr.mockResize
+      clear = () => {}
+      drawLineStrips = mr.mockDrawLineStrips
+      drawFilledBand = mr.mockDrawFilledBand
+      destroy = mr.mockDestroyLine
+    },
+  }
+})
+
+function createMockSurfaceBackend(): SurfaceBackend {
+  let disposed = false
+  return {
+    isAvailable: () => !disposed,
+    resize: vi.fn(),
+    bindRegion: vi.fn((region: SurfaceRegion) => {
+      if (disposed) return false
+      return region.width > 0 && region.height > 0
+    }),
+    clearRegion: vi.fn(),
+    compositeTo: vi.fn(),
+    dispose: vi.fn(() => {
+      disposed = true
+    }),
+  }
+}
+
+function createMockSharedWebGLSurface() {
+  return {
+    isAvailable: vi.fn(() => true),
+    getGL: vi.fn(() => null),
+    getCanvas: vi.fn(() => ({ width: 0, height: 0 }) as HTMLCanvasElement),
+    resize: vi.fn(),
+    bindRegion: vi.fn(() => true),
+    clearRegion: vi.fn(),
+    compositeRegionTo: vi.fn(),
+    getPhysicalRegion: vi.fn(() => null),
+    destroy: vi.fn(),
+  }
+}
+
+function makeRenderer(): {
+  renderer: ReturnType<typeof createWebGLRenderer>
+  surface: SurfaceBackend
+  glSurface: ReturnType<typeof createMockSharedWebGLSurface>
+} {
+  const surface = createMockSurfaceBackend()
+  const glSurface = createMockSharedWebGLSurface()
+  const renderer = createWebGLRenderer(surface, glSurface as any)
+  return { renderer, surface, glSurface }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('createWebGLRenderer', () => {
+  describe('surface and caps accessors', () => {
+    it('surface returns the SurfaceBackend passed to the factory', () => {
+      const { renderer, surface } = makeRenderer()
+      expect(renderer.surface).toBe(surface)
+    })
+
+    it('caps reports webgl2 with compute disabled', () => {
+      const { renderer } = makeRenderer()
+      expect(renderer.caps).toEqual({
+        compute: false,
+        storageBuffer: false,
+        maxInstances: 1_000_000,
+        name: 'webgl2',
+      })
+    })
+  })
+
+  describe('buffer lifecycle', () => {
+    it('createBuffer returns an opaque handle', () => {
+      const { renderer } = makeRenderer()
+      const handle = renderer.createBuffer('vertex', 1024)
+      expect(handle).toBeDefined()
+      expect(typeof handle).toBe('object')
+    })
+
+    it('each createBuffer call returns a distinct handle', () => {
+      const { renderer } = makeRenderer()
+      const a = renderer.createBuffer('vertex', 64)
+      const b = renderer.createBuffer('instance', 128)
+      expect(a).not.toBe(b)
+    })
+
+    it('writeBuffer + destroyBuffer round-trips without error', () => {
+      const { renderer } = makeRenderer()
+      const handle = renderer.createBuffer('vertex', 1024)
+      const data = new Float32Array([1, 2, 3, 4])
+      expect(() => renderer.writeBuffer(handle, data)).not.toThrow()
+      expect(() => renderer.writeBuffer(handle, data, 16)).not.toThrow()
+      expect(() => renderer.destroyBuffer(handle)).not.toThrow()
+    })
+
+    it('destroyBuffer is idempotent for the same handle', () => {
+      const { renderer } = makeRenderer()
+      const handle = renderer.createBuffer('vertex', 64)
+      renderer.destroyBuffer(handle)
+      expect(() => renderer.destroyBuffer(handle)).not.toThrow()
+    })
+  })
+
+  describe('pipeline lifecycle', () => {
+    it('createPipeline returns an opaque handle', () => {
+      const { renderer } = makeRenderer()
+      const pipeline = renderer.createPipeline({ type: 'candle' })
+      expect(pipeline).toBeDefined()
+      expect(typeof pipeline).toBe('object')
+    })
+
+    it('destroyPipeline is idempotent', () => {
+      const { renderer } = makeRenderer()
+      const pipeline = renderer.createPipeline({ type: 'line' })
+      renderer.destroyPipeline(pipeline)
+      expect(() => renderer.destroyPipeline(pipeline)).not.toThrow()
+    })
+  })
+
+  describe('compute path (WebGL throw contract)', () => {
+    it('createComputePipeline throws', () => {
+      const { renderer } = makeRenderer()
+      expect(() => renderer.createComputePipeline({})).toThrow(/compute/)
+    })
+
+    it('dispatchCompute throws', () => {
+      const { renderer } = makeRenderer()
+      const fakePipeline = { __brand: 'ComputePipelineHandle' } as any
+      expect(() =>
+        renderer.dispatchCompute({ pipeline: fakePipeline, workgroups: [1], bindings: {} }),
+      ).toThrow(/compute/)
+    })
+  })
+
+  describe('frame lifecycle', () => {
+    it('beginFrame binds the region on the surface', () => {
+      const { renderer, surface } = makeRenderer()
+      const region: SurfaceRegion = { x: 0, y: 0, width: 800, height: 600, dpr: 2 }
+      renderer.beginFrame(region)
+      expect(surface.bindRegion).toHaveBeenCalledWith(region)
+    })
+
+    it('beginFrame sets region and resizes internal surfaces', () => {
+      const { renderer } = makeRenderer()
+      const region: SurfaceRegion = { x: 10, y: 20, width: 800, height: 600, dpr: 2 }
+      renderer.beginFrame(region)
+      expect(mocks.mockSetRegion).toHaveBeenCalledWith(region)
+      expect(mocks.mockResize).toHaveBeenCalledWith(800, 600, 2)
+    })
+
+    it('endFrame does not throw', () => {
+      const { renderer } = makeRenderer()
+      expect(() => renderer.endFrame()).not.toThrow()
+    })
+  })
+
+  describe('drawInstances', () => {
+    it('delegates to candle surface drawRectBuffer', () => {
+      const { renderer } = makeRenderer()
+      const region: SurfaceRegion = { x: 0, y: 0, width: 800, height: 600, dpr: 2 }
+      renderer.beginFrame(region)
+
+      const pipeline = renderer.createPipeline({ type: 'candle' })
+      const instanceBuf = renderer.createBuffer('instance', 256)
+      const rects = new Float32Array([0, 0, 100, 50, 100, 0, 100, 50])
+      renderer.writeBuffer(instanceBuf, rects)
+
+      const vertices = renderer.createBuffer('vertex', 48)
+      renderer.drawInstances({
+        pipeline,
+        vertices,
+        instances: instanceBuf,
+        instanceCount: 2,
+        vertexCount: 6,
+        uniforms: { color: '#ff0000', scrollLeft: 0 },
+      })
+
+      expect(mocks.mockDrawRectBuffer).toHaveBeenCalledTimes(1)
+      const args = mocks.mockDrawRectBuffer.mock.calls[0]
+      expect(args[0]).toBeInstanceOf(Float32Array)
+      expect(args[1]).toBe(2)
+      expect(args[2]).toBe('#ff0000')
+      expect(args[3]).toBe(0)
+    })
+
+    it('no-ops when instanceCount is zero', () => {
+      const { renderer } = makeRenderer()
+      renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
+      const pipeline = renderer.createPipeline({ type: 'candle' })
+      const buf = renderer.createBuffer('instance', 64)
+      renderer.writeBuffer(buf, new Float32Array([0, 0, 50, 50]))
+      renderer.drawInstances({
+        pipeline,
+        vertices: buf,
+        instances: buf,
+        instanceCount: 0,
+        vertexCount: 6,
+      })
+      expect(mocks.mockDrawRectBuffer).not.toHaveBeenCalled()
+    })
+
+    it('no-ops when pipeline type mismatch (line -> instances)', () => {
+      const { renderer } = makeRenderer()
+      renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
+      const pipeline = renderer.createPipeline({ type: 'line' })
+      const buf = renderer.createBuffer('instance', 64)
+      renderer.writeBuffer(buf, new Float32Array([0, 0, 50, 50]))
+      renderer.drawInstances({
+        pipeline,
+        vertices: buf,
+        instances: buf,
+        instanceCount: 1,
+        vertexCount: 6,
+      })
+      expect(mocks.mockDrawRectBuffer).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('drawLines', () => {
+    it('delegates to line surface drawLineStrips', () => {
+      const { renderer } = makeRenderer()
+      renderer.beginFrame({ x: 0, y: 0, width: 800, height: 600, dpr: 2 })
+
+      const pipeline = renderer.createPipeline({ type: 'line' })
+      const vertexBuf = renderer.createBuffer('vertex', 256)
+      const verts = new Float32Array([10, 20, 30, 40, 50, 60])
+      renderer.writeBuffer(vertexBuf, verts)
+
+      renderer.drawLines({
+        pipeline,
+        vertices: vertexBuf,
+        vertexCount: 3,
+        topology: 'strip',
+        uniforms: { color: '#00ff00', scrollLeft: 10, lineWidth: 1 },
+      })
+
+      expect(mocks.mockDrawLineStrips).toHaveBeenCalledTimes(1)
+      const args = mocks.mockDrawLineStrips.mock.calls[0]
+      expect(args[0]).toHaveLength(1)
+      expect(args[0][0].color).toBe('#00ff00')
+      expect(args[0][0].width).toBe(1)
+      expect(args[0][0].points).toHaveLength(3)
+      expect(args[1]).toBe(10)
+    })
+
+    it('delegates to line surface drawFilledBand for fill pipeline', () => {
+      const { renderer } = makeRenderer()
+      renderer.beginFrame({ x: 0, y: 0, width: 800, height: 600, dpr: 2 })
+
+      const pipeline = renderer.createPipeline({ type: 'fill' })
+      const vertexBuf = renderer.createBuffer('vertex', 256)
+      // [upper0_x, upper0_y, lower0_x, lower0_y, upper1_x, upper1_y, ...]
+      const verts = new Float32Array([0, 100, 0, 50, 100, 100, 100, 50, 200, 100, 200, 50])
+      renderer.writeBuffer(vertexBuf, verts)
+
+      renderer.drawLines({
+        pipeline,
+        vertices: vertexBuf,
+        vertexCount: 6,
+        uniforms: { color: '#0000ff', scrollLeft: 5 },
+      })
+
+      expect(mocks.mockDrawFilledBand).toHaveBeenCalledTimes(1)
+      const args = mocks.mockDrawFilledBand.mock.calls[0]
+      expect(args[0].upperPoints).toHaveLength(3)
+      expect(args[0].lowerPoints).toHaveLength(3)
+      expect(args[1]).toBe('#0000ff')
+      expect(args[2]).toBe(5)
+    })
+  })
+
+  describe('dispose lifecycle', () => {
+    it('dispose destroys internal surfaces and the surface backend', () => {
+      const { renderer, surface } = makeRenderer()
+      renderer.dispose()
+      expect(mocks.mockDestroyCandle).toHaveBeenCalledTimes(1)
+      expect(mocks.mockDestroyLine).toHaveBeenCalledTimes(1)
+      expect(surface.dispose).toHaveBeenCalledTimes(1)
+    })
+
+    it('dispose is idempotent', () => {
+      const { renderer } = makeRenderer()
+      renderer.dispose()
+      renderer.dispose()
+      expect(mocks.mockDestroyCandle).toHaveBeenCalledTimes(1)
+      expect(mocks.mockDestroyLine).toHaveBeenCalledTimes(1)
+    })
+
+    it('after dispose, createBuffer throws', () => {
+      const { renderer } = makeRenderer()
+      renderer.dispose()
+      expect(() => renderer.createBuffer('vertex', 64)).toThrow(/disposed/)
+    })
+
+    it('after dispose, createPipeline throws', () => {
+      const { renderer } = makeRenderer()
+      renderer.dispose()
+      expect(() => renderer.createPipeline({ type: 'candle' })).toThrow(/disposed/)
+    })
+
+    it('after dispose, draw calls are no-ops', () => {
+      const { renderer } = makeRenderer()
+      const pipeline = renderer.createPipeline({ type: 'candle' })
+      const buf = renderer.createBuffer('instance', 64)
+      renderer.writeBuffer(buf, new Float32Array([0, 0, 50, 50]))
+
+      renderer.dispose()
+
+      expect(() =>
+        renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 }),
+      ).not.toThrow()
+      expect(() =>
+        renderer.drawInstances({
+          pipeline,
+          vertices: buf,
+          instances: buf,
+          instanceCount: 1,
+          vertexCount: 6,
+        }),
+      ).not.toThrow()
+      expect(() =>
+        renderer.drawLines({
+          pipeline,
+          vertices: buf,
+          vertexCount: 2,
+        }),
+      ).not.toThrow()
+      expect(() => renderer.endFrame()).not.toThrow()
+      expect(mocks.mockDrawRectBuffer).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/rendering/render/createWebGLRenderer.ts

@@ -0,0 +1,289 @@
+import { CandleWebGLSurface, LineWebGLSurface } from '../../engine/renderers/webgl/candleSurface'
+import { SharedWebGLSurface } from '../../engine/renderers/webgl/sharedWebGLSurface'
+
+import type {
+  Renderer,
+  RendererCapabilities,
+  BufferHandle,
+  PipelineHandle,
+  ComputePipelineHandle,
+  BufferUsage,
+  DrawInstancesParams,
+  DrawLinesParams,
+  DispatchComputeParams,
+} from './Renderer'
+import type { SurfaceBackend, SurfaceRegion } from './SurfaceBackend'
+
+type WebGLPipelineDescriptor = {
+  type: 'candle' | 'line' | 'fill'
+}
+
+type WebGLDrawUniforms = {
+  color?: string
+  scrollLeft?: number
+  lineWidth?: number
+  alpha?: number
+}
+
+interface BufferRecord {
+  usage: BufferUsage
+  byteLength: number
+  data: ArrayBuffer | null
+}
+
+interface PipelineRecord {
+  type: 'candle' | 'line' | 'fill'
+}
+
+const handleCaps: RendererCapabilities = {
+  compute: false,
+  storageBuffer: false,
+  maxInstances: 1_000_000,
+  name: 'webgl2',
+}
+
+function toWebGLRegion(r: SurfaceRegion) {
+  return r as { x: number; y: number; width: number; height: number; dpr: number }
+}
+
+export function createWebGLRenderer(surface: SurfaceBackend, gl: SharedWebGLSurface): Renderer {
+  let disposed = false
+  let candleSurface: CandleWebGLSurface | null = null
+  let lineSurface: LineWebGLSurface | null = null
+  let fallbackCtx: CanvasRenderingContext2D | null = null
+  let fallbackDpr = 1
+
+  const candle = new CandleWebGLSurface(gl)
+  if (candle.isAvailable()) candleSurface = candle
+  const line = new LineWebGLSurface(gl)
+  if (line.isAvailable()) lineSurface = line
+
+  const bufferMeta = new WeakMap<object, BufferRecord>()
+  const pipelineMeta = new WeakMap<object, PipelineRecord>()
+
+  function disposeSurfaces(): void {
+    if (candleSurface) {
+      candleSurface.destroy()
+      candleSurface = null
+    }
+    if (lineSurface) {
+      lineSurface.destroy()
+      lineSurface = null
+    }
+  }
+
+  const renderer = {
+    get surface(): SurfaceBackend {
+      return surface
+    },
+
+    get caps(): RendererCapabilities {
+      return handleCaps
+    },
+
+    setFallbackContext(ctx: CanvasRenderingContext2D | null, dpr: number): void {
+      fallbackCtx = ctx
+      fallbackDpr = dpr
+    },
+
+    createBuffer(usage: BufferUsage, sizeBytes: number): BufferHandle {
+      if (disposed) {
+        throw new Error('Renderer is disposed')
+      }
+      const handle: object = {}
+      bufferMeta.set(handle, { usage, byteLength: sizeBytes, data: null })
+      return handle as BufferHandle
+    },
+
+    writeBuffer(handle: BufferHandle, data: ArrayBufferView, offsetBytes?: number): void {
+      if (disposed) return
+      const meta = bufferMeta.get(handle as object)
+      if (!meta) return
+      const offset = offsetBytes ?? 0
+      const neededSize = offset + data.byteLength
+      if (!meta.data || meta.data.byteLength < neededSize) {
+        const newBuf = new ArrayBuffer(Math.max(neededSize, meta.byteLength))
+        if (meta.data) {
+          new Uint8Array(newBuf).set(
+            new Uint8Array(meta.data, 0, Math.min(meta.data.byteLength, neededSize)),
+          )
+        }
+        meta.data = newBuf
+      }
+      const src = new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+      new Uint8Array(meta.data, offset).set(src)
+    },
+
+    destroyBuffer(handle: BufferHandle): void {
+      if (disposed) return
+      bufferMeta.delete(handle as object)
+    },
+
+    createPipeline(descriptor: unknown): PipelineHandle {
+      if (disposed) {
+        throw new Error('Renderer is disposed')
+      }
+      const desc = descriptor as WebGLPipelineDescriptor
+      const handle: object = {}
+      pipelineMeta.set(handle, { type: desc.type ?? 'candle' })
+      return handle as PipelineHandle
+    },
+
+    destroyPipeline(handle: PipelineHandle): void {
+      if (disposed) return
+      pipelineMeta.delete(handle as object)
+    },
+
+    createComputePipeline(_descriptor: unknown): ComputePipelineHandle {
+      throw new Error('compute not supported on WebGL backend (caps.compute === false)')
+    },
+
+    destroyComputePipeline(_handle: ComputePipelineHandle): void {
+      // no-op: WebGL has no compute pipelines
+    },
+
+    beginFrame(region: SurfaceRegion): void {
+      if (disposed) return
+      surface.bindRegion(region)
+      if (candleSurface) {
+        candleSurface.setRegion(toWebGLRegion(region))
+        candleSurface.resize(region.width, region.height, region.dpr)
+      }
+      if (lineSurface) {
+        lineSurface.setRegion(toWebGLRegion(region))
+        lineSurface.resize(region.width, region.height, region.dpr)
+      }
+    },
+
+    drawInstances(params: DrawInstancesParams): void {
+      if (disposed) return
+      const pipelineMeta_rec = pipelineMeta.get(params.pipeline as object)
+      if (!pipelineMeta_rec || pipelineMeta_rec.type !== 'candle') return
+
+      const instanceMeta = bufferMeta.get(params.instances as object)
+      if (!instanceMeta || !instanceMeta.data) return
+
+      const rectCount = params.instanceCount
+      if (rectCount <= 0) return
+
+      const floats = new Float32Array(instanceMeta.data, 0, rectCount * 4)
+      const color = (params.uniforms?.color as string) ?? '#000000'
+      const scrollLeft = (params.uniforms?.scrollLeft as number) ?? 0
+
+      if (candleSurface) {
+        candleSurface.drawRectBuffer(floats, rectCount, color, scrollLeft)
+        return
+      }
+
+      if (fallbackCtx) {
+        const ctx = fallbackCtx
+        ctx.fillStyle = color
+        for (let i = 0; i < rectCount; i++) {
+          const x = floats[i * 4] - scrollLeft
+          const y = floats[i * 4 + 1]
+          const w = Math.max(0, floats[i * 4 + 2])
+          const h = floats[i * 4 + 3]
+          ctx.fillRect(x, y, w, h)
+        }
+      }
+    },
+
+    drawLines(params: DrawLinesParams): void {
+      if (disposed) return
+      const pipelineMeta_rec = pipelineMeta.get(params.pipeline as object)
+      if (!pipelineMeta_rec) return
+
+      const vertexMeta = bufferMeta.get(params.vertices as object)
+      if (!vertexMeta || !vertexMeta.data) return
+      if (params.vertexCount < 2) return
+
+      const color = (params.uniforms?.color as string) ?? '#000000'
+      const scrollLeft = (params.uniforms?.scrollLeft as number) ?? 0
+
+      if (pipelineMeta_rec.type === 'fill') {
+        const floats = new Float32Array(vertexMeta.data, 0, params.vertexCount * 2)
+        const pointCount = Math.floor(params.vertexCount / 2)
+        const upperPoints: Array<{ x: number; y: number }> = []
+        const lowerPoints: Array<{ x: number; y: number }> = []
+        for (let i = 0; i < pointCount; i++) {
+          const offset = i * 4
+          upperPoints.push({ x: floats[offset], y: floats[offset + 1] })
+          lowerPoints.push({ x: floats[offset + 2], y: floats[offset + 3] })
+        }
+
+        if (lineSurface) {
+          lineSurface.drawFilledBand({ upperPoints, lowerPoints }, color, scrollLeft)
+          return
+        }
+
+        if (fallbackCtx) {
+          const ctx = fallbackCtx
+          ctx.beginPath()
+          ctx.moveTo(upperPoints[0].x - scrollLeft, upperPoints[0].y)
+          for (let i = 1; i < upperPoints.length; i++) {
+            ctx.lineTo(upperPoints[i].x - scrollLeft, upperPoints[i].y)
+          }
+          for (let i = lowerPoints.length - 1; i >= 0; i--) {
+            ctx.lineTo(lowerPoints[i].x - scrollLeft, lowerPoints[i].y)
+          }
+          ctx.closePath()
+          ctx.fillStyle = color
+          ctx.fill()
+        }
+        return
+      }
+
+      const floats = new Float32Array(vertexMeta.data, 0, params.vertexCount * 2)
+
+      if (lineSurface) {
+        const points: Array<{ x: number; y: number }> = []
+        for (let i = 0; i < params.vertexCount; i++) {
+          points.push({ x: floats[i * 2], y: floats[i * 2 + 1] })
+        }
+        const lineWidth = (params.uniforms?.lineWidth as number) ?? 1
+        const lines = [{ points, color, width: lineWidth }]
+        lineSurface.drawLineStrips(lines, scrollLeft)
+        return
+      }
+
+      if (fallbackCtx) {
+        const ctx = fallbackCtx
+        const lineWidth = (params.uniforms?.lineWidth as number) ?? 1
+        const dashPattern = params.uniforms?.dashPattern as number[] | undefined
+        ctx.beginPath()
+        ctx.moveTo(floats[0] - scrollLeft, floats[1])
+        for (let i = 1; i < params.vertexCount; i++) {
+          ctx.lineTo(floats[i * 2] - scrollLeft, floats[i * 2 + 1])
+        }
+        ctx.strokeStyle = color
+        ctx.lineWidth = lineWidth
+        if (dashPattern && dashPattern.length > 0) {
+          ctx.setLineDash(dashPattern)
+        }
+        ctx.stroke()
+        if (dashPattern && dashPattern.length > 0) {
+          ctx.setLineDash([])
+        }
+      }
+    },
+
+    dispatchCompute(_params: DispatchComputeParams): void {
+      if (!disposed) {
+        throw new Error('dispatchCompute requires a backend with caps.compute === true')
+      }
+    },
+
+    endFrame(): void {
+      // no-op per-frame cleanup; surfaces hold region reference until next frame
+    },
+
+    dispose(): void {
+      if (disposed) return
+      disposed = true
+      disposeSurfaces()
+      surface.dispose()
+    },
+  }
+
+  return renderer as Renderer
+}

package/src/rendering/render/createWebGLSurfaceBackend.ts

@@ -0,0 +1,44 @@
+import { SharedWebGLSurface } from '../../engine/renderers/webgl/sharedWebGLSurface'
+
+import type { SurfaceBackend, SurfaceRegion, CompositeOptions } from './SurfaceBackend'
+
+export function createWebGLSurfaceBackend(surface: SharedWebGLSurface): SurfaceBackend {
+  let disposed = false
+
+  return {
+    isAvailable(): boolean {
+      if (disposed) return false
+      return surface.isAvailable()
+    },
+
+    resize(widthLogical: number, heightLogical: number, dpr: number): void {
+      if (disposed) return
+      surface.resize(widthLogical, heightLogical, dpr)
+    },
+
+    bindRegion(region: SurfaceRegion): boolean {
+      if (disposed) return false
+      return surface.bindRegion(region)
+    },
+
+    clearRegion(region: SurfaceRegion): void {
+      if (disposed) return
+      surface.clearRegion(region)
+    },
+
+    compositeTo(
+      targetCtx: CanvasRenderingContext2D,
+      region: SurfaceRegion,
+      options?: CompositeOptions,
+    ): void {
+      if (disposed) return
+      surface.compositeRegionTo(targetCtx, region, options)
+    },
+
+    dispose(): void {
+      if (disposed) return
+      disposed = true
+      surface.destroy()
+    },
+  }
+}