feat: OffscreenCanvas (#29357)

Progresses #5701
Closes #31381

---------

Signed-off-by: Leo Kettmeir <crowlkats@toaxl.com>

Author: crowlKats

.github/workflows/ci.generated.yml

@@ -1422,7 +1422,7 @@ jobs:
         if: '!startsWith(github.ref, ''refs/tags/'')'
         env:
           CARGO_PROFILE_DEV_DEBUG: 0
-        run: cargo test --locked --lib -p deno -p denort -p node_shim -p bsdiff_helper -p deno_lib -p deno_snapshots -p deno_bundle_runtime -p deno_cache -p deno_cron -p deno_crypto -p deno_fetch -p deno_ffi -p deno_fs -p deno_http -p deno_image -p deno_io -p deno_kv -p deno_napi -p napi_sym -p deno_net -p deno_node -p deno_node_crypto -p deno_node_sqlite -p denort_helper -p deno_signals -p deno_telemetry -p deno_url -p deno_web -p deno_webgpu -p deno_webidl -p deno_websocket -p deno_webstorage -p deno_cache_dir -p deno_config -p deno_crypto_provider -p deno_dotenv -p eszip -p deno_inspector_server -p deno_lockfile -p deno_maybe_sync -p napi_sys -p node_resolver -p deno_npm -p deno_npm_cache -p deno_npm_installer -p deno_npmrc -p deno_package_json -p deno_resolver -p deno_typescript_go_client_rust -p deno_runtime -p deno_features -p deno_permissions -p deno_subprocess_windows
+        run: cargo test --locked --lib -p deno -p denort -p node_shim -p bsdiff_helper -p deno_lib -p deno_snapshots -p deno_bundle_runtime -p deno_cache -p deno_canvas -p deno_cron -p deno_crypto -p deno_fetch -p deno_ffi -p deno_fs -p deno_http -p deno_image -p deno_io -p deno_kv -p deno_napi -p napi_sym -p deno_net -p deno_node -p deno_node_crypto -p deno_node_sqlite -p denort_helper -p deno_signals -p deno_telemetry -p deno_url -p deno_web -p deno_webgpu -p deno_webidl -p deno_websocket -p deno_webstorage -p deno_cache_dir -p deno_config -p deno_crypto_provider -p deno_dotenv -p eszip -p deno_inspector_server -p deno_lockfile -p deno_maybe_sync -p napi_sys -p node_resolver -p deno_npm -p deno_npm_cache -p deno_npm_installer -p deno_npmrc -p deno_package_json -p deno_resolver -p deno_typescript_go_client_rust -p deno_runtime -p deno_features -p deno_permissions -p deno_subprocess_windows
       - name: Cache cargo home
         uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830
         if: '!startsWith(github.ref, ''refs/tags/'') && github.ref == ''refs/heads/main'''
@@ -2261,7 +2261,7 @@ jobs:
         if: '!startsWith(github.ref, ''refs/tags/'')'
         env:
           CARGO_PROFILE_DEV_DEBUG: 0
-        run: cargo test --locked --lib -p deno -p denort -p node_shim -p bsdiff_helper -p deno_lib -p deno_snapshots -p deno_bundle_runtime -p deno_cache -p deno_cron -p deno_crypto -p deno_fetch -p deno_ffi -p deno_fs -p deno_http -p deno_image -p deno_io -p deno_kv -p deno_napi -p napi_sym -p deno_net -p deno_node -p deno_node_crypto -p deno_node_sqlite -p denort_helper -p deno_signals -p deno_telemetry -p deno_url -p deno_web -p deno_webgpu -p deno_webidl -p deno_websocket -p deno_webstorage -p deno_cache_dir -p deno_config -p deno_crypto_provider -p deno_dotenv -p eszip -p deno_inspector_server -p deno_lockfile -p deno_maybe_sync -p napi_sys -p node_resolver -p deno_npm -p deno_npm_cache -p deno_npm_installer -p deno_npmrc -p deno_package_json -p deno_resolver -p deno_typescript_go_client_rust -p deno_runtime -p deno_features -p deno_permissions -p deno_subprocess_windows
+        run: cargo test --locked --lib -p deno -p denort -p node_shim -p bsdiff_helper -p deno_lib -p deno_snapshots -p deno_bundle_runtime -p deno_cache -p deno_canvas -p deno_cron -p deno_crypto -p deno_fetch -p deno_ffi -p deno_fs -p deno_http -p deno_image -p deno_io -p deno_kv -p deno_napi -p napi_sym -p deno_net -p deno_node -p deno_node_crypto -p deno_node_sqlite -p denort_helper -p deno_signals -p deno_telemetry -p deno_url -p deno_web -p deno_webgpu -p deno_webidl -p deno_websocket -p deno_webstorage -p deno_cache_dir -p deno_config -p deno_crypto_provider -p deno_dotenv -p eszip -p deno_inspector_server -p deno_lockfile -p deno_maybe_sync -p napi_sys -p node_resolver -p deno_npm -p deno_npm_cache -p deno_npm_installer -p deno_npmrc -p deno_package_json -p deno_resolver -p deno_typescript_go_client_rust -p deno_runtime -p deno_features -p deno_permissions -p deno_subprocess_windows
       - name: Cache cargo home
         uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830
         if: '!startsWith(github.ref, ''refs/tags/'') && github.ref == ''refs/heads/main'''
@@ -5150,7 +5150,7 @@ jobs:
         if: '!startsWith(github.ref, ''refs/tags/'')'
         env:
           CARGO_PROFILE_DEV_DEBUG: 0
-        run: cargo test --locked --lib -p deno -p denort -p node_shim -p bsdiff_helper -p deno_lib -p deno_snapshots -p deno_bundle_runtime -p deno_cache -p deno_cron -p deno_crypto -p deno_fetch -p deno_ffi -p deno_fs -p deno_http -p deno_image -p deno_io -p deno_kv -p deno_napi -p napi_sym -p deno_net -p deno_node -p deno_node_crypto -p deno_node_sqlite -p denort_helper -p deno_signals -p deno_telemetry -p deno_url -p deno_web -p deno_webgpu -p deno_webidl -p deno_websocket -p deno_webstorage -p deno_cache_dir -p deno_config -p deno_crypto_provider -p deno_dotenv -p eszip -p deno_inspector_server -p deno_lockfile -p deno_maybe_sync -p napi_sys -p node_resolver -p deno_npm -p deno_npm_cache -p deno_npm_installer -p deno_npmrc -p deno_package_json -p deno_resolver -p deno_typescript_go_client_rust -p deno_runtime -p deno_features -p deno_permissions -p deno_subprocess_windows
+        run: cargo test --locked --lib -p deno -p denort -p node_shim -p bsdiff_helper -p deno_lib -p deno_snapshots -p deno_bundle_runtime -p deno_cache -p deno_canvas -p deno_cron -p deno_crypto -p deno_fetch -p deno_ffi -p deno_fs -p deno_http -p deno_image -p deno_io -p deno_kv -p deno_napi -p napi_sym -p deno_net -p deno_node -p deno_node_crypto -p deno_node_sqlite -p denort_helper -p deno_signals -p deno_telemetry -p deno_url -p deno_web -p deno_webgpu -p deno_webidl -p deno_websocket -p deno_webstorage -p deno_cache_dir -p deno_config -p deno_crypto_provider -p deno_dotenv -p eszip -p deno_inspector_server -p deno_lockfile -p deno_maybe_sync -p napi_sys -p node_resolver -p deno_npm -p deno_npm_cache -p deno_npm_installer -p deno_npmrc -p deno_package_json -p deno_resolver -p deno_typescript_go_client_rust -p deno_runtime -p deno_features -p deno_permissions -p deno_subprocess_windows
       - name: Cache cargo home
         uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830
         if: '!startsWith(github.ref, ''refs/tags/'') && github.ref == ''refs/heads/main'''

Cargo.lock

@@ -9,6 +9,7 @@ members = [
   "cli/snapshot",
   "ext/bundle",
   "ext/cache",
+  "ext/canvas",
   "ext/cron",
   "ext/crypto",
   "ext/fetch",
@@ -111,6 +112,7 @@ denokv_sqlite = { default-features = false, version = "0.13.0" }
 # exts
 deno_bundle_runtime = { version = "0.34.0", path = "./ext/bundle" }
 deno_cache = { version = "0.180.0", path = "./ext/cache" }
+deno_canvas = { version = "0.109.0", path = "./ext/canvas" }
 deno_cron = { version = "0.127.0", path = "./ext/cron" }
 deno_crypto = { version = "0.261.0", path = "./ext/crypto" }
 deno_fetch = { version = "0.271.0", path = "./ext/fetch" }

Cargo.toml

@@ -196,32 +196,6 @@ pub fn op_jupyter_create_png_from_texture(
   use deno_runtime::deno_webgpu::*;
   use texture::GPUTextureFormat;
 
-  // We only support the 8 bit per pixel formats with 4 channels
-  // as such a pixel has 4 bytes
-  const BYTES_PER_PIXEL: u32 = 4;
-
-  let unpadded_bytes_per_row = texture.size.width * BYTES_PER_PIXEL;
-  let padded_bytes_per_row_padding = (wgpu_types::COPY_BYTES_PER_ROW_ALIGNMENT
-    - (unpadded_bytes_per_row % wgpu_types::COPY_BYTES_PER_ROW_ALIGNMENT))
-    % wgpu_types::COPY_BYTES_PER_ROW_ALIGNMENT;
-  let padded_bytes_per_row =
-    unpadded_bytes_per_row + padded_bytes_per_row_padding;
-
-  let (buffer, maybe_err) = texture.instance.device_create_buffer(
-    texture.device_id,
-    &wgpu_types::BufferDescriptor {
-      label: None,
-      size: (padded_bytes_per_row * texture.size.height) as _,
-      usage: wgpu_types::BufferUsages::MAP_READ
-        | wgpu_types::BufferUsages::COPY_DST,
-      mapped_at_creation: false,
-    },
-    None,
-  );
-  if let Some(maybe_err) = maybe_err {
-    return Err(JsErrorBox::from_err::<GPUError>(maybe_err.into()));
-  }
-
   let (command_encoder, maybe_err) =
     texture.instance.device_create_command_encoder(
       texture.device_id,
@@ -232,94 +206,14 @@ pub fn op_jupyter_create_png_from_texture(
     return Err(JsErrorBox::from_err::<GPUError>(maybe_err.into()));
   }
 
-  texture
-    .instance
-    .command_encoder_copy_texture_to_buffer(
-      command_encoder,
-      &wgpu_types::TexelCopyTextureInfo {
-        texture: texture.id,
-        mip_level: 0,
-        origin: Default::default(),
-        aspect: Default::default(),
-      },
-      &wgpu_types::TexelCopyBufferInfo {
-        buffer,
-        layout: wgpu_types::TexelCopyBufferLayout {
-          offset: 0,
-          bytes_per_row: Some(padded_bytes_per_row),
-          rows_per_image: None,
-        },
-      },
-      &texture.size,
-    )
-    .map_err(|e| JsErrorBox::from_err::<GPUError>(e.into()))?;
-
-  let (command_buffer, maybe_err) = texture.instance.command_encoder_finish(
+  let data = canvas::copy_texture_to_vec(
+    &texture.instance,
+    texture.device_id,
+    texture.queue_id,
     command_encoder,
-    &wgpu_types::CommandBufferDescriptor { label: None },
-    None,
-  );
-  if let Some((_, maybe_err)) = maybe_err {
-    return Err(JsErrorBox::from_err::<GPUError>(maybe_err.into()));
-  }
-
-  let maybe_err = texture
-    .instance
-    .queue_submit(texture.queue_id, &[command_buffer])
-    .err();
-  if let Some((_, maybe_err)) = maybe_err {
-    return Err(JsErrorBox::from_err::<GPUError>(maybe_err.into()));
-  }
-
-  let index = texture
-    .instance
-    .buffer_map_async(
-      buffer,
-      0,
-      None,
-      wgpu_core::resource::BufferMapOperation {
-        host: wgpu_core::device::HostMap::Read,
-        callback: None,
-      },
-    )
-    .map_err(|e| JsErrorBox::from_err::<GPUError>(e.into()))?;
-
-  texture
-    .instance
-    .device_poll(
-      texture.device_id,
-      wgpu_types::PollType::Wait {
-        submission_index: Some(index),
-        timeout: None,
-      },
-    )
-    .unwrap();
-
-  let (slice_pointer, range_size) = texture
-    .instance
-    .buffer_get_mapped_range(buffer, 0, None)
-    .map_err(|e| JsErrorBox::from_err::<GPUError>(e.into()))?;
-
-  let data = {
-    // SAFETY: creating a slice from pointer and length provided by wgpu and
-    // then dropping it before unmapping
-    let slice = unsafe {
-      std::slice::from_raw_parts(slice_pointer.as_ptr(), range_size as usize)
-    };
-
-    let mut unpadded =
-      Vec::with_capacity((unpadded_bytes_per_row * texture.size.height) as _);
-
-    for i in 0..texture.size.height {
-      unpadded.extend_from_slice(
-        &slice[((i * padded_bytes_per_row) as usize)
-          ..(((i + 1) * padded_bytes_per_row) as usize)]
-          [..(unpadded_bytes_per_row as usize)],
-      );
-    }
-
-    unpadded
-  };
+    texture.id,
+    &texture.size,
+  )?;
 
   let color_type = match texture.format {
     GPUTextureFormat::Rgba8unorm => ExtendedColorType::Rgba8,
@@ -345,12 +239,6 @@ pub fn op_jupyter_create_png_from_texture(
     .write_image(&data, texture.size.width, texture.size.height, color_type)
     .map_err(|e| JsErrorBox::type_error(e.to_string()))?;
 
-  texture
-    .instance
-    .buffer_unmap(buffer)
-    .map_err(|e| JsErrorBox::from_err::<GPUError>(e.into()))?;
-  texture.instance.buffer_drop(buffer);
-
   Ok(deno_runtime::deno_web::forgiving_base64_encode(&out))
 }
 

cli/ops/jupyter.rs

@@ -197,6 +197,11 @@ declare namespace Deno {
    * @experimental
    */
   export class UnsafeWindowSurface {
+    /** The height of the window. */
+    height: number;
+    /** The width of the window. */
+    width: number;
+
     constructor(
       options: {
         system: "cocoa" | "win32" | "x11" | "wayland";
@@ -206,12 +211,13 @@ declare namespace Deno {
         height: number;
       },
     );
-    getContext(context: "webgpu"): GPUCanvasContext;
+
+    getContext(
+      contextId: OffscreenRenderingContextId,
+      options?: any,
+    ): OffscreenRenderingContext | null;
+
     present(): void;
-    /**
-     * This method should be invoked when the size of the window changes.
-     */
-    resize(width: number, height: number): void;
   }
 
   /** **UNSTABLE**: New API, yet to be vetted.

cli/tsc/dts/lib.deno.unstable.d.ts

@@ -152,7 +152,7 @@ declare function createImageBitmap(
  *   console.error("Failed to create ImageBitmap:", error);
  * }
  * ```
- * @see https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap/createImageBitmap
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/createImageBitmap
  */
 declare function createImageBitmap(
   image: ImageBitmapSource,
@@ -192,3 +192,114 @@ declare var ImageBitmap: {
   prototype: ImageBitmap;
   new (): ImageBitmap;
 };
+
+/** @category Canvas */
+type OffscreenRenderingContextId = "bitmaprenderer" | "webgpu";
+/** @category Canvas */
+type OffscreenRenderingContext = ImageBitmapRenderingContext | GPUCanvasContext;
+
+/** @category Canvas */
+interface ImageEncodeOptions {
+  quality?: number;
+  type?: string;
+}
+
+/** @category Canvas */
+type GPUCanvasAlphaMode = "opaque" | "premultiplied";
+
+/** @category Canvas */
+type GPUPresentMode =
+  | "auto-vsync"
+  | "auto-no-vsync"
+  | "fifo"
+  | "fifo-relaxed"
+  | "immediate"
+  | "mailbox";
+
+/** @category Canvas */
+interface GPUCanvasConfiguration {
+  device: GPUDevice;
+  format: GPUTextureFormat;
+  usage?: GPUTextureUsageFlags;
+  viewFormats?: GPUTextureFormat[];
+  colorSpace?: "srgb" | "display-p3";
+  alphaMode?: GPUCanvasAlphaMode;
+
+  // extended from spec
+  presentMode?: GPUPresentMode;
+}
+
+/** @category Canvas */
+interface GPUCanvasContext {
+  /** The canvas that this context is bound to. */
+  readonly canvas: OffscreenCanvas;
+
+  configure(configuration: GPUCanvasConfiguration): undefined;
+  getConfiguration(): GPUCanvasConfiguration | null;
+  unconfigure(): undefined;
+  getCurrentTexture(): GPUTexture;
+}
+/** @category Canvas */
+declare var GPUCanvasContext: {
+  prototype: GPUCanvasContext;
+};
+
+/** @category Canvas */
+interface ImageBitmapRenderingContext {
+  /** The canvas that this context is bound to. */
+  readonly canvas: OffscreenCanvas;
+
+  transferFromImageBitmap(bitmap: ImageBitmap | null): undefined;
+}
+/** @category Canvas */
+declare var ImageBitmapRenderingContext: {
+  prototype: ImageBitmapRenderingContext;
+};
+
+/**
+ * @category Canvas
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
+ */
+interface OffscreenCanvas extends EventTarget {
+  /** The height of the canvas. */
+  height: number;
+  /** The width of the canvas. */
+  width: number;
+
+  /** Create a Blob object representing the image contained in the canvas. */
+  convertToBlob(options?: ImageEncodeOptions): Promise<Blob>;
+
+  /**
+   * Get a drawing context for the canvas.
+   * If this was previously called, it will return the same context.
+   */
+  getContext(
+    contextId: "bitmaprenderer",
+    options?: any,
+  ): ImageBitmapRenderingContext | null;
+  getContext(contextId: "webgpu", options?: any): GPUCanvasContext | null;
+  getContext(
+    contextId: OffscreenRenderingContextId,
+    options?: any,
+  ): OffscreenRenderingContext | null;
+  // Spec also defines "2d", "webgl", and "webgl2" context ids; Deno does
+  // not implement those and getContext returns null for them.
+  getContext(
+    contextId: "2d" | "webgl" | "webgl2",
+    options?: any,
+  ): null;
+
+  /**
+   * Create an ImageBitmap object representing the image contained in the canvas.
+   */
+  transferToImageBitmap(): ImageBitmap;
+}
+
+/**
+ * @category Canvas
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
+ */
+declare var OffscreenCanvas: {
+  prototype: OffscreenCanvas;
+  new (width: number, height: number): OffscreenCanvas;
+};