akarisub 0.2.1 → 0.2.2

package/src/ts/types.ts

@@ -8,9 +8,9 @@
 
 /** ASS Event (dialogue/subtitle entry) */
 export interface ASSEvent {
-  /** Start Time of the Event (in seconds) */
+  /** Start Time of the Event (in milliseconds) */
   Start: number
-  /** Duration of the Event (in seconds) */
+  /** Duration of the Event (in milliseconds) */
   Duration: number
   /** Style name */
   Style: string
@@ -321,7 +321,6 @@ export type WorkerInboundMessage =
   | { target: 'resetStats' }
   | { target: 'getEventCount' }
   | { target: 'getStyleCount' }
-  | { target: 'runBenchmark' }
   | { target: 'getColorSpace' }
 
 // =============================================================================
@@ -389,6 +388,8 @@ export interface AkariSubModule extends EmscriptenModule {
   _akarisub_style_set_num: (handle: number, index: number, field: number, value: number) => void
   _akarisub_style_get_str: (handle: number, index: number, field: number) => number
   _akarisub_style_set_str: (handle: number, index: number, field: number, valuePtr: number) => void
+  _akarisub_get_event_time_range: (handle: number, outPtr: number) => number
+  _akarisub_get_empty_window: (handle: number, tm: number, outPtr: number) => number
   _akarisub_render_blend_collect: (handle: number, time: number, force: number, outPtr: number, maxItems: number) => number
   _akarisub_render_image_collect: (handle: number, time: number, force: number, outPtr: number, maxItems: number) => number
   FS_createPath: (parent: string, path: string, canRead: boolean, canWrite: boolean) => void

package/src/ts/webgl2-renderer.ts

@@ -179,7 +179,6 @@ export class WebGL2Renderer {
     gl.bindVertexArray(null)
 
     // Texture array
-    this._texArray = gl.createTexture()!
     this._allocateTextureArray(256, 256, 32)
 
     // Premultiplied-alpha blending
@@ -194,18 +193,28 @@ export class WebGL2Renderer {
   // Texture management
   // ==========================================================================
 
-  private _nextPow2(n: number): number {
-    n--; n |= n >> 1; n |= n >> 2; n |= n >> 4; n |= n >> 8; n |= n >> 16; return n + 1
+  // 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 layer cap
+  private _roundLayers(n: number): number {
+    return Math.min((Math.max(n, 8) + 7) & ~7, MAX_TEXTURE_ARRAY_LAYERS)
   }
 
   private _allocateTextureArray(width: number, height: number, layers: number): void {
     const gl = this._gl!
-    const w = this._nextPow2(Math.max(width, 64))
-    const h = this._nextPow2(Math.max(height, 64))
-    const l = Math.min(this._nextPow2(Math.max(layers, 16)), MAX_TEXTURE_ARRAY_LAYERS)
+    const w = this._roundDim(width)
+    const h = this._roundDim(height)
+    const l = this._roundLayers(layers)
 
+    if (this._texArray) gl.deleteTexture(this._texArray)
+    this._texArray = gl.createTexture()!
     gl.bindTexture(gl.TEXTURE_2D_ARRAY, this._texArray)
-    gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, gl.RGBA8, w, h, l, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+    gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, w, h, l)
     gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
     gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
     gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
@@ -219,12 +228,9 @@ export class WebGL2Renderer {
   private _ensureTextureArray(maxW: number, maxH: number, count: number): void {
     const c = Math.min(count, MAX_TEXTURE_ARRAY_LAYERS)
     if (maxW <= this._texWidth && maxH <= this._texHeight && c <= this._texLayers) return
-    const newW = this._nextPow2(Math.max(this._texWidth, maxW))
-    const newH = this._nextPow2(Math.max(this._texHeight, maxH))
-    const newL = Math.min(
-      this._nextPow2(Math.max(this._texLayers, c, c + 16)),
-      MAX_TEXTURE_ARRAY_LAYERS
-    )
+    const newW = Math.max(this._texWidth, maxW)
+    const newH = Math.max(this._texHeight, maxH)
+    const newL = Math.max(c, Math.min(this._texLayers, 16))
     this._allocateTextureArray(newW, newH, newL)
   }
 

package/src/ts/webgpu-renderer.ts

@@ -147,10 +147,6 @@ export class WebGPURenderer {
   private readonly imageDataArray: Float32Array
   private readonly resolutionArray = new Float32Array(2)
 
-  // Reusable conversion buffer for RGBA->BGRA (grows as needed, never shrinks)
-  private conversionBuffer: Uint8Array | null = null
-  private conversionBufferSize = 0
-
   // Bind group (recreated only when texture array changes)
   private bindGroup: GPUBindGroup | null = null
   private bindGroupDirty = true
@@ -251,15 +247,16 @@ export class WebGPURenderer {
     this._initialized = true
   }
 
-  // Round up to next power of 2 for GPU-friendly sizes
-  private nextPowerOf2(n: number): number {
-    n--
-    n |= n >> 1
-    n |= n >> 2
-    n |= n >> 4
-    n |= n >> 8
-    n |= n >> 16
-    return n + 1
+  // 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 {
@@ -267,15 +264,13 @@ export class WebGPURenderer {
       this.pendingDestroyTextures.push(this.textureArray)
     }
 
-    // Use power-of-2 dimensions for better GPU performance
-    const w = this.nextPowerOf2(Math.max(width, 64))
-    const h = this.nextPowerOf2(Math.max(height, 64))
-    // Clamp layers to WebGPU max (256)
-    const l = Math.min(this.nextPowerOf2(Math.max(layers, 16)), MAX_TEXTURE_ARRAY_LAYERS)
+    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: this.format,
+      format: 'rgba8unorm',
       usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
     })
     this.textureArrayView = this.textureArray.createView({ dimension: '2d-array' })
@@ -318,14 +313,10 @@ export class WebGPURenderer {
     ) {
       return false
     }
-
-    // Grow with some headroom to avoid frequent resizes, but cap at max layers
-    const newWidth = this.nextPowerOf2(Math.max(this.textureArrayWidth, maxWidth))
-    const newHeight = this.nextPowerOf2(Math.max(this.textureArrayHeight, maxHeight))
-    const newLayers = Math.min(
-      this.nextPowerOf2(Math.max(this.textureArraySize, clampedCount, clampedCount + 16)),
-      MAX_TEXTURE_ARRAY_LAYERS
-    )
+    
+    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
@@ -345,15 +336,6 @@ export class WebGPURenderer {
     this.bindGroupDirty = false
   }
 
-  private ensureConversionBuffer(size: number): Uint8Array {
-    if (this.conversionBufferSize < size) {
-      // Grow with 50% headroom to reduce reallocations
-      this.conversionBufferSize = Math.max(size, (this.conversionBufferSize * 1.5) | 0, 65536)
-      this.conversionBuffer = new Uint8Array(this.conversionBufferSize)
-    }
-    return this.conversionBuffer!
-  }
-
   async setCanvas(canvas: HTMLCanvasElement, width: number, height: number): Promise<void> {
     await this.init()
 
@@ -560,7 +542,6 @@ export class WebGPURenderer {
     const queue = device.queue
     const textureArray = this.textureArray!
     const imageDataArray = this.imageDataArray
-    const isBGRA = this.format === 'bgra8unorm'
     const textureView = currentTexture.createView()
 
     // Process images in batches if needed
@@ -586,7 +567,7 @@ export class WebGPURenderer {
             { width: w, height: h }
           )
         } else if (imgData instanceof ArrayBuffer || imgData instanceof Uint8Array || imgData instanceof Uint8ClampedArray) {
-          this.uploadTextureData(texIndex, imgData, w, h, isBGRA)
+          this.uploadTextureData(texIndex, imgData, w, h)
         }
 
         // Fill pre-allocated array
@@ -636,38 +617,14 @@ export class WebGPURenderer {
     layerIndex: number,
     rgbaBuffer: ArrayBuffer | Uint8Array | Uint8ClampedArray,
     width: number,
-    height: number,
-    swapRB: boolean
+    height: number
   ): void {
-    const size = width * height * 4
-    const src = toUint8View(rgbaBuffer)
-
-    if (swapRB) {
-      // Use reusable conversion buffer
-      const uploadData = this.ensureConversionBuffer(size)
-
-      // Unrolled loop for better performance
-      for (let j = 0; j < size; j += 4) {
-        uploadData[j] = src[j + 2] // B <- R
-        uploadData[j + 1] = src[j + 1] // G
-        uploadData[j + 2] = src[j] // R <- B
-        uploadData[j + 3] = src[j + 3] // A
-      }
-
-      this.device!.queue.writeTexture(
-        { texture: this.textureArray!, origin: [0, 0, layerIndex] },
-        uploadData.buffer,
-        { bytesPerRow: width * 4 },
-        { width, height }
-      )
-    } else {
-      this.device!.queue.writeTexture(
-        { texture: this.textureArray!, origin: [0, 0, layerIndex] },
-        src,
-        { bytesPerRow: width * 4 },
-        { width, height }
-      )
-    }
+    this.device!.queue.writeTexture(
+      { texture: this.textureArray!, origin: [0, 0, layerIndex] },
+      toUint8View(rgbaBuffer),
+      { bytesPerRow: width * 4 },
+      { width, height }
+    )
   }
 
   private cleanupPendingTextures(): void {
@@ -723,8 +680,6 @@ export class WebGPURenderer {
     this.imageDataBuffer = null
 
     this.bindGroup = null
-    this.conversionBuffer = null
-    this.conversionBufferSize = 0
 
     this.device?.destroy()
     this.device = null

package/src/ts/worker.ts

@@ -144,6 +144,8 @@ interface AkariSubApi {
   styleSetNum: (handle: number, index: number, field: number, value: number) => void
   styleGetStr: (handle: number, index: number, field: number) => number
   styleSetStr: (handle: number, index: number, field: number, valuePtr: number) => void
+  getEventTimeRange: (handle: number, outPtr: number) => number
+  getEmptyWindow: (handle: number, tm: number, outPtr: number) => number
   renderBlendCollect: (handle: number, time: number, force: number, outPtr: number, maxItems: number) => number
   renderImageCollect: (handle: number, time: number, force: number, outPtr: number, maxItems: number) => number
 }
@@ -162,7 +164,7 @@ const FULL_WARMUP_CAP_SECONDS = 30
 const FULL_WARMUP_STEP_SECONDS = 1
 const FULL_WARMUP_YIELD_EVERY = 24
 const ASS_TIME_SCALE = 1000
-const imagePool: RenderResultItem[] = new Array(MAX_POOLED_IMAGES)
+const imagePool: RenderResultItem[] = []
 let poolInitialized = false
 // Batch render-collect buffer: 3 header ints (changed, count, time) + 5 ints per image (x, y, w, h, image_ptr)
 const RRC_HEADER_INTS = 3
@@ -170,6 +172,13 @@ const RRC_IMG_STRIDE = 5
 // Pre-allocated buffer for batch render-collect calls
 let rrcBufPtr = 0
 let rrcBufCapacity = 0
+// Cached views over the render-collect buffer; refreshed when the wasm memory
+// grows (buffer identity changes) or the buffer is reallocated/resized.
+let rrcHeaderView: Int32Array | null = null
+let rrcMetaView: Int32Array | null = null
+let rrcViewsBuffer: ArrayBufferLike | null = null
+let rrcViewsPtr = 0
+let rrcViewsCapacity = 0
 const frameImages: RenderResultItem[] = []
 const frameArrayBuffers: ArrayBuffer[] = []
 const frameBitmapPromises: Promise<ImageBitmap>[] = []
@@ -200,10 +209,13 @@ const initPool = (): void => {
 }
 
 const getPooledItem = (index: number): RenderResultItem => {
-  if (index < MAX_POOLED_IMAGES) {
-    return imagePool[index]
+  let item = imagePool[index]
+  if (!item) {
+    // Grow the pool on demand so frames with many images reuse items too
+    item = { w: 0, h: 0, x: 0, y: 0, image: 0 }
+    imagePool[index] = item
   }
-  return { w: 0, h: 0, x: 0, y: 0, image: 0 }
+  return item
 }
 
 /**
@@ -234,6 +246,22 @@ const ensureRenderCollectBuffer = (maxImages: number): void => {
   rrcBufCapacity = nextCapacity
 }
 
+const refreshRrcViews = (): void => {
+  const buffer = self.wasmMemory.buffer
+  if (rrcHeaderView && rrcViewsBuffer === buffer && rrcViewsPtr === rrcBufPtr && rrcViewsCapacity === rrcBufCapacity) {
+    return
+  }
+  rrcHeaderView = new Int32Array(buffer, rrcBufPtr, RRC_HEADER_INTS)
+  rrcMetaView = new Int32Array(
+    buffer,
+    rrcBufPtr + RRC_HEADER_INTS * Int32Array.BYTES_PER_ELEMENT,
+    rrcBufCapacity - RRC_HEADER_INTS
+  )
+  rrcViewsBuffer = buffer
+  rrcViewsPtr = rrcBufPtr
+  rrcViewsCapacity = rrcBufCapacity
+}
+
 const prewarmRenderer = (time: number): void => {
   if (!akariSubHandle) return
 
@@ -252,55 +280,52 @@ const syncTotalEventsMetric = (): void => {
   metrics.totalEvents = akariSubHandle ? requireApi().getEventCount(akariSubHandle) : 0
 }
 
-const getFirstEventStartTime = (): number | null => {
-  if (!akariSubHandle) return null
+const getTrackEventTimeRange = (): { start: number; end: number } | null => {
+  if (!akariSubHandle || !_Module) return null
 
   const api = requireApi()
   const handle = requireHandle()
-  const count = api.getEventCount(handle)
-  if (count <= 0) return null
+  const outPtr = _Module._malloc(2 * Int32Array.BYTES_PER_ELEMENT)
+  if (!outPtr) return null
 
-  let firstStart = Number.POSITIVE_INFINITY
+  try {
+    if (!api.getEventTimeRange(handle, outPtr)) return null
 
-  for (let i = 0; i < count; i++) {
-    const start = api.eventGetInt(handle, i, EVENT_INT_FIELDS.Start) / ASS_TIME_SCALE
-    if (Number.isFinite(start) && start < firstStart) {
-      firstStart = start
-    }
+    const view = new Int32Array(self.wasmMemory.buffer, outPtr, 2)
+    const start = Math.max(0, view[0] / ASS_TIME_SCALE)
+    const end = Math.max(start, view[1] / ASS_TIME_SCALE)
+    return { start, end }
+  } finally {
+    _Module._free(outPtr)
   }
-
-  if (!Number.isFinite(firstStart)) return null
-  return Math.max(0, firstStart)
 }
 
-const getTrackEventTimeRange = (): { start: number; end: number } | null => {
-  if (!akariSubHandle) return null
-
-  const api = requireApi()
-  const handle = requireHandle()
-  const count = api.getEventCount(handle)
-  if (count <= 0) return null
+const getFirstEventStartTime = (): number | null => {
+  return getTrackEventTimeRange()?.start ?? null
+}
 
-  let start = Number.POSITIVE_INFINITY
-  let end = 0
+let emptyWindowFrom = -1
+let emptyWindowUntil = -1
 
-  for (let i = 0; i < count; i++) {
-    const eventStart = api.eventGetInt(handle, i, EVENT_INT_FIELDS.Start) / ASS_TIME_SCALE
-    const eventDuration = Math.max(0, api.eventGetInt(handle, i, EVENT_INT_FIELDS.Duration) / ASS_TIME_SCALE)
+const invalidateEmptyWindow = (): void => {
+  emptyWindowFrom = -1
+  emptyWindowUntil = -1
+}
 
-    if (!Number.isFinite(eventStart)) continue
+const computeEmptyWindow = (time: number): void => {
+  if (!akariSubHandle || !_Module) return
 
-    const eventEnd = eventStart + eventDuration
-    if (eventStart < start) start = eventStart
-    if (eventEnd > end) end = eventEnd
-  }
+  const outPtr = _Module._malloc(Int32Array.BYTES_PER_ELEMENT)
+  if (!outPtr) return
 
-  if (!Number.isFinite(start)) return null
-  if (end < start) end = start
+  try {
+    if (!requireApi().getEmptyWindow(requireHandle(), time, outPtr)) return
 
-  return {
-    start: Math.max(0, start),
-    end: Math.max(0, end)
+    const nextStart = new Int32Array(self.wasmMemory.buffer, outPtr, 1)[0]
+    emptyWindowFrom = time
+    emptyWindowUntil = nextStart < 0 ? Number.POSITIVE_INFINITY : nextStart / ASS_TIME_SCALE
+  } finally {
+    _Module._free(outPtr)
   }
 }
 
@@ -1012,6 +1037,13 @@ const render = (time: number, force?: boolean | number): void => {
     return
   }
 
+  // Inside a known-empty window the output cannot change: skip the WASM call
+  if (!force && emptyWindowFrom >= 0 && time >= emptyWindowFrom && time < emptyWindowUntil) {
+    metrics.cacheHits++
+    postMessage({ target: 'unbusy' })
+    return
+  }
+
   renderInFlight = true
   initPool() // Ensure pool is ready
 
@@ -1032,9 +1064,15 @@ const render = (time: number, force?: boolean | number): void => {
       ? api.renderBlendCollect(handle, time, forceInt, rrcBufPtr, rrcBufCapacity)
       : api.renderImageCollect(handle, time, forceInt, rrcBufPtr, rrcBufCapacity)
 
-  const headerView = new Int32Array(self.wasmMemory.buffer, rrcBufPtr, RRC_HEADER_INTS)
+  // Refresh after the WASM call: rendering may have grown the memory
+  refreshRrcViews()
+  const headerView = rrcHeaderView!
   const changed = headerView[0]
-  const imageCount = headerView[1]
+
+  // Frame produced no images: ask how long renders can be skipped.
+  if (headerView[1] === 0 && (emptyWindowFrom < 0 || time < emptyWindowFrom || time >= emptyWindowUntil)) {
+    computeEmptyWindow(time)
+  }
 
   // Update metrics
   const renderEndTime = performance.now()
@@ -1069,8 +1107,7 @@ const render = (time: number, force?: boolean | number): void => {
 
     if (written === 0) return paintImages({ images, buffers, times })
 
-    const imgDataOffset = rrcBufPtr + RRC_HEADER_INTS * Int32Array.BYTES_PER_ELEMENT
-    const meta = new Int32Array(self.wasmMemory.buffer, imgDataOffset, written * RRC_IMG_STRIDE)
+    const meta = rrcMetaView!
 
     const useAsyncBitmapPath = asyncRender && offscreenRender !== true
 
@@ -1089,7 +1126,12 @@ const render = (time: number, force?: boolean | number): void => {
 
         const pointer = meta[metaOffset + 4]
         const byteLength = item.w * item.h * 4
-        const rawData = new Uint8ClampedArray(self.wasmMemory.buffer, pointer, byteLength)
+        let rawData = new Uint8ClampedArray(self.wasmMemory.buffer, pointer, byteLength)
+        if (hasBitmapBug) {
+          // Browsers with the partial-bitmap bug mis-render ImageData backed
+          // by a view into a larger buffer; give them a standalone copy.
+          rawData = rawData.slice()
+        }
 
         const imageData = new ImageData(rawData as Uint8ClampedArray<ArrayBuffer>, item.w, item.h)
 
@@ -1119,6 +1161,20 @@ const render = (time: number, force?: boolean | number): void => {
         }
       })
     } else {
+      // When posting to the main thread, copy all image pixels into one
+      // transferable buffer instead of allocating/transferring one per image.
+      let copyTarget: Uint8ClampedArray<ArrayBuffer> | null = null
+      let copyOffset = 0
+      if (!offCanvasCtx) {
+        let totalBytes = 0
+        for (let i = 0; i < written; ++i) {
+          const metaOffset = i * RRC_IMG_STRIDE
+          totalBytes += meta[metaOffset + 2] * meta[metaOffset + 3] * 4
+        }
+        copyTarget = new Uint8ClampedArray(totalBytes)
+        buffers.push(copyTarget.buffer)
+      }
+
       for (let i = 0; i < written; ++i) {
         const metaOffset = i * RRC_IMG_STRIDE
         const item = getPooledItem(i)
@@ -1128,13 +1184,13 @@ const render = (time: number, force?: boolean | number): void => {
         item.h = meta[metaOffset + 3]
         item.image = meta[metaOffset + 4]
 
-        if (!offCanvasCtx) {
+        if (copyTarget) {
           const imagePtr = item.image as number
           const byteLength = item.w * item.h * 4
-          const copiedData = new Uint8ClampedArray(byteLength)
+          const copiedData = copyTarget.subarray(copyOffset, copyOffset + byteLength)
           copiedData.set(self.HEAPU8C.subarray(imagePtr, imagePtr + byteLength))
-          buffers.push(copiedData.buffer)
           item.image = copiedData
+          copyOffset += byteLength
         }
         images[i] = item
       }
@@ -1353,6 +1409,8 @@ self.init = async (data: any): Promise<void> => {
       styleSetNum: Module._akarisub_style_set_num,
       styleGetStr: Module._akarisub_style_get_str,
       styleSetStr: Module._akarisub_style_set_str,
+      getEventTimeRange: Module._akarisub_get_event_time_range,
+      getEmptyWindow: Module._akarisub_get_empty_window,
       renderBlendCollect: Module._akarisub_render_blend_collect,
       renderImageCollect: Module._akarisub_render_image_collect
     }
@@ -1732,6 +1790,11 @@ self.destroy = (): void => {
       _Module._free(rrcBufPtr)
       rrcBufPtr = 0
       rrcBufCapacity = 0
+      rrcHeaderView = null
+      rrcMetaView = null
+      rrcViewsBuffer = null
+      rrcViewsPtr = 0
+      rrcViewsCapacity = 0
     }
   }
   if (akariSubHandle) {
@@ -1959,11 +2022,27 @@ self.getStyleCount = (): void => {
 // Message Handler
 // =============================================================================
 
+const RENDER_SAFE_TARGETS = new Set([
+  'demand',
+  'video',
+  'getEvents',
+  'getStyles',
+  'getStats',
+  'resetStats',
+  'getEventCount',
+  'getStyleCount',
+  'getColorSpace'
+])
+
 onmessage = ({ data }: MessageEvent): void => {
   if (!self[data.target]) {
     throw new Error('Unknown event target ' + data.target)
   }
 
+  if (!RENDER_SAFE_TARGETS.has(data.target)) {
+    invalidateEmptyWindow()
+  }
+
   Promise.resolve(self[data.target](data)).catch((error) => {
     postMessage({
       target: 'error',