akarisub 0.2.2 → 1.0.0

package/src/ts/webgpu-renderer.ts

@@ -1,691 +0,0 @@
-/// <reference types="@webgpu/types" />
-
-import type { RenderImage } from './types'
-
-// Maximum images per batch
-const MAX_IMAGES_PER_BATCH = 256
-
-// WebGPU max texture array layers
-const MAX_TEXTURE_ARRAY_LAYERS = 256
-
-// WGSL Vertex Shader
-const VERTEX_SHADER = /* wgsl */ `
-struct VertexOutput {
-  @builtin(position) position: vec4f,
-  @location(0) @interpolate(flat) instanceIndex: u32,
-  @location(1) @interpolate(flat) destXY: vec2f,
-  @location(2) @interpolate(flat) texSize: vec2f,
-}
-
-struct Uniforms {
-  resolution: vec2f,
-}
-
-struct ImageData {
-  destRect: vec4f,   // x, y, w, h
-  texInfo: vec4f,    // texW, texH, texIndex, 0
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> imageData: array<ImageData>;
-
-// Quad vertices (two triangles)
-const QUAD_POSITIONS = array<vec2f, 6>(
-  vec2f(0.0, 0.0),
-  vec2f(1.0, 0.0),
-  vec2f(0.0, 1.0),
-  vec2f(1.0, 0.0),
-  vec2f(1.0, 1.0),
-  vec2f(0.0, 1.0)
-);
-
-@vertex
-fn vertexMain(
-  @builtin(vertex_index) vertexIndex: u32,
-  @builtin(instance_index) instanceIndex: u32
-) -> VertexOutput {
-  var output: VertexOutput;
-  
-  let data = imageData[instanceIndex];
-  let quadPos = QUAD_POSITIONS[vertexIndex];
-  let wh = data.destRect.zw;
-  
-  // Calculate pixel position
-  let pixelPos = data.destRect.xy + quadPos * wh;
-  
-  // Convert to clip space (-1 to 1)
-  var clipPos = (pixelPos / uniforms.resolution) * 2.0 - 1.0;
-  clipPos.y = -clipPos.y;
-  
-  output.position = vec4f(clipPos, 0.0, 1.0);
-  output.instanceIndex = instanceIndex;
-  output.destXY = data.destRect.xy;
-  output.texSize = data.texInfo.xy;
-  
-  return output;
-}
-`
-
-// WGSL Fragment Shader
-const FRAGMENT_SHADER = /* wgsl */ `
-@group(0) @binding(2) var texArray: texture_2d_array<f32>;
-
-struct ImageData {
-  destRect: vec4f,
-  texInfo: vec4f,
-}
-
-@group(0) @binding(1) var<storage, read> imageData: array<ImageData>;
-
-struct FragmentInput {
-  @builtin(position) fragCoord: vec4f,
-  @location(0) @interpolate(flat) instanceIndex: u32,
-  @location(1) @interpolate(flat) destXY: vec2f,
-  @location(2) @interpolate(flat) texSize: vec2f,
-}
-
-@fragment
-fn fragmentMain(input: FragmentInput) -> @location(0) vec4f {
-  let data = imageData[input.instanceIndex];
-  let texIndex = u32(data.texInfo.z);
-  
-  // Calculate texel coordinates
-  let texCoordF = floor(input.fragCoord.xy - input.destXY);
-  let texCoord = vec2i(texCoordF);
-  
-  // Bounds check
-  let texSizeI = vec2i(input.texSize);
-  if (texCoord.x < 0 || texCoord.y < 0 || texCoord.x >= texSizeI.x || texCoord.y >= texSizeI.y) {
-    discard;
-  }
-  
-  // Load from texture array
-  let color = textureLoad(texArray, texCoord, texIndex, 0);
-  
-  // Premultiplied alpha output
-  return vec4f(color.rgb * color.a, color.a);
-}
-`
-
-/**
- * Check if WebGPU is supported in the current browser.
- */
-export function isWebGPUSupported(): boolean {
-  return typeof navigator !== 'undefined' && 'gpu' in navigator
-}
-
-function toUint8View(data: ArrayBuffer | Uint8Array | Uint8ClampedArray): Uint8Array {
-  if (data instanceof ArrayBuffer) {
-    return new Uint8Array(data)
-  }
-
-  return new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
-}
-
-/**
- * High-performance WebGPU subtitle renderer for AkariSub.
- */
-export class WebGPURenderer {
-  private device: GPUDevice | null = null
-  private context: GPUCanvasContext | null = null
-  private pipeline: GPURenderPipeline | null = null
-  private bindGroupLayout: GPUBindGroupLayout | null = null
-
-  private uniformBuffer: GPUBuffer | null = null
-  private imageDataBuffer: GPUBuffer | null = null
-
-  // Texture array for batched rendering
-  private textureArray: GPUTexture | null = null
-  private textureArrayView: GPUTextureView | null = null
-  private textureArraySize = 0
-  private textureArrayWidth = 0
-  private textureArrayHeight = 0
-
-  private pendingDestroyTextures: GPUTexture[] = []
-
-  // Pre-allocated typed arrays (reused every frame - ZERO allocations in hot path)
-  private readonly imageDataArray: Float32Array
-  private readonly resolutionArray = new Float32Array(2)
-
-  // Bind group (recreated only when texture array changes)
-  private bindGroup: GPUBindGroup | null = null
-  private bindGroupDirty = true
-
-  // Track canvas size to avoid redundant updates
-  private lastCanvasWidth = 0
-  private lastCanvasHeight = 0
-
-  format: GPUTextureFormat = 'bgra8unorm'
-
-  private _canvas: HTMLCanvasElement | null = null
-  private _initPromise: Promise<void> | null = null
-  private _initialized = false
-
-  constructor() {
-    // Pre-allocate buffer for max images (8 floats per image: destRect + texInfo)
-    this.imageDataArray = new Float32Array(MAX_IMAGES_PER_BATCH * 8)
-  }
-
-  async init(): Promise<void> {
-    if (this._initPromise) return this._initPromise
-    this._initPromise = this._initDevice()
-    return this._initPromise
-  }
-
-  private async _initDevice(): Promise<void> {
-    if (!navigator.gpu) {
-      throw new Error('WebGPU not supported')
-    }
-
-    const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: 'high-performance'
-    })
-
-    if (!adapter) {
-      throw new Error('No WebGPU adapter found')
-    }
-
-    this.device = await adapter.requestDevice()
-    this.format = navigator.gpu.getPreferredCanvasFormat()
-
-    const vertexModule = this.device.createShaderModule({ code: VERTEX_SHADER })
-    const fragmentModule = this.device.createShaderModule({ code: FRAGMENT_SHADER })
-
-    this.uniformBuffer = this.device.createBuffer({
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    })
-
-    // Large storage buffer for all image data
-    this.imageDataBuffer = this.device.createBuffer({
-      size: MAX_IMAGES_PER_BATCH * 8 * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    })
-
-    // Create initial texture array with reasonable defaults
-    this.createTextureArray(256, 256, 32)
-
-    this.bindGroupLayout = this.device.createBindGroupLayout({
-      entries: [
-        { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
-        {
-          binding: 1,
-          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-          buffer: { type: 'read-only-storage' }
-        },
-        {
-          binding: 2,
-          visibility: GPUShaderStage.FRAGMENT,
-          texture: { sampleType: 'unfilterable-float', viewDimension: '2d-array' }
-        }
-      ]
-    })
-
-    const pipelineLayout = this.device.createPipelineLayout({
-      bindGroupLayouts: [this.bindGroupLayout]
-    })
-
-    this.pipeline = this.device.createRenderPipeline({
-      layout: pipelineLayout,
-      vertex: { module: vertexModule, entryPoint: 'vertexMain' },
-      fragment: {
-        module: fragmentModule,
-        entryPoint: 'fragmentMain',
-        targets: [
-          {
-            format: this.format,
-            blend: {
-              color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-              alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    this._initialized = true
-  }
-
-  // Round up to a multiple of 64: gives headroom against size jitter without
-  // power-of-2 over-allocation (a 1920x1080 blend region would otherwise
-  // round to 2048x2048 and waste ~2x memory).
-  private roundDim(n: number): number {
-    return (Math.max(n, 64) + 63) & ~63
-  }
-
-  // Round layers up to a multiple of 8, clamped to the WebGPU max
-  private roundLayers(n: number): number {
-    return Math.min((Math.max(n, 8) + 7) & ~7, MAX_TEXTURE_ARRAY_LAYERS)
-  }
-
-  private createTextureArray(width: number, height: number, layers: number): void {
-    if (this.textureArray) {
-      this.pendingDestroyTextures.push(this.textureArray)
-    }
-
-    const w = this.roundDim(width)
-    const h = this.roundDim(height)
-    const l = this.roundLayers(layers)
-
-    this.textureArray = this.device!.createTexture({
-      size: [w, h, l],
-      format: 'rgba8unorm',
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-    })
-    this.textureArrayView = this.textureArray.createView({ dimension: '2d-array' })
-    this.textureArrayWidth = w
-    this.textureArrayHeight = h
-    this.textureArraySize = l
-    this.bindGroupDirty = true
-
-    // Clear all texture layers to transparent to prevent garbage border artifacts
-    const commandEncoder = this.device!.createCommandEncoder()
-    for (let layer = 0; layer < l; layer++) {
-      const layerView = this.textureArray.createView({
-        dimension: '2d',
-        baseArrayLayer: layer,
-        arrayLayerCount: 1
-      })
-      const renderPass = commandEncoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: layerView,
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            loadOp: 'clear',
-            storeOp: 'store'
-          }
-        ]
-      })
-      renderPass.end()
-    }
-    this.device!.queue.submit([commandEncoder.finish()])
-  }
-
-  private ensureTextureArray(maxWidth: number, maxHeight: number, count: number): boolean {
-    // Clamp count to max layers
-    const clampedCount = Math.min(count, MAX_TEXTURE_ARRAY_LAYERS)
-
-    if (
-      maxWidth <= this.textureArrayWidth &&
-      maxHeight <= this.textureArrayHeight &&
-      clampedCount <= this.textureArraySize
-    ) {
-      return false
-    }
-    
-    const newWidth = Math.max(this.textureArrayWidth, maxWidth)
-    const newHeight = Math.max(this.textureArrayHeight, maxHeight)
-    const newLayers = Math.max(clampedCount, Math.min(this.textureArraySize, 16))
-
-    this.createTextureArray(newWidth, newHeight, newLayers)
-    return true
-  }
-
-  private updateBindGroup(): void {
-    if (!this.bindGroupDirty || !this.device || !this.bindGroupLayout) return
-
-    this.bindGroup = this.device.createBindGroup({
-      layout: this.bindGroupLayout,
-      entries: [
-        { binding: 0, resource: { buffer: this.uniformBuffer! } },
-        { binding: 1, resource: { buffer: this.imageDataBuffer! } },
-        { binding: 2, resource: this.textureArrayView! }
-      ]
-    })
-    this.bindGroupDirty = false
-  }
-
-  async setCanvas(canvas: HTMLCanvasElement, width: number, height: number): Promise<void> {
-    await this.init()
-
-    if (!this.device) throw new Error('WebGPU device not initialized')
-    if (width <= 0 || height <= 0) return
-
-    this._canvas = canvas
-    canvas.width = width
-    canvas.height = height
-
-    if (!this.context) {
-      this.context = canvas.getContext('webgpu')
-      if (!this.context) throw new Error('Could not get WebGPU context')
-
-      this.context.configure({
-        device: this.device,
-        format: this.format,
-        alphaMode: 'premultiplied'
-      })
-    }
-
-    this.resolutionArray[0] = width
-    this.resolutionArray[1] = height
-    this.device.queue.writeBuffer(this.uniformBuffer!, 0, this.resolutionArray)
-
-    this.lastCanvasWidth = width
-    this.lastCanvasHeight = height
-  }
-
-  updateSize(width: number, height: number): void {
-    if (!this.device || !this._canvas || width <= 0 || height <= 0) return
-    if (width === this.lastCanvasWidth && height === this.lastCanvasHeight) return
-
-    this._canvas.width = width
-    this._canvas.height = height
-    this.resolutionArray[0] = width
-    this.resolutionArray[1] = height
-    this.device.queue.writeBuffer(this.uniformBuffer!, 0, this.resolutionArray)
-
-    this.lastCanvasWidth = width
-    this.lastCanvasHeight = height
-  }
-
-  /**
-   * Render ImageBitmaps (async render mode)
-   * Handles batching when image count exceeds MAX_TEXTURE_ARRAY_LAYERS
-   */
-  renderBitmaps(
-    images: { image: ImageBitmap; x: number; y: number }[],
-    _canvasWidth: number,
-    _canvasHeight: number
-  ): void {
-    if (!this.device || !this.context || !this.pipeline) return
-
-    const len = images.length
-    if (len === 0) {
-      this.clear()
-      return
-    }
-
-    const currentTexture = this.context.getCurrentTexture()
-    if (currentTexture.width === 0 || currentTexture.height === 0) return
-
-    // Single pass: find max dimensions and count valid images
-    let maxW = 0,
-      maxH = 0,
-      validCount = 0
-    for (let i = 0; i < len; i++) {
-      const { image } = images[i]
-      const w = image.width,
-        h = image.height
-      if (w > 0 && h > 0) {
-        if (w > maxW) maxW = w
-        if (h > maxH) maxH = h
-        validCount++
-      }
-    }
-
-    if (validCount === 0) {
-      this.clear()
-      return
-    }
-
-    // Ensure texture array is large enough (capped at MAX_TEXTURE_ARRAY_LAYERS)
-    const batchSize = Math.min(validCount, MAX_TEXTURE_ARRAY_LAYERS)
-    this.ensureTextureArray(maxW, maxH, batchSize)
-    this.updateBindGroup()
-
-    const device = this.device
-    const queue = device.queue
-    const textureArray = this.textureArray!
-    const imageDataArray = this.imageDataArray
-    const textureView = currentTexture.createView()
-
-    // Process images in batches if needed
-    let imageIndex = 0
-    let isFirstBatch = true
-
-    while (imageIndex < len) {
-      let texIndex = 0
-
-      // Upload batch of textures
-      while (imageIndex < len && texIndex < MAX_TEXTURE_ARRAY_LAYERS) {
-        const img = images[imageIndex++]
-        const bitmap = img.image
-        const w = bitmap.width,
-          h = bitmap.height
-        if (w <= 0 || h <= 0) continue
-
-        // Copy to texture array layer
-        queue.copyExternalImageToTexture(
-          { source: bitmap, flipY: false },
-          { texture: textureArray, origin: [0, 0, texIndex], premultipliedAlpha: false },
-          { width: w, height: h }
-        )
-
-        // Fill pre-allocated array
-        const offset = texIndex << 3
-        imageDataArray[offset] = img.x
-        imageDataArray[offset + 1] = img.y
-        imageDataArray[offset + 2] = w
-        imageDataArray[offset + 3] = h
-        imageDataArray[offset + 4] = w
-        imageDataArray[offset + 5] = h
-        imageDataArray[offset + 6] = texIndex
-        imageDataArray[offset + 7] = 0
-
-        texIndex++
-      }
-
-      if (texIndex === 0) continue
-
-      // Upload buffer and draw batch
-      queue.writeBuffer(this.imageDataBuffer!, 0, imageDataArray.buffer, 0, texIndex << 5)
-
-      const commandEncoder = device.createCommandEncoder()
-      const renderPass = commandEncoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: textureView,
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            loadOp: isFirstBatch ? 'clear' : 'load',
-            storeOp: 'store'
-          }
-        ]
-      })
-
-      renderPass.setPipeline(this.pipeline)
-      renderPass.setBindGroup(0, this.bindGroup!)
-      renderPass.draw(6, texIndex)
-      renderPass.end()
-
-      queue.submit([commandEncoder.finish()])
-      isFirstBatch = false
-    }
-
-    this.cleanupPendingTextures()
-  }
-
-  /**
-   * Render from raw ArrayBuffer data (non-async render mode)
-   * Handles batching when image count exceeds MAX_TEXTURE_ARRAY_LAYERS
-   */
-  render(
-    images: RenderImage[],
-    _canvasWidth: number,
-    _canvasHeight: number
-  ): void {
-    if (!this.device || !this.context || !this.pipeline) return
-
-    const len = images.length
-    if (len === 0) {
-      this.clear()
-      return
-    }
-
-    const currentTexture = this.context.getCurrentTexture()
-    if (currentTexture.width === 0 || currentTexture.height === 0) return
-
-    // Single pass: find max dimensions and count valid images
-    let maxW = 0,
-      maxH = 0,
-      validCount = 0
-    for (let i = 0; i < len; i++) {
-      const { w, h } = images[i]
-      if (w > 0 && h > 0) {
-        if (w > maxW) maxW = w
-        if (h > maxH) maxH = h
-        validCount++
-      }
-    }
-
-    if (validCount === 0) {
-      this.clear()
-      return
-    }
-
-    // Ensure texture array is large enough (capped at MAX_TEXTURE_ARRAY_LAYERS)
-    const batchSize = Math.min(validCount, MAX_TEXTURE_ARRAY_LAYERS)
-    this.ensureTextureArray(maxW, maxH, batchSize)
-    this.updateBindGroup()
-
-    const device = this.device
-    const queue = device.queue
-    const textureArray = this.textureArray!
-    const imageDataArray = this.imageDataArray
-    const textureView = currentTexture.createView()
-
-    // Process images in batches if needed
-    let imageIndex = 0
-    let isFirstBatch = true
-
-    while (imageIndex < len) {
-      let texIndex = 0
-
-      // Upload batch of textures
-      while (imageIndex < len && texIndex < MAX_TEXTURE_ARRAY_LAYERS) {
-        const img = images[imageIndex++]
-        const w = img.w,
-          h = img.h
-        if (w <= 0 || h <= 0) continue
-
-        // Upload texture data
-        const imgData = img.image
-        if (imgData instanceof ImageBitmap) {
-          queue.copyExternalImageToTexture(
-            { source: imgData, flipY: false },
-            { texture: textureArray, origin: [0, 0, texIndex], premultipliedAlpha: false },
-            { width: w, height: h }
-          )
-        } else if (imgData instanceof ArrayBuffer || imgData instanceof Uint8Array || imgData instanceof Uint8ClampedArray) {
-          this.uploadTextureData(texIndex, imgData, w, h)
-        }
-
-        // Fill pre-allocated array
-        const offset = texIndex << 3
-        imageDataArray[offset] = img.x
-        imageDataArray[offset + 1] = img.y
-        imageDataArray[offset + 2] = w
-        imageDataArray[offset + 3] = h
-        imageDataArray[offset + 4] = w
-        imageDataArray[offset + 5] = h
-        imageDataArray[offset + 6] = texIndex
-        imageDataArray[offset + 7] = 0
-
-        texIndex++
-      }
-
-      if (texIndex === 0) continue
-
-      // Upload buffer and draw batch
-      queue.writeBuffer(this.imageDataBuffer!, 0, imageDataArray.buffer, 0, texIndex << 5)
-
-      const commandEncoder = device.createCommandEncoder()
-      const renderPass = commandEncoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: textureView,
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            loadOp: isFirstBatch ? 'clear' : 'load',
-            storeOp: 'store'
-          }
-        ]
-      })
-
-      renderPass.setPipeline(this.pipeline)
-      renderPass.setBindGroup(0, this.bindGroup!)
-      renderPass.draw(6, texIndex)
-      renderPass.end()
-
-      queue.submit([commandEncoder.finish()])
-      isFirstBatch = false
-    }
-
-    this.cleanupPendingTextures()
-  }
-
-  private uploadTextureData(
-    layerIndex: number,
-    rgbaBuffer: ArrayBuffer | Uint8Array | Uint8ClampedArray,
-    width: number,
-    height: number
-  ): void {
-    this.device!.queue.writeTexture(
-      { texture: this.textureArray!, origin: [0, 0, layerIndex] },
-      toUint8View(rgbaBuffer),
-      { bytesPerRow: width * 4 },
-      { width, height }
-    )
-  }
-
-  private cleanupPendingTextures(): void {
-    const pending = this.pendingDestroyTextures
-    const len = pending.length
-    if (len === 0) return
-
-    for (let i = 0; i < len; i++) {
-      pending[i].destroy()
-    }
-    pending.length = 0
-  }
-
-  clear(): void {
-    if (!this.device || !this.context) return
-
-    try {
-      const currentTexture = this.context.getCurrentTexture()
-      if (currentTexture.width === 0 || currentTexture.height === 0) return
-
-      const commandEncoder = this.device.createCommandEncoder()
-      const renderPass = commandEncoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: currentTexture.createView(),
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            loadOp: 'clear',
-            storeOp: 'store'
-          }
-        ]
-      })
-      renderPass.end()
-      this.device.queue.submit([commandEncoder.finish()])
-    } catch {
-      // Ignore errors
-    }
-  }
-
-  get initialized(): boolean {
-    return this._initialized
-  }
-
-  destroy(): void {
-    this.cleanupPendingTextures()
-
-    this.textureArray?.destroy()
-    this.textureArray = null
-    this.textureArrayView = null
-
-    this.uniformBuffer?.destroy()
-    this.uniformBuffer = null
-    this.imageDataBuffer?.destroy()
-    this.imageDataBuffer = null
-
-    this.bindGroup = null
-
-    this.device?.destroy()
-    this.device = null
-    this.context = null
-    this._canvas = null
-    this._initialized = false
-    this._initPromise = null
-  }
-}