akarisub 0.1.0 → 0.2.0

package/src/ts/akarisub.ts

@@ -28,6 +28,27 @@ import { WebGL2Renderer, isWebGL2Supported } from './webgl2-renderer'
 
 type AnyGPURenderer = WebGPURenderer | WebGL2Renderer
 
+const DEFAULT_RENDER_AHEAD = 0.008
+const DEFAULT_PIPELINE_LATENCY_MS = DEFAULT_RENDER_AHEAD * 1000
+const DEFAULT_WEBKIT_PIPELINE_LATENCY_MS = 16
+
+const isLikelyWebKit = (): boolean => {
+  if (typeof navigator === 'undefined') return false
+
+  const userAgent = navigator.userAgent || ''
+  const vendor = navigator.vendor || ''
+  const isIOSWebKit = /\b(iPhone|iPad|iPod)\b/i.test(userAgent)
+
+  if (!/AppleWebKit/i.test(userAgent)) return false
+  if (isIOSWebKit) return true
+
+  if (/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser|Firefox)\b/i.test(userAgent)) {
+    return false
+  }
+
+  return vendor.includes('Apple')
+}
+
 /**
  * AkariSub - JavaScript ASS/SSA Subtitle Renderer
  *
@@ -74,6 +95,9 @@ export default class AkariSub extends EventTarget {
   private _ro?: ResizeObserver
   private _worker: Worker
   private _pendingDemandTimes: Array<{ mediaTime: number; width: number; height: number }> = []
+  private readonly _isLikelyWebKit: boolean
+  private _activeDemandStartedAt: number = 0
+  private _smoothedDemandLatencyMs: number
 
   // Bound methods for event listeners
   private _boundResize: () => void
@@ -90,6 +114,7 @@ export default class AkariSub extends EventTarget {
   // Cached render data to reduce allocations
   private _lastRenderWidth: number = 0
   private _lastRenderHeight: number = 0
+  private _gpuBitmapImages: Array<{ image: ImageBitmap; x: number; y: number }> = []
 
   // Public properties
   public timeOffset: number
@@ -114,6 +139,11 @@ export default class AkariSub extends EventTarget {
       this._init = resolve
     })
 
+    this._isLikelyWebKit = isLikelyWebKit()
+    this._smoothedDemandLatencyMs = this._isLikelyWebKit
+      ? DEFAULT_WEBKIT_PIPELINE_LATENCY_MS
+      : DEFAULT_PIPELINE_LATENCY_MS
+
     // Run feature tests
     const test = AkariSub._test()
 
@@ -121,7 +151,8 @@ export default class AkariSub extends EventTarget {
 
     this._onCanvasFallback = options.onCanvasFallback
 
-    const canUseGPURenderer = !options.canvas && (isWebGPUSupported() || isWebGL2Supported())
+    const canUseGPURenderer = !this._isLikelyWebKit && !options.canvas && (isWebGPUSupported() || isWebGL2Supported())
+    const shouldUseAsyncRender = typeof createImageBitmap !== 'undefined' && (options.asyncRender ?? !this._isLikelyWebKit)
 
     // Don't support offscreen rendering on custom canvases
     this._offscreenRender =
@@ -153,7 +184,7 @@ export default class AkariSub extends EventTarget {
     if (canUseGPURenderer) {
       this._initGPURenderer()
     } else if (!this._offscreenRender) {
-      this._ctx = this._canvas.getContext('2d')
+      this._ctx = this._canvas.getContext('2d', { alpha: true, desynchronized: true })
     }
 
     this._canvasctrl = this._offscreenRender
@@ -167,7 +198,7 @@ export default class AkariSub extends EventTarget {
     this.prescaleFactor = options.prescaleFactor || 1.0
     this.prescaleHeightLimit = options.prescaleHeightLimit || 1080
     this.maxRenderHeight = options.maxRenderHeight || 0
-    this.renderAhead = options.renderAhead ?? 0
+    this.renderAhead = options.renderAhead ?? DEFAULT_RENDER_AHEAD
 
     // Bind methods
     this._boundResize = this.resize.bind(this)
@@ -195,7 +226,8 @@ export default class AkariSub extends EventTarget {
       this._worker.postMessage({
         target: 'init',
         wasmUrl: options.wasmUrl ?? 'akarisub-worker.wasm',
-        asyncRender: typeof createImageBitmap !== 'undefined' && (options.asyncRender ?? true),
+        asyncRender: shouldUseAsyncRender,
+        fullTrackWarmup: options.fullTrackWarmup ?? false,
         onDemandRender: this._onDemandRender,
         initialTime: (this._video?.currentTime ?? 0) + this.timeOffset,
         width: this._canvasctrl.width || 0,
@@ -327,7 +359,7 @@ export default class AkariSub extends EventTarget {
 
     this._rendererType = 'canvas2d'
     if (!this._offscreenRender && !this._ctx) {
-      this._ctx = this._canvas.getContext('2d')
+      this._ctx = this._canvas.getContext('2d', { alpha: true, desynchronized: true })
     }
     this.sendMessage('setAsyncRender', { value: false })
     this._onCanvasFallback?.()
@@ -743,6 +775,8 @@ export default class AkariSub extends EventTarget {
   }
 
   private _unbusy(): void {
+    this._observeDemandCompletion()
+
     if (this._pendingDemandTimes.length > 0) {
       if (this._pendingDemandTimes.length > 1) {
         const latestDemand = this._pendingDemandTimes[this._pendingDemandTimes.length - 1]
@@ -760,6 +794,31 @@ export default class AkariSub extends EventTarget {
     this.busy = false
   }
 
+  private _markDemandDispatched(): void {
+    if (!this._onDemandRender) return
+    this._activeDemandStartedAt = performance.now()
+  }
+
+  private _observeDemandCompletion(): void {
+    if (!this._onDemandRender || this._activeDemandStartedAt === 0) return
+
+    const elapsed = performance.now() - this._activeDemandStartedAt
+    this._activeDemandStartedAt = 0
+
+    if (!Number.isFinite(elapsed) || elapsed <= 0) return
+
+    this._smoothedDemandLatencyMs = this._smoothedDemandLatencyMs <= 0
+      ? elapsed
+      : this._smoothedDemandLatencyMs * 0.75 + elapsed * 0.25
+  }
+
+  private _getDemandPipelineLeadSeconds(now: number, metadata: VideoFrameCallbackMetadata): number {
+    const expectedDisplayTime = metadata.expectedDisplayTime ?? metadata.presentationTime ?? now
+    const displayLeadSeconds = Math.max(0, expectedDisplayTime - now) / 1000
+
+    return Math.max(0, this._smoothedDemandLatencyMs / 1000 - displayLeadSeconds)
+  }
+
   private _enqueueDemand(metadata: { mediaTime: number; width: number; height: number }): void {
     const queue = this._pendingDemandTimes
 
@@ -782,7 +841,8 @@ export default class AkariSub extends EventTarget {
 
     // Get the video's playback rate to correctly scale time offsets
     const playbackRate = this._video?.playbackRate ?? 1
-    const renderTime = metadata.mediaTime + this.renderAhead * playbackRate
+    const pipelineLeadSeconds = this._getDemandPipelineLeadSeconds(now, metadata)
+    const renderTime = metadata.mediaTime + (pipelineLeadSeconds + this.renderAhead) * playbackRate
 
     const demandData = {
       mediaTime: renderTime,
@@ -813,6 +873,7 @@ export default class AkariSub extends EventTarget {
       this.resize()
     }
 
+    this._markDemandDispatched()
     this.sendMessage('demand', { time: metadata.mediaTime + this.timeOffset })
   }
 
@@ -822,9 +883,10 @@ export default class AkariSub extends EventTarget {
     this._canvas.remove()
     this._createCanvas()
     this._canvasctrl = this._canvas
-    this._ctx = this._canvasctrl.getContext('2d')
+    this._ctx = this._canvasctrl.getContext('2d', { alpha: true, desynchronized: true })
     this.sendMessage('detachOffscreen')
     this.busy = false
+    this._activeDemandStartedAt = 0
     this._pendingDemandTimes.length = 0
     this.resize(0, 0, 0, 0, true)
   }
@@ -878,80 +940,87 @@ export default class AkariSub extends EventTarget {
     height: number
     colorSpace: SubtitleColorSpace
   }): void {
-    this._unbusy()
+    try {
+      const dataWidth = data.width
+      const dataHeight = data.height
 
-    const dataWidth = data.width
-    const dataHeight = data.height
+      if (this.debug) {
+        data.times.IPCTime = Date.now() - (data.times.JSRenderTime || 0)
+      }
 
-    if (this.debug) {
-      data.times.IPCTime = Date.now() - (data.times.JSRenderTime || 0)
-    }
+      // Check if canvas size changed
+      const sizeChanged = this._canvasctrl.width !== dataWidth || this._canvasctrl.height !== dataHeight
+      if (sizeChanged) {
+        this._canvasctrl.width = dataWidth
+        this._canvasctrl.height = dataHeight
+        this._lastRenderWidth = dataWidth
+        this._lastRenderHeight = dataHeight
+
+        // Update GPU renderer size if canvas size changed
+        if (this._gpuRenderer) {
+          this._gpuRenderer.updateSize(dataWidth, dataHeight)
+        }
 
-    // Check if canvas size changed
-    const sizeChanged = this._canvasctrl.width !== dataWidth || this._canvasctrl.height !== dataHeight
-    if (sizeChanged) {
-      this._canvasctrl.width = dataWidth
-      this._canvasctrl.height = dataHeight
-      this._lastRenderWidth = dataWidth
-      this._lastRenderHeight = dataHeight
+        this._verifyColorSpace({ subtitleColorSpace: data.colorSpace })
+      }
 
-      // Update GPU renderer size if canvas size changed
+      // Use GPU renderer (WebGPU or WebGL2) if available
       if (this._gpuRenderer) {
-        this._gpuRenderer.updateSize(dataWidth, dataHeight)
+        this._renderGPU(data)
+        return
       }
 
-      this._verifyColorSpace({ subtitleColorSpace: data.colorSpace })
-    }
-
-    // Use GPU renderer (WebGPU or WebGL2) if available
-    if (this._gpuRenderer) {
-      this._renderGPU(data)
-      return
-    }
+      if (!this._ctx) return
 
-    if (!this._ctx) return
+      const ctx = this._ctx
+      const images = data.images
+      const imageCount = images.length
 
-    const ctx = this._ctx
-    const images = data.images
-    const imageCount = images.length
+      ctx.clearRect(0, 0, dataWidth, dataHeight)
 
-    ctx.clearRect(0, 0, dataWidth, dataHeight)
-
-    if (data.asyncRender) {
-      for (let i = 0; i < imageCount; i++) {
-        const image = images[i]
-        if (image.image) {
-          ctx.drawImage(image.image as ImageBitmap, image.x, image.y)
-          ;(image.image as ImageBitmap).close()
+      if (data.asyncRender) {
+        for (let i = 0; i < imageCount; i++) {
+          const image = images[i]
+          if (image.image) {
+            ctx.drawImage(image.image as ImageBitmap, image.x, image.y)
+            ;(image.image as ImageBitmap).close()
+          }
+        }
+      } else {
+        const hasAlphaBug = AkariSub._hasAlphaBug ?? false
+
+        for (let i = 0; i < imageCount; i++) {
+          const image = images[i]
+          if (image.image) {
+            const imgW = image.w
+            const imgH = image.h
+
+            const rawImage = image.image
+            const rawData = rawImage instanceof Uint8ClampedArray
+              ? rawImage
+              : rawImage instanceof Uint8Array
+                ? new Uint8ClampedArray(rawImage.buffer, rawImage.byteOffset, rawImage.byteLength)
+                : new Uint8ClampedArray(rawImage as ArrayBuffer)
+            const fixedData = fixAlpha(rawData, hasAlphaBug)
+            ctx.putImageData(new ImageData(fixedData as Uint8ClampedArray<ArrayBuffer>, imgW, imgH), image.x, image.y)
+          }
         }
       }
-    } else {
-      const hasAlphaBug = AkariSub._hasAlphaBug ?? false
 
-      for (let i = 0; i < imageCount; i++) {
-        const image = images[i]
-        if (image.image) {
-          const imgW = image.w
-          const imgH = image.h
+      if (this.debug) {
+        data.times.JSRenderTime = Date.now() - (data.times.JSRenderTime || 0) - (data.times.IPCTime || 0)
+        let total = 0
+        const count = data.times.bitmaps || imageCount
+        delete data.times.bitmaps
 
-          const rawData = new Uint8ClampedArray(image.image as ArrayBuffer)
-          const fixedData = fixAlpha(rawData, hasAlphaBug)
-          ctx.putImageData(new ImageData(fixedData as Uint8ClampedArray<ArrayBuffer>, imgW, imgH), image.x, image.y)
+        for (const key in data.times) {
+          total += (data.times as any)[key] || 0
         }
-      }
-    }
-
-    if (this.debug) {
-      data.times.JSRenderTime = Date.now() - (data.times.JSRenderTime || 0) - (data.times.IPCTime || 0)
-      let total = 0
-      const count = data.times.bitmaps || imageCount
-      delete data.times.bitmaps
 
-      for (const key in data.times) {
-        total += (data.times as any)[key] || 0
+        console.log('Bitmaps: ' + count + ' Total: ' + (total | 0) + 'ms', data.times)
       }
-
-      console.log('Bitmaps: ' + count + ' Total: ' + (total | 0) + 'ms', data.times)
+    } finally {
+      this._unbusy()
     }
   }
 
@@ -966,13 +1035,21 @@ export default class AkariSub extends EventTarget {
 
     if (data.asyncRender) {
       // For async render mode with ImageBitmaps
-      const bitmapImages = data.images
-        .filter((img) => img.image instanceof ImageBitmap)
-        .map((img) => ({
-          image: img.image as ImageBitmap,
-          x: img.x,
-          y: img.y
-        }))
+      const bitmapImages = this._gpuBitmapImages
+      let bitmapCount = 0
+
+      for (let i = 0; i < data.images.length; i++) {
+        const img = data.images[i]
+        if (!(img.image instanceof ImageBitmap)) continue
+
+        const target = bitmapImages[bitmapCount] || (bitmapImages[bitmapCount] = { image: img.image, x: 0, y: 0 })
+        target.image = img.image
+        target.x = img.x
+        target.y = img.y
+        bitmapCount++
+      }
+
+      bitmapImages.length = bitmapCount
 
       renderer.renderBitmaps(bitmapImages, this._canvasctrl.width, this._canvasctrl.height)
 

package/src/ts/types.ts

@@ -186,6 +186,8 @@ export interface AkariSubOptions {
   onCanvasFallback?: () => void
   /** Additional time in seconds to render subtitles ahead for pipeline latency compensation (default: 0.008) */
   renderAhead?: number
+  /** Pre-render early track windows after load to warm libass caches (default: false) */
+  fullTrackWarmup?: boolean
 }
 
 // =============================================================================
@@ -211,7 +213,7 @@ export interface RenderImage {
   y: number
   w: number
   h: number
-  image: ImageBitmap | ArrayBuffer | number
+  image: ImageBitmap | ArrayBuffer | Uint8Array | Uint8ClampedArray | number
 }
 
 /** Render timing debug info */
@@ -255,6 +257,7 @@ export interface WorkerInitMessage {
   target: 'init'
   wasmUrl: string
   asyncRender: boolean
+  fullTrackWarmup: boolean
   onDemandRender: boolean
   initialTime: number
   width: number
@@ -363,11 +366,6 @@ export interface AkariSubModule extends EmscriptenModule {
   _akarisub_remove_style: (handle: number, index: number) => void
   _akarisub_style_override_index: (handle: number, index: number) => void
   _akarisub_disable_style_override: (handle: number) => void
-  _akarisub_render_blend: (handle: number, time: number, force: number) => number
-  _akarisub_render_image: (handle: number, time: number, force: number) => number
-  _akarisub_get_changed: (handle: number) => number
-  _akarisub_get_count: (handle: number) => number
-  _akarisub_get_time: (handle: number) => number
   _akarisub_get_track_color_space: (handle: number) => number
   _akarisub_event_get_int: (handle: number, index: number, field: number) => number
   _akarisub_event_set_int: (handle: number, index: number, field: number, value: number) => void
@@ -377,13 +375,6 @@ 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_render_result_x: (resultPtr: number) => number
-  _akarisub_render_result_y: (resultPtr: number) => number
-  _akarisub_render_result_w: (resultPtr: number) => number
-  _akarisub_render_result_h: (resultPtr: number) => number
-  _akarisub_render_result_image: (resultPtr: number) => number
-  _akarisub_render_result_next: (resultPtr: number) => number
-  _akarisub_render_result_collect: (resultPtr: number, outPtr: number, maxItems: 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

@@ -75,6 +75,10 @@ export function isWebGL2Supported(): boolean {
   }
 }
 
+function isArrayBufferView(value: unknown): value is Uint8Array | Uint8ClampedArray {
+  return value instanceof Uint8Array || value instanceof Uint8ClampedArray
+}
+
 function compileShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader {
   const shader = gl.createShader(type)!
   gl.shaderSource(shader, source)
@@ -362,8 +366,9 @@ export class WebGL2Renderer {
         const imgData = img.image
         if (imgData instanceof ImageBitmap) {
           gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, count, w, h, 1, gl.RGBA, gl.UNSIGNED_BYTE, imgData)
-        } else if (imgData instanceof ArrayBuffer) {
-          gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, count, w, h, 1, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(imgData))
+        } else if (imgData instanceof ArrayBuffer || isArrayBufferView(imgData)) {
+          const uploadData = imgData instanceof ArrayBuffer ? new Uint8Array(imgData) : imgData
+          gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, count, w, h, 1, gl.RGBA, gl.UNSIGNED_BYTE, uploadData)
         }
         const off = count << 3
         instanceData[off] = img.x

package/src/ts/webgpu-renderer.ts

@@ -114,6 +114,14 @@ 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.
  */
@@ -577,7 +585,7 @@ export class WebGPURenderer {
             { texture: textureArray, origin: [0, 0, texIndex], premultipliedAlpha: false },
             { width: w, height: h }
           )
-        } else if (imgData instanceof ArrayBuffer) {
+        } else if (imgData instanceof ArrayBuffer || imgData instanceof Uint8Array || imgData instanceof Uint8ClampedArray) {
           this.uploadTextureData(texIndex, imgData, w, h, isBGRA)
         }
 
@@ -626,17 +634,17 @@ export class WebGPURenderer {
 
   private uploadTextureData(
     layerIndex: number,
-    rgbaBuffer: ArrayBuffer,
+    rgbaBuffer: ArrayBuffer | Uint8Array | Uint8ClampedArray,
     width: number,
     height: number,
     swapRB: boolean
   ): void {
     const size = width * height * 4
+    const src = toUint8View(rgbaBuffer)
 
     if (swapRB) {
       // Use reusable conversion buffer
       const uploadData = this.ensureConversionBuffer(size)
-      const src = new Uint8Array(rgbaBuffer)
 
       // Unrolled loop for better performance
       for (let j = 0; j < size; j += 4) {
@@ -655,7 +663,7 @@ export class WebGPURenderer {
     } else {
       this.device!.queue.writeTexture(
         { texture: this.textureArray!, origin: [0, 0, layerIndex] },
-        rgbaBuffer,
+        src,
         { bytesPerRow: width * 4 },
         { width, height }
       )