jassub 2.0.20 → 2.2.0

package/src/worker/webgpu-renderer.ts

@@ -1,3 +1,7 @@
+// WARN:
+// This has been deprecated as WebGL is simply faster
+// Know how to optimise this to beat WebGL? submit a PR!
+
 import type { ASSImage } from '../jassub'
 
 const IDENTITY_MATRIX = new Float32Array([
@@ -177,118 +181,100 @@ export class WebGPURenderer {
 
   // eslint-disable-next-line no-undef
   format: GPUTextureFormat = 'bgra8unorm'
-  _ready
-
-  constructor () {
-    // Start async initialization immediately
-    this._ready = (async () => {
-    // Check WebGPU support
-      if (!navigator.gpu) {
-        throw new Error('WebGPU not supported')
-      }
 
-      const adapter = await navigator.gpu.requestAdapter({
-        powerPreference: 'high-performance'
-      })
+  constructor (device: GPUDevice) {
+    this.device = device
+    this.format = navigator.gpu.getPreferredCanvasFormat()
 
-      if (!adapter) {
-        throw new Error('No WebGPU adapter found')
-      }
+    // Create shader modules
+    const vertexModule = this.device.createShaderModule({
+      code: VERTEX_SHADER
+    })
 
-      this.device = await adapter.requestDevice()
-      this.format = navigator.gpu.getPreferredCanvasFormat()
+    const fragmentModule = this.device.createShaderModule({
+      code: FRAGMENT_SHADER
+    })
 
-      // Create shader modules
-      const vertexModule = this.device.createShaderModule({
-        code: VERTEX_SHADER
-      })
+    // Create uniform buffer
+    this.uniformBuffer = this.device.createBuffer({
+      size: 16, // vec2f resolution + padding
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
 
-      const fragmentModule = this.device.createShaderModule({
-        code: FRAGMENT_SHADER
-      })
+    // Create color matrix buffer (mat3x3f requires 48 bytes: 3 vec3f padded to vec4f each)
+    this.colorMatrixBuffer = this.device.createBuffer({
+      size: 48, // 3 x vec4f (each column is vec3f padded to 16 bytes)
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+    // Initialize with identity matrix
+    this.device.queue.writeBuffer(this.colorMatrixBuffer, 0, IDENTITY_MATRIX)
 
-      // Create uniform buffer
-      this.uniformBuffer = this.device.createBuffer({
-        size: 16, // vec2f resolution + padding
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-      })
+    // Create bind group layout (no sampler needed - using textureLoad for pixel-perfect sampling)
+    this.bindGroupLayout = this.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: 'uniform' }
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: 'read-only-storage' }
+        },
+        {
+          binding: 3,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: { sampleType: 'unfilterable-float' } // textureLoad requires unfilterable
+        },
+        {
+          binding: 4,
+          visibility: GPUShaderStage.FRAGMENT,
+          buffer: { type: 'uniform' }
+        }
+      ]
+    })
 
-      // Create color matrix buffer (mat3x3f requires 48 bytes: 3 vec3f padded to vec4f each)
-      this.colorMatrixBuffer = this.device.createBuffer({
-        size: 48, // 3 x vec4f (each column is vec3f padded to 16 bytes)
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-      })
-      // Initialize with identity matrix
-      this.device.queue.writeBuffer(this.colorMatrixBuffer, 0, IDENTITY_MATRIX)
+    // Create pipeline layout
+    const pipelineLayout = this.device.createPipelineLayout({
+      bindGroupLayouts: [this.bindGroupLayout]
+    })
 
-      // Create bind group layout (no sampler needed - using textureLoad for pixel-perfect sampling)
-      this.bindGroupLayout = this.device.createBindGroupLayout({
-        entries: [
-          {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX,
-            buffer: { type: 'uniform' }
-          },
-          {
-            binding: 1,
-            visibility: GPUShaderStage.VERTEX,
-            buffer: { type: 'read-only-storage' }
-          },
+    // Create render pipeline
+    this.pipeline = this.device.createRenderPipeline({
+      layout: pipelineLayout,
+      vertex: {
+        module: vertexModule,
+        entryPoint: 'vertexMain'
+      },
+      fragment: {
+        module: fragmentModule,
+        entryPoint: 'fragmentMain',
+        targets: [
           {
-            binding: 3,
-            visibility: GPUShaderStage.FRAGMENT,
-            texture: { sampleType: 'unfilterable-float' } // textureLoad requires unfilterable
-          },
-          {
-            binding: 4,
-            visibility: GPUShaderStage.FRAGMENT,
-            buffer: { type: 'uniform' }
-          }
-        ]
-      })
-
-      // Create pipeline layout
-      const pipelineLayout = this.device.createPipelineLayout({
-        bindGroupLayouts: [this.bindGroupLayout]
-      })
-
-      // Create render pipeline
-      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'
-                }
+            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'
-        }
-      })
-    })()
+          }
+        ]
+      },
+      primitive: {
+        topology: 'triangle-list'
+      }
+    })
   }
 
-  async setCanvas (canvas: OffscreenCanvas, width: number, height: number) {
-    await this._ready
+  setCanvas (canvas: OffscreenCanvas, width: number, height: number) {
     if (!this.device) return
 
     // WebGPU doesn't allow 0-sized textures/swapchains
@@ -324,13 +310,13 @@ export class WebGPURenderer {
    * Pass null or undefined to use identity (no conversion).
    * Matrix should be a pre-padded Float32Array with 12 values (3 columns × 4 floats each).
    */
-  async setColorMatrix (matrix?: Float32Array<ArrayBuffer>) {
-    await this._ready
+  setColorMatrix (subtitleColorSpace?: 'BT601' | 'BT709' | 'SMPTE240M' | 'FCC', videoColorSpace?: 'BT601' | 'BT709') {
     if (!this.device) return
-    this.device.queue.writeBuffer(this.colorMatrixBuffer!, 0, matrix ?? IDENTITY_MATRIX)
+    const colorMatrix = (subtitleColorSpace && videoColorSpace && colorMatrixConversionMap[subtitleColorSpace]?.[videoColorSpace]) ?? IDENTITY_MATRIX
+    this.device.queue.writeBuffer(this.colorMatrixBuffer!, 0, colorMatrix)
   }
 
-  private createTextureInfo (width: number, height: number): TextureInfo {
+  createTextureInfo (width: number, height: number): TextureInfo {
     const texture = this.device!.createTexture({
       size: [width, height],
       format: 'r8unorm',

package/src/worker/worker.ts

@@ -5,7 +5,8 @@ import { expose } from 'abslink/w3c'
 import WASM from '../wasm/jassub-worker.js'
 
 import { libassYCbCrMap, read_, readAsync, _applyKeys } from './util'
-import { colorMatrixConversionMap, WebGPURenderer } from './webgpu-renderer'
+import { WebGL2Renderer } from './webgl-renderer'
+// import { WebGPURenderer } from './webgpu-renderer'
 
 import type { ASSEvent, ASSImage, ASSStyle } from '../jassub'
 import type { JASSUB, MainModule } from '../wasm/types.js'
@@ -13,6 +14,7 @@ import type { JASSUB, MainModule } from '../wasm/types.js'
 declare const self: DedicatedWorkerGlobalScope &
   typeof globalThis & {
     HEAPU8RAW: Uint8Array<ArrayBuffer>
+    WASMMEMORY: WebAssembly.Memory
   }
 
 interface opts {
@@ -36,7 +38,7 @@ export class ASSRenderer {
   _subtitleColorSpace?: 'BT601' | 'BT709' | 'SMPTE240M' | 'FCC' | null
   _videoColorSpace?: 'BT709' | 'BT601'
   _malloc!: (size: number) => number
-  _gpurender = new WebGPURenderer()
+  _gpurender = new WebGL2Renderer()
 
   debug = false
   useLocalFonts = false
@@ -58,8 +60,9 @@ export class ASSRenderer {
     globalThis.fetch = _ => _fetch(data.wasmUrl)
 
     // TODO: abslink doesnt support transferables yet
-    const handleMessage = ({ data }: MessageEvent) => {
+    const handleMessage = async ({ data }: MessageEvent) => {
       if (data.name === 'offscreenCanvas') {
+        // await this._ready // needed for webGPU
         this._offCanvas = data.ctrl
         this._gpurender.setCanvas(this._offCanvas!, this._offCanvas!.width, this._offCanvas!.height)
         removeEventListener('message', handleMessage)
@@ -67,7 +70,11 @@ export class ASSRenderer {
     }
     addEventListener('message', handleMessage)
 
-    this._ready = (WASM({ __url: data.wasmUrl }) as Promise<MainModule>).then(Module => {
+    // const devicePromise = navigator.gpu?.requestAdapter({
+    //   powerPreference: 'high-performance'
+    // }).then(adapter => adapter?.requestDevice())
+
+    this._ready = (WASM({ __url: data.wasmUrl }) as Promise<MainModule>).then(async Module => {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       this._malloc = Module._malloc
 
@@ -89,6 +96,9 @@ export class ASSRenderer {
       if (data.libassMemoryLimit > 0 || data.libassGlyphLimit > 0) {
         this._wasm.setMemoryLimits(data.libassGlyphLimit || 0, data.libassMemoryLimit || 0)
       }
+      // const device = await devicePromise
+      // this._gpurender = device ? new WebGPURenderer(device) : new WebGL2Renderer()
+      // if (this._offCanvas) this._gpurender.setCanvas(this._offCanvas, this._offCanvas.width, this._offCanvas.height)
       this._checkColorSpace()
     })
   }
@@ -176,7 +186,7 @@ export class ASSRenderer {
 
   _checkColorSpace () {
     if (!this._subtitleColorSpace || !this._videoColorSpace) return
-    this._gpurender.setColorMatrix(colorMatrixConversionMap[this._subtitleColorSpace][this._videoColorSpace])
+    this._gpurender.setColorMatrix(this._subtitleColorSpace, this._videoColorSpace)
   }
 
   _findAvailableFonts (font: string) {
@@ -228,12 +238,13 @@ export class ASSRenderer {
   }
 
   _canvas (width: number, height: number, videoWidth: number, videoHeight: number) {
-    if (this._offCanvas) this._gpurender.setCanvas(this._offCanvas, width, height)
+    if (this._offCanvas && this._gpurender) this._gpurender.setCanvas(this._offCanvas, width, height)
 
     this._wasm.resizeCanvas(width, height, videoWidth, videoHeight)
   }
 
-  [finalizer] () {
+  async [finalizer] () {
+    await this._ready
     this._wasm.quitLibrary()
     this._gpurender.destroy()
     // @ts-expect-error force GC
@@ -244,7 +255,7 @@ export class ASSRenderer {
   }
 
   _draw (time: number, force = false) {
-    if (!this._offCanvas) return
+    if (!this._offCanvas || !this._gpurender) return
 
     const result: ASSImage = this._wasm.rawRender(time, Number(force))!
     if (this._wasm.changed === 0 && !force) return