feat(webgpu): external webgpu surfaces / byow

[littledivy]

This PR contains the implementation of the External webgpu surfaces / BYOW proposal. BYOW stands for "Bring your own window".

Closes #21713

Adds Deno.UnsafeWindowSurface ( --unstable-webgpu API) to the Deno namespace:

class UnsafeWindowSurface {
  constructor(
    system: "cocoa" | "x11" | "win32",
    winHandle: Deno.PointerValue,
    displayHandle: Deno.PointerValue | null
  );
  
  getContext(type: "webgpu"): GPUCanvasContext;

  present(): void;
}

For the initial pass, I've opted to support the three major windowing systems. The parameters correspond to the table below:

system	winHandle	displayHandle
"cocoa" (macOS)	NSView*	-
"win32" (Windows)	HWND	HINSTANCE
"x11" (Linux)	Xlib Window	Xlib Display*

Ecosystem support:

• deno_sdl2 (sdl2) - mod.ts#L1209
• dwm (glfw) - Add rawHandle() API deno-windowing/dwm#29
• pane (winit)

Example

// A simple clear screen pass, colors based on mouse position.

import { EventType, WindowBuilder } from "https://deno.land/x/sdl2@0.7.0/mod.ts";

const window = new WindowBuilder("sdl2 + deno + webgpu", 640, 480).build();
const [system, windowHandle, displayHandle] = window.rawHandle();

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const context = Deno.createWindowSurface(system, windowHandle, displayHandle);

context.configure({
  device: device,
  format: "bgra8unorm",
  height: 480,
  width: 640,
});

let r = 0.0;
let g = 0.0;
let b = 0.0;

for (const event of window.events()) {
  if (event.type === EventType.Quit) {
    break;
  } else if (event.type === EventType.Draw) {
    const textureView = context.getCurrentTexture().createView();

    const renderPassDescriptor: GPURenderPassDescriptor = {
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r, g, b, a: 1.0 },
          loadOp: "clear",
          storeOp: "store",
        },
      ],
    };

    const commandEncoder = device.createCommandEncoder();
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.end();

    device.queue.submit([commandEncoder.finish()]);
    Deno.presentGPUCanvasContext(context);
  }

  if (event.type === EventType.MouseMotion) {
    r = event.x / 640;
    g = event.y / 480;
    b = 1.0 - r - g;
  }
}

You can find more examples in the linked tracking issue.

[crowlKats]

Overall LGTM, though would like someone with more FFI knowledge than me to take a look as well.

[aapoalas]

From an FFI point of view there isn't much to say here: "Pointers are bad mmkay" about sums it up but that's not really very useful :)

I had some questions but nothing really major. This is a very interesting feature in either case and I'm all for taking advantage of the opportunities that FFI provides.

[littledivy]

@bartlomieju Should this be part of the 1.40 milestone?