make able to init without canvas

Author: gnlow

browser.ts

@@ -6,7 +6,7 @@ import { Lil as Lil_ } from "./src/Lil.ts"
 import { initCanvas } from "./src/GpuWrapper.ts"
 
 export abstract class Lil extends Lil_ {
-    async init(canvas: HTMLCanvasElement) {
+    async init(canvas?: HTMLCanvasElement) {
         const wrapper = await initCanvas({
             ...this,
             canvas,

example/browser/MatMul.ts

@@ -71,7 +71,7 @@ class MatrixMul extends Lil {
 }
 
 const matrixMul = new MatrixMul()
-const g = await matrixMul.init(document.querySelector("canvas")!)
+const g = await matrixMul.init()
 
 g.compute(
     Math.ceil(matrixMul.firstMatrix.size.x / WORKGROUP_SIZE[0]),

src/DenoGpuWrapper.ts

@@ -16,18 +16,21 @@ export class DenoGpuWrapper<T extends Layout> extends GpuWrapper<T> {
 
     constructor(
         root: TgpuRoot,
-        info: GpuWrapperInfo<T> & { width: number, height: number },
+        info: GpuWrapperInfo<T> & { width?: number, height?: number },
         outputBuffer: GPUBuffer,
     ) {
         super(root, info)
         this.outputBuffer = outputBuffer
-        this.dimension = {
+        if (info.width && info.height) this.dimension = {
             width: info.width,
             height: info.height,
         }
     }
 
     override beforeDrawFinish(commandEncoder: GPUCommandEncoder) {
+        if (!this.getTexture || !this.dimension) {
+            throw new Error("No texture provided")
+        }
         copyToBuffer(
             commandEncoder,
             this.getTexture(),
@@ -36,6 +39,9 @@ export class DenoGpuWrapper<T extends Layout> extends GpuWrapper<T> {
         )
     }
     async getImage() {
+        if (!this.dimension) {
+            throw new Error("No texture provided")
+        }
         return await createPng(
             this.outputBuffer,
             this.dimension,

src/GpuWrapper.ts

@@ -12,14 +12,14 @@ import {
 } from "./types.ts"
 
 export interface GpuWrapperInfo<T extends Layout> {
-    getTexture(): GPUTexture,
+    getTexture?(): GPUTexture,
     format?: GPUTextureFormat,
     vertShader?: string,
     fragShader?: string,
     layout?: T,
 }
 export interface GpuWrapperInfo<T extends Layout> {
-    getTexture(): GPUTexture,
+    getTexture?(): GPUTexture,
     format?: GPUTextureFormat,
     compShader?: string,
     layout?: T,
@@ -128,6 +128,9 @@ export class GpuWrapper<T extends Layout> {
     }
     beforeDrawFinish(_commandEncoder: GPUCommandEncoder) {}
     draw(...params: Parameters<GPURenderPassEncoder["draw"]>) {
+        if (!this.getTexture) {
+            throw new Error("No texture provided")
+        }
         const textureView = this.getTexture().createView()
         const renderPassDescriptor: GPURenderPassDescriptor = {
             colorAttachments: [
@@ -164,8 +167,15 @@ export class GpuWrapper<T extends Layout> {
 }
 
 export async function initCanvas<T extends Layout>
-(info: Omit<GpuWrapperInfo<T>, "getTexture"> & { canvas: HTMLCanvasElement }) {
+(info: Omit<GpuWrapperInfo<T>, "getTexture"> & { canvas?: HTMLCanvasElement }) {
     const root = await tgpu.init()
+
+    if (!info.canvas) {
+        return new GpuWrapper(
+            root,
+            info,
+        )
+    }
     const ctx = info.canvas.getContext("webgpu") as unknown as GPUCanvasContext
 
     ctx.configure({