feat(Texture): update image representation w/wgpu spec

README.md

@@ -386,7 +386,7 @@ A `Texture` transports or stores image or video data to the GPU as well as data
 
 ```ts
 const pixel = new Uint8ClampedArray([76, 51, 128, 255])
-const image = await createImageBitmap(new ImageData(pixel, 1, 1))
+const image = new ImageData(pixel, 1, 1)
 const texture = new Texture(image)
 ```
 

examples/webgl-fullscreen.ts

@@ -7,7 +7,7 @@ document.body.appendChild(renderer.canvas)
 const material = new Material({
   uniforms: {
     time: 0,
-    color: new Texture(await createImageBitmap(new ImageData(new Uint8ClampedArray([76, 51, 128, 255]), 1, 1))),
+    color: new Texture(new ImageData(new Uint8ClampedArray([76, 51, 128, 255]), 1, 1)),
   },
   vertex: /* glsl */ `#version 300 es
     out vec2 vUv;

examples/webgpu-fullscreen.ts

@@ -1,4 +1,4 @@
-import { WebGPURenderer, Geometry, Material, Mesh, Texture } from 'four'
+import { WebGPURenderer, Material, Mesh, Texture } from 'four'
 
 const renderer = new WebGPURenderer()
 renderer.setSize(window.innerWidth, window.innerHeight)
@@ -7,7 +7,7 @@ document.body.appendChild(renderer.canvas)
 const material = new Material({
   uniforms: {
     time: 0,
-    color: new Texture(await createImageBitmap(new ImageData(new Uint8ClampedArray([76, 51, 128, 255]), 1, 1))),
+    color: new Texture(new ImageData(new Uint8ClampedArray([76, 51, 128, 255]), 1, 1)),
   },
   vertex: /* wgsl */ `
     struct Uniforms {

package.json

@@ -26,12 +26,12 @@
   "exports": "./dist/index.js",
   "sideEffects": false,
   "devDependencies": {
-    "@types/node": "^20.4.2",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.3"
+    "@types/node": "^20.8.7",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   },
   "dependencies": {
-    "@webgpu/types": "^0.1.34"
+    "@webgpu/types": "^0.1.38"
   },
   "scripts": {
     "dev": "vite",

src/Texture.ts

@@ -3,7 +3,14 @@ import { Sampler } from './Sampler'
 /**
  * Represents a texture image source.
  */
-export type ImageRepresentation = ImageBitmap | HTMLCanvasElement | HTMLVideoElement | OffscreenCanvas
+export type ImageRepresentation =
+  | ImageBitmap
+  | ImageData
+  | HTMLImageElement
+  | HTMLVideoElement
+  | VideoFrame
+  | HTMLCanvasElement
+  | OffscreenCanvas
 
 /**
  * Constructs a texture. Useful for displaying and storing image data.

src/WebGPURenderer.ts

@@ -290,8 +290,8 @@ export class WebGPURenderer {
    */
   private _updateTexture(
     texture: Texture,
-    width = texture.image?.width ?? 0,
-    height = texture.image?.height ?? 0,
+    width = (texture.image as any)?.width ?? 0,
+    height = (texture.image as any)?.height ?? 0,
   ): GPUTexture | GPUExternalTexture {
     let target = this._textures.get(texture)
     if (!target || texture.needsUpdate) {