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

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

@@ -0,0 +1,370 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createWebGPURenderer } from '../createWebGPURenderer'
+import { createFrameMetrics, getFrameMetrics, resetFrameMetrics } from '../frameMetrics'
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+function makeWebGPU() {
+  const passes: Array<ReturnType<typeof makePass>> = []
+  const renderPassDescriptors: GPURenderPassDescriptor[] = []
+  const pipelineDescriptors: GPURenderPipelineDescriptor[] = []
+  const buffers: Array<{ destroy: ReturnType<typeof vi.fn> }> = []
+  const lost = deferred<GPUDeviceLostInfo>()
+
+  function makePass() {
+    return {
+      setViewport: vi.fn(),
+      setScissorRect: vi.fn(),
+      setPipeline: vi.fn(),
+      setVertexBuffer: vi.fn(),
+      setBindGroup: vi.fn(),
+      draw: vi.fn(),
+      end: vi.fn(),
+    }
+  }
+
+  const queue = {
+    writeBuffer: vi.fn(),
+    submit: vi.fn(),
+    onSubmittedWorkDone: vi.fn(async () => {}),
+  }
+  const device = {
+    queue,
+    lost: lost.promise,
+    createBuffer: vi.fn(() => {
+      const buffer = { destroy: vi.fn() }
+      buffers.push(buffer)
+      return buffer
+    }),
+    createShaderModule: vi.fn((descriptor) => descriptor),
+    createRenderPipeline: vi.fn((descriptor: GPURenderPipelineDescriptor) => {
+      pipelineDescriptors.push(descriptor)
+      return { getBindGroupLayout: vi.fn(() => ({})) }
+    }),
+    createBindGroup: vi.fn((descriptor) => descriptor),
+    createTexture: vi.fn(() => ({
+      createView: vi.fn(() => ({ kind: 'msaa-view' })),
+      destroy: vi.fn(),
+    })),
+    createCommandEncoder: vi.fn(() => ({
+      beginRenderPass: vi.fn((descriptor: GPURenderPassDescriptor) => {
+        renderPassDescriptors.push(descriptor)
+        const pass = makePass()
+        passes.push(pass)
+        return pass
+      }),
+      finish: vi.fn(() => ({ kind: 'commands' })),
+    })),
+  }
+  const adapter = { requestDevice: vi.fn(async () => device) }
+  const gpu = {
+    requestAdapter: vi.fn(async () => adapter),
+    getPreferredCanvasFormat: vi.fn(() => 'bgra8unorm'),
+  }
+  const context = {
+    configure: vi.fn(),
+    unconfigure: vi.fn(),
+    getCurrentTexture: vi.fn(() => ({ createView: vi.fn(() => ({ kind: 'target-view' })) })),
+  }
+  const canvas = {
+    width: 1,
+    height: 1,
+    style: { width: '', height: '' },
+    getContext: vi.fn(() => context),
+  } as unknown as HTMLCanvasElement
+
+  return {
+    gpu,
+    adapter,
+    device,
+    queue,
+    context,
+    canvas,
+    passes,
+    renderPassDescriptors,
+    pipelineDescriptors,
+    buffers,
+    lost,
+  }
+}
+
+describe('createWebGPURenderer', () => {
+  it('requests a device and reports MVP capabilities', async () => {
+    const fake = makeWebGPU()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+    })
+
+    expect(fake.gpu.requestAdapter).toHaveBeenCalledOnce()
+    expect(fake.adapter.requestDevice).toHaveBeenCalledOnce()
+    expect(renderer.caps).toMatchObject({ name: 'webgpu', compute: false, storageBuffer: false })
+    expect(() => renderer.createComputePipeline({})).toThrow('compute not supported')
+  })
+
+  it('uploads owned buffers and delays destruction until submitted work completes', async () => {
+    const fake = makeWebGPU()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+    })
+    const handle = renderer.createBuffer('instance', 16)
+    const data = new Float32Array([1, 2, 3, 4])
+
+    renderer.writeBuffer(handle, data)
+    renderer.destroyBuffer(handle)
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(fake.queue.writeBuffer).toHaveBeenCalledWith(fake.buffers[0], 0, data.buffer, 0, 16)
+    expect(fake.queue.onSubmittedWorkDone).toHaveBeenCalledOnce()
+    expect(fake.buffers[0]?.destroy).toHaveBeenCalledOnce()
+  })
+
+  it('draws rectangle instances into an MSAA region', async () => {
+    const fake = makeWebGPU()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+    })
+    renderer.surface.resize(200, 100, 2)
+    renderer.beginFrame({ x: 10, y: 5, width: 80, height: 40, dpr: 2 })
+    const vertices = renderer.createBuffer('vertex', 4)
+    const instances = renderer.createBuffer('instance', 16)
+    const pipeline = renderer.createPipeline({ type: 'candle' })
+
+    const drawn = renderer.drawInstances({
+      pipeline,
+      vertices,
+      instances,
+      instanceCount: 3,
+      vertexCount: 6,
+      uniforms: { color: '#ff0000', scrollLeft: 4 },
+    })
+
+    expect(drawn).toBe(true)
+    expect(fake.queue.submit).not.toHaveBeenCalled()
+    renderer.endFrame()
+    expect(fake.device.createTexture).toHaveBeenCalledWith(
+      expect.objectContaining({ sampleCount: 4, format: 'bgra8unorm' }),
+    )
+    expect(fake.passes[0]?.setViewport).toHaveBeenCalledWith(20, 10, 160, 80, 0, 1)
+    expect(fake.passes[0]?.setScissorRect).toHaveBeenCalledWith(20, 10, 160, 80)
+    expect(fake.passes[0]?.draw).toHaveBeenCalledWith(6, 3)
+    expect(fake.queue.submit).toHaveBeenCalledOnce()
+  })
+
+  it('records multiple draws and submits once on endFrame', async () => {
+    const fake = makeWebGPU()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+    })
+    renderer.surface.resize(200, 100, 1)
+    renderer.beginFrame({ x: 0, y: 0, width: 200, height: 100, dpr: 1 })
+    const pipeline = renderer.createPipeline({ type: 'candle' })
+    const instances = renderer.createBuffer('instance', 16)
+    renderer.writeBuffer(instances, new Float32Array([0, 0, 10, 20]))
+    const vertices = renderer.createBuffer('vertex', 4)
+    const params = {
+      pipeline,
+      vertices,
+      instances,
+      instanceCount: 1,
+      vertexCount: 6,
+      uniforms: { color: '#f00', scrollLeft: 0 },
+    }
+
+    expect(renderer.drawInstances(params)).toBe(true)
+    expect(renderer.drawInstances(params)).toBe(true)
+    expect(fake.queue.submit).not.toHaveBeenCalled()
+    renderer.endFrame()
+    expect(fake.queue.submit).toHaveBeenCalledTimes(1)
+  })
+
+  it('preserves earlier rectangle batches within the same frame', async () => {
+    const fake = makeWebGPU()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+    })
+    renderer.surface.resize(200, 100, 1)
+    renderer.beginFrame({ x: 0, y: 0, width: 200, height: 100, dpr: 1 })
+    const vertices = renderer.createBuffer('vertex', 4)
+    const instances = renderer.createBuffer('instance', 16)
+    const pipeline = renderer.createPipeline({ type: 'candle' })
+    const params = {
+      pipeline,
+      vertices,
+      instances,
+      instanceCount: 1,
+      vertexCount: 6,
+      uniforms: { color: '#ff0000' },
+    }
+
+    expect(renderer.drawInstances(params)).toBe(true)
+    expect(renderer.drawInstances(params)).toBe(true)
+    renderer.endFrame()
+
+    expect(fake.renderPassDescriptors).toHaveLength(1)
+    expect(fake.renderPassDescriptors[0]?.colorAttachments[0]).toMatchObject({
+      loadOp: 'clear',
+      storeOp: 'store',
+    })
+    expect(fake.passes[0]?.draw).toHaveBeenCalledTimes(2)
+  })
+
+  it('draws multiple line strips in one render pass', async () => {
+    const fake = makeWebGPU()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+    })
+    renderer.surface.resize(200, 100, 1)
+    renderer.beginFrame({ x: 0, y: 0, width: 200, height: 100, dpr: 1 })
+    const pipeline = renderer.createPipeline({ type: 'line' })
+
+    const drawn = renderer.drawLines({
+      pipeline,
+      strips: [
+        {
+          points: [
+            { x: 0, y: 1 },
+            { x: 2, y: 3 },
+          ],
+          color: '#f00',
+          width: 1,
+        },
+        {
+          points: [
+            { x: 4, y: 5 },
+            { x: 6, y: 7 },
+          ],
+          color: '#0f0',
+          width: 2,
+        },
+      ],
+      uniforms: { scrollLeft: 12 },
+    })
+
+    expect(drawn).toBe(true)
+    expect(fake.queue.submit).not.toHaveBeenCalled()
+    renderer.endFrame()
+    expect(fake.passes).toHaveLength(1)
+    expect(fake.passes[0]?.draw).toHaveBeenCalledTimes(2)
+    const uniformWrites = fake.queue.writeBuffer.mock.calls.filter((call) => call[4] === 32)
+    expect(uniformWrites).toHaveLength(2)
+    for (const call of uniformWrites) {
+      expect(new Float32Array(call[2] as ArrayBuffer)[2]).toBe(12)
+    }
+    expect(fake.queue.submit).toHaveBeenCalledOnce()
+  })
+
+  it('uses triangle-strip for filled bands and reports device loss', async () => {
+    const fake = makeWebGPU()
+    const onDeviceLost = vi.fn()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+      onDeviceLost,
+    })
+    renderer.surface.resize(100, 100, 1)
+    renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
+    const vertices = renderer.createBuffer('vertex', 32)
+    const pipeline = renderer.createPipeline({ type: 'fill' })
+
+    expect(renderer.drawLines({ pipeline, vertices, vertexCount: 4 })).toBe(true)
+    renderer.endFrame()
+    expect(
+      fake.pipelineDescriptors.some((item) => item.primitive?.topology === 'triangle-strip'),
+    ).toBe(true)
+
+    const info = { reason: 'unknown', message: 'device reset' } as GPUDeviceLostInfo
+    fake.lost.resolve(info)
+    await Promise.resolve()
+    expect(onDeviceLost).toHaveBeenCalledWith(info)
+  })
+
+  it('reuses strip ResourceTable buffers when geometry revision is unchanged', async () => {
+    resetFrameMetrics()
+    const fake = makeWebGPU()
+    const metrics = createFrameMetrics()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+      metrics,
+    })
+    renderer.surface.resize(200, 100, 1)
+    const pipeline = renderer.createPipeline({ type: 'line' })
+    const strips = [
+      {
+        points: [
+          { x: 0, y: 1 },
+          { x: 2, y: 3 },
+        ],
+        color: '#f00',
+        width: 1,
+      },
+    ]
+
+    renderer.beginFrame({ x: 0, y: 0, width: 200, height: 100, dpr: 1 })
+    expect(renderer.drawLines({ pipeline, strips, uniforms: { scrollLeft: 0 } })).toBe(true)
+    renderer.endFrame()
+    const createsAfterFirst = fake.device.createBuffer.mock.calls.length
+    // strip 点列 4 floats = 16 bytes；uniform 为 32 bytes
+    const vertexWritesAfterFirst = fake.queue.writeBuffer.mock.calls.filter((c) => c[4] === 16)
+      .length
+    const uniformWritesAfterFirst = fake.queue.writeBuffer.mock.calls.filter((c) => c[4] === 32)
+      .length
+
+    renderer.beginFrame({ x: 0, y: 0, width: 200, height: 100, dpr: 1 })
+    expect(renderer.drawLines({ pipeline, strips, uniforms: { scrollLeft: 12 } })).toBe(true)
+    renderer.endFrame()
+
+    // 几何未变：strip vertex 不新建、不重传；uniform 仍写
+    expect(fake.device.createBuffer.mock.calls.length).toBe(createsAfterFirst)
+    expect(
+      fake.queue.writeBuffer.mock.calls.filter((c) => c[4] === 16).length,
+    ).toBe(vertexWritesAfterFirst)
+    expect(
+      fake.queue.writeBuffer.mock.calls.filter((c) => c[4] === 32).length,
+    ).toBeGreaterThan(uniformWritesAfterFirst)
+    expect(getFrameMetrics().queueSubmitCount).toBe(1)
+  })
+
+  it('records submit and draw metrics on endFrame', async () => {
+    resetFrameMetrics()
+    const fake = makeWebGPU()
+    const metrics = createFrameMetrics()
+    const renderer = await createWebGPURenderer({
+      gpu: fake.gpu as unknown as GPU,
+      canvas: fake.canvas,
+      metrics,
+    })
+    renderer.surface.resize(200, 100, 1)
+    renderer.beginFrame({ x: 0, y: 0, width: 200, height: 100, dpr: 1 })
+    const pipeline = renderer.createPipeline({ type: 'candle' })
+    const instances = renderer.createBuffer('instance', 16)
+    const vertices = renderer.createBuffer('vertex', 4)
+    renderer.drawInstances({
+      pipeline,
+      vertices,
+      instances,
+      instanceCount: 1,
+      vertexCount: 6,
+      uniforms: { color: '#f00', scrollLeft: 0 },
+    })
+    renderer.endFrame()
+    expect(getFrameMetrics()).toMatchObject({
+      queueSubmitCount: 1,
+      drawCallCount: 1,
+    })
+  })
+})

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

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createFrameMetrics } from '../frameMetrics'
+import { createWebGPUResourceTable } from '../webgpuResourceTable'
+
+function makeDevice() {
+  const buffers: Array<{ destroy: ReturnType<typeof vi.fn>; size: number }> = []
+  const queue = {
+    writeBuffer: vi.fn(),
+  }
+  const device = {
+    queue,
+    createBuffer: vi.fn(({ size }: { size: number }) => {
+      const buffer = { destroy: vi.fn(), size }
+      buffers.push(buffer)
+      return buffer
+    }),
+  }
+  return { device, queue, buffers }
+}
+
+describe('createWebGPUResourceTable', () => {
+  it('reuses buffer when revision unchanged', () => {
+    const fake = makeDevice()
+    const metrics = createFrameMetrics()
+    metrics.beginFrame()
+    const table = createWebGPUResourceTable({
+      device: fake.device as unknown as GPUDevice,
+      metrics,
+    })
+    const data = new Float32Array([1, 2, 3, 4])
+    const a = table.ensureUploaded({ key: 'k', revision: 1, data, usage: 'vertex' })
+    const b = table.ensureUploaded({ key: 'k', revision: 1, data, usage: 'vertex' })
+    expect(a.buffer).toBe(b.buffer)
+    expect(fake.device.createBuffer).toHaveBeenCalledTimes(1)
+    expect(fake.queue.writeBuffer).toHaveBeenCalledTimes(1)
+  })
+
+  it('uploads again when revision changes', () => {
+    const fake = makeDevice()
+    const metrics = createFrameMetrics()
+    metrics.beginFrame()
+    const table = createWebGPUResourceTable({
+      device: fake.device as unknown as GPUDevice,
+      metrics,
+    })
+    table.ensureUploaded({
+      key: 'k',
+      revision: 1,
+      data: new Float32Array([1, 2, 3, 4]),
+      usage: 'vertex',
+    })
+    table.ensureUploaded({
+      key: 'k',
+      revision: 2,
+      data: new Float32Array([5, 6, 7, 8]),
+      usage: 'vertex',
+    })
+    expect(fake.device.createBuffer).toHaveBeenCalledTimes(1)
+    expect(fake.queue.writeBuffer).toHaveBeenCalledTimes(2)
+  })
+})

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

@@ -0,0 +1,120 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createWebGPUSurfaceBackend } from '../createWebGPUSurfaceBackend'
+
+function makeSurface() {
+  const context = {
+    configure: vi.fn(),
+    unconfigure: vi.fn(),
+    getCurrentTexture: vi.fn(() => ({ createView: vi.fn(() => ({ id: 'view' })) })),
+  }
+  const canvas = {
+    width: 1,
+    height: 1,
+    style: { width: '', height: '' },
+    getContext: vi.fn(() => context),
+  } as unknown as HTMLCanvasElement
+  const device = {} as GPUDevice
+  const surface = createWebGPUSurfaceBackend({ canvas, device, format: 'bgra8unorm' })
+  return { canvas, context, device, surface }
+}
+
+describe('createWebGPUSurfaceBackend', () => {
+  it('configures a premultiplied WebGPU canvas', () => {
+    const { context, device } = makeSurface()
+
+    expect(context.configure).toHaveBeenCalledWith({
+      device,
+      format: 'bgra8unorm',
+      alphaMode: 'premultiplied',
+      usage: 0x10,
+    })
+  })
+
+  it('resizes the backing canvas using DPR and binds a logical region', () => {
+    const { canvas, surface } = makeSurface()
+
+    surface.resize(320, 180, 1.5)
+
+    expect(canvas.width).toBe(480)
+    expect(canvas.height).toBe(270)
+    expect(surface.bindRegion({ x: 10, y: 20, width: 100, height: 50, dpr: 1.5 })).toBe(true)
+    expect(surface.getBoundRegion()).toEqual({ x: 10, y: 20, width: 100, height: 50, dpr: 1.5 })
+  })
+
+  it('sets CSS size on resize for hybrid DOM mounting', () => {
+    const { canvas, surface } = makeSurface()
+
+    surface.resize(320, 180, 1.5)
+
+    expect(canvas.style.width).toBe('320px')
+    expect(canvas.style.height).toBe('180px')
+  })
+
+  it('compositeTo is a no-op under hybrid DOM (M2)', () => {
+    const { surface } = makeSurface()
+    const target = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      setTransform: vi.fn(),
+      drawImage: vi.fn(),
+    } as unknown as CanvasRenderingContext2D
+
+    surface.compositeTo(target, { x: 10, y: 20, width: 100, height: 50, dpr: 2 })
+
+    expect(target.drawImage).not.toHaveBeenCalled()
+  })
+
+  it('clearRegion submits a transparent clear of the WebGPU canvas', () => {
+    const context = {
+      configure: vi.fn(),
+      unconfigure: vi.fn(),
+      getCurrentTexture: vi.fn(() => ({ createView: vi.fn(() => ({ id: 'view' })) })),
+    }
+    const canvas = {
+      width: 100,
+      height: 50,
+      style: { width: '', height: '' },
+      getContext: vi.fn(() => context),
+    } as unknown as HTMLCanvasElement
+    const pass = { end: vi.fn() }
+    const encoder = {
+      beginRenderPass: vi.fn(() => pass),
+      finish: vi.fn(() => ({ kind: 'commands' })),
+    }
+    const queue = { submit: vi.fn() }
+    const device = {
+      createCommandEncoder: vi.fn(() => encoder),
+      queue,
+    } as unknown as GPUDevice
+    const surface = createWebGPUSurfaceBackend({ canvas, device, format: 'bgra8unorm' })
+
+    surface.clearRegion({ x: 0, y: 0, width: 100, height: 50, dpr: 1 })
+
+    expect(device.createCommandEncoder).toHaveBeenCalledOnce()
+    expect(encoder.beginRenderPass).toHaveBeenCalledWith(
+      expect.objectContaining({
+        colorAttachments: [
+          expect.objectContaining({
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            loadOp: 'clear',
+            storeOp: 'store',
+          }),
+        ],
+      }),
+    )
+    expect(pass.end).toHaveBeenCalledOnce()
+    expect(queue.submit).toHaveBeenCalledOnce()
+  })
+
+  it('unconfigures once and rejects work after dispose', () => {
+    const { context, surface } = makeSurface()
+
+    surface.dispose()
+    surface.dispose()
+
+    expect(context.unconfigure).toHaveBeenCalledOnce()
+    expect(surface.isAvailable()).toBe(false)
+    expect(surface.bindRegion({ x: 0, y: 0, width: 10, height: 10, dpr: 1 })).toBe(false)
+  })
+})

package/src/rendering/render/createCanvas2DRenderer.ts

@@ -0,0 +1,83 @@
+import type {
+  BufferHandle,
+  BufferUsage,
+  ComputePipelineHandle,
+  DispatchComputeParams,
+  DrawInstancesParams,
+  DrawLinesParams,
+  PipelineHandle,
+  Renderer,
+} from './Renderer'
+import type { SurfaceBackend } from './SurfaceBackend'
+
+export function createCanvas2DRenderer(): Renderer {
+  let disposed = false
+  const buffers = new WeakSet<object>()
+  const pipelines = new WeakSet<object>()
+
+  const surface: SurfaceBackend = {
+    isAvailable: () => false,
+    resize: () => {},
+    bindRegion: () => false,
+    clearRegion: () => {},
+    compositeTo: () => {},
+    dispose: () => {},
+  }
+
+  function assertActive(): void {
+    if (disposed) throw new Error('Renderer is disposed')
+  }
+
+  return {
+    surface,
+    caps: {
+      compute: false,
+      storageBuffer: false,
+      maxInstances: 0,
+      name: 'canvas2d',
+    },
+    createBuffer(_usage: BufferUsage, _sizeBytes: number): BufferHandle {
+      assertActive()
+      const handle = {}
+      buffers.add(handle)
+      return handle as BufferHandle
+    },
+    writeBuffer(handle: BufferHandle): void {
+      if (disposed || !buffers.has(handle as object)) return
+    },
+    destroyBuffer(handle: BufferHandle): void {
+      if (disposed) return
+      buffers.delete(handle as object)
+    },
+    createPipeline(_descriptor: unknown): PipelineHandle {
+      assertActive()
+      const handle = {}
+      pipelines.add(handle)
+      return handle as PipelineHandle
+    },
+    destroyPipeline(handle: PipelineHandle): void {
+      if (disposed) return
+      pipelines.delete(handle as object)
+    },
+    createComputePipeline(_descriptor: unknown): ComputePipelineHandle {
+      throw new Error('compute not supported on Canvas2D backend (caps.compute === false)')
+    },
+    destroyComputePipeline(_handle: ComputePipelineHandle): void {},
+    beginFrame(): void {},
+    drawInstances(_params: DrawInstancesParams): boolean {
+      return false
+    },
+    drawLines(_params: DrawLinesParams): boolean {
+      return false
+    },
+    dispatchCompute(_params: DispatchComputeParams): void {
+      throw new Error('dispatchCompute requires a backend with caps.compute === true')
+    },
+    endFrame(): void {},
+    dispose(): void {
+      if (disposed) return
+      disposed = true
+      surface.dispose()
+    },
+  }
+}

package/src/rendering/render/createDefaultRendererHost.ts

@@ -0,0 +1,74 @@
+import { SharedWebGLSurface } from '../../engine/renderers/webgl/sharedWebGLSurface'
+import { createCanvas2DRenderer } from './createCanvas2DRenderer'
+import { createWebGLRenderer } from './createWebGLRenderer'
+import { createWebGLSurfaceBackend } from './createWebGLSurfaceBackend'
+import { createWebGPURenderer } from './createWebGPURenderer'
+import {
+  createRendererHost,
+  createRendererHostFromRenderer,
+  type RendererBackend,
+  type RendererHost,
+  type RendererHostDependencies,
+  type RendererHostListeners,
+} from './rendererHost'
+import type { Renderer } from './Renderer'
+
+function createWebGLBackendRenderer(): Renderer {
+  const shared = new SharedWebGLSurface()
+  const surface = createWebGLSurfaceBackend(shared)
+  if (!surface.isAvailable()) {
+    surface.dispose()
+    throw new Error('WebGL2 unavailable')
+  }
+  return createWebGLRenderer(surface, shared)
+}
+
+function createDependencies(hostRef: { current: RendererHost | null }): RendererHostDependencies {
+  return {
+    createWebGPU: () =>
+      createWebGPURenderer({
+        onDeviceLost: (info) => {
+          void hostRef.current?.handleDeviceLost(info.message || 'WebGPU device lost')
+        },
+      }),
+    createWebGL: createWebGLBackendRenderer,
+    createCanvas: createCanvas2DRenderer,
+  }
+}
+
+export async function createDefaultRendererHost(
+  preference: RendererBackend,
+  listeners: RendererHostListeners = {},
+): Promise<RendererHost> {
+  const hostRef = { current: null as RendererHost | null }
+  const host = await createRendererHost(preference, createDependencies(hostRef))
+  hostRef.current = host
+  host.setListeners(listeners)
+  return host
+}
+
+export function createDefaultRendererHostSync(
+  listeners: RendererHostListeners = {},
+): RendererHost {
+  const hostRef = { current: null as RendererHost | null }
+  const deps = createDependencies(hostRef)
+  let renderer: Renderer
+  let effective: RendererBackend
+  let error: string | null = null
+  try {
+    renderer = createWebGLBackendRenderer()
+    effective = 'webgl'
+  } catch (cause) {
+    renderer = createCanvas2DRenderer()
+    effective = 'canvas'
+    error = cause instanceof Error ? cause.message : String(cause)
+  }
+  const host = createRendererHostFromRenderer(
+    'webgl',
+    { renderer, effective, error },
+    deps,
+  )
+  hostRef.current = host
+  host.setListeners(listeners)
+  return host
+}