feat: webgpu wrapper

Author: load1n9

.github/workflows/ci.yml

@@ -20,6 +20,3 @@ jobs:
 
       - name: Deno Fmt
         run: deno fmt --check
-
-      - name: Deno Lint
-        run: deno lint

README.md

@@ -17,7 +17,7 @@ import {
   createWindow,
   getProcAddress,
   mainloop,
-} from "https://deno.land/x/[email protected]/mod.ts";
+} from "jsr:@gfx/dwm";
 import * as gl from "https://deno.land/x/[email protected]/api/gles23.2.ts";
 
 const window = createWindow({
@@ -51,7 +51,7 @@ await mainloop(frame);
 import {
   mainloop,
   WindowCanvas,
-} from "https://deno.land/x/dwm@0.3.4/ext/canvas.ts";
+} from "jsr:@gfx/dwm/ext/canvas";
 
 const canvas = new WindowCanvas({
   title: "Skia Canvas",
@@ -80,14 +80,12 @@ See [examples](./examples) for more examples!
 
 For drawing, you can use:
 
+- [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) (Use `ext/webgpu` for an easy to use wrapper)
 - [Deno Gluten](https://github.com/deno-windowing/gluten)
 - [Skia Canvas](https://github.com/DjDeveloperr/skia_canvas) (Use
-  `ext/canvas.ts` for an easy to use wrapper)
+  `ext/canvas` for an easy to use wrapper)
 - [Deno Vulkan](https://github.com/deno-windowing/vulkan)
 
-To package your application you can use:
-
-- [wpack](https://github.com/deno-windowing/wpack)
 
 Since this module depends on unstable FFI API, you need to pass `--unstable`
 along with `--allow-ffi`, `--allow-write` and `--allow-env`.

deno.jsonc

@@ -1,10 +1,11 @@
 {
   "name": "@gfx/dwm",
   "license": "Apache-2.0",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "exports": {
     ".": "./mod.ts",
-    "./ext/canvas": "./ext/canvas.ts"
+    "./ext/canvas": "./ext/canvas.ts",
+    "./ext/webgpu": "./ext/webgpu.ts"
   },
   "tasks": {
     "example:opengl": "deno run -A --unstable examples/opengl.ts",

examples/webgpu-cube-floating.ts

@@ -1,9 +1,6 @@
 // ported from https://github.com/webgpu/webgpu-samples/blob/main/src/sample/rotatingCube/main.ts
 import { mat4, vec3 } from "npm:wgpu-matrix";
-import { createWindow, mainloop } from "../mod.ts";
-
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter!.requestDevice();
+import { createWindowGPU, mainloop } from "../ext/webgpu.ts";
 
 const cubeVertexSize = 4 * 10;
 const cubePositionOffset = 0;
@@ -56,7 +53,7 @@ export const cubeVertexArray = new Float32Array([
   -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
 ]);
 
-const window = createWindow({
+const window = await createWindowGPU({
   title: "Deno Window Manager",
   width: 512,
   height: 512,
@@ -66,29 +63,25 @@ const window = createWindow({
   floating: true,
 });
 
-const { width, height } = window.framebufferSize;
-
-const surface = window.windowSurface();
-
-const context = surface.getContext("webgpu");
+const context = window.getContext("webgpu");
 
 context.configure({
-  device,
+  device: window.device,
   format: "bgra8unorm",
 });
 
-const verticesBuffer = device.createBuffer({
+const verticesBuffer = window.device.createBuffer({
   size: cubeVertexArray.byteLength,
   usage: GPUBufferUsage.VERTEX,
   mappedAtCreation: true,
 });
 new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray);
 verticesBuffer.unmap();
 
-const pipeline = device.createRenderPipeline({
+const pipeline = window.device.createRenderPipeline({
   layout: "auto",
   vertex: {
-    module: device.createShaderModule({
+    module: window.device.createShaderModule({
       code: `
       struct Uniforms {
           modelViewProjectionMatrix : mat4x4<f32>,
@@ -136,7 +129,7 @@ const pipeline = device.createRenderPipeline({
     ],
   },
   fragment: {
-    module: device.createShaderModule({
+    module: window.device.createShaderModule({
       code: `@fragment
       fn main(
         @location(0) fragUV: vec2<f32>,
@@ -170,19 +163,22 @@ const pipeline = device.createRenderPipeline({
   },
 });
 
-const depthTexture = device.createTexture({
-  size: [width, height],
+const depthTexture = window.device.createTexture({
+  size: [
+    window.window.framebufferSize.width,
+    window.window.framebufferSize.height,
+  ],
   format: "depth24plus",
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
 });
 
 const uniformBufferSize = 4 * 16; // 4x4 matrix
-const uniformBuffer = device.createBuffer({
+const uniformBuffer = window.device.createBuffer({
   size: uniformBufferSize,
   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
 });
 
-const uniformBindGroup = device.createBindGroup({
+const uniformBindGroup = window.device.createBindGroup({
   layout: pipeline.getBindGroupLayout(0),
   entries: [
     {
@@ -213,7 +209,8 @@ const renderPassDescriptor: GPURenderPassDescriptor = {
     depthStoreOp: "store",
   },
 };
-const aspect = width / height;
+const aspect = window.window.framebufferSize.width /
+  window.window.framebufferSize.height;
 const projectionMatrix = mat4.perspective(
   (2 * Math.PI) / 5,
   aspect,
@@ -240,7 +237,7 @@ function getTransformationMatrix() {
 
 mainloop(() => {
   const transformationMatrix = getTransformationMatrix();
-  device.queue.writeBuffer(
+  window.device.queue.writeBuffer(
     uniformBuffer,
     0,
     transformationMatrix.buffer,
@@ -251,13 +248,13 @@ mainloop(() => {
     .getCurrentTexture()
     .createView();
 
-  const commandEncoder = device.createCommandEncoder();
+  const commandEncoder = window.device.createCommandEncoder();
   const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
   passEncoder.setPipeline(pipeline);
   passEncoder.setBindGroup(0, uniformBindGroup);
   passEncoder.setVertexBuffer(0, verticesBuffer);
   passEncoder.draw(cubeVertexCount);
   passEncoder.end();
-  device.queue.submit([commandEncoder.finish()]);
-  surface.present();
+  window.device.queue.submit([commandEncoder.finish()]);
+  window.surface.present();
 }, false);

examples/webgpu-cube.ts

@@ -1,9 +1,20 @@
 // ported from https://github.com/webgpu/webgpu-samples/blob/main/src/sample/rotatingCube/main.ts
 import { mat4, vec3 } from "npm:wgpu-matrix";
-import { createWindow, mainloop } from "../mod.ts";
+import { createWindowGPU, mainloop } from "../ext/webgpu.ts";
 
-const adapter = await navigator.gpu.requestAdapter();
-const device = await adapter!.requestDevice();
+const window = await createWindowGPU({
+  title: "Deno Window Manager",
+  width: 512,
+  height: 512,
+  resizable: true,
+});
+
+const context = window.getContext("webgpu");
+
+context.configure({
+  device: window.device,
+  format: "bgra8unorm",
+});
 
 const cubeVertexSize = 4 * 10;
 const cubePositionOffset = 0;
@@ -56,36 +67,18 @@ export const cubeVertexArray = new Float32Array([
   -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
 ]);
 
-const window = createWindow({
-  title: "Deno Window Manager",
-  width: 512,
-  height: 512,
-  resizable: true,
-});
-
-const { width, height } = window.framebufferSize;
-
-const surface = window.windowSurface();
-
-const context = surface.getContext("webgpu");
-
-context.configure({
-  device,
-  format: "bgra8unorm",
-});
-
-const verticesBuffer = device.createBuffer({
+const verticesBuffer = window.device.createBuffer({
   size: cubeVertexArray.byteLength,
   usage: GPUBufferUsage.VERTEX,
   mappedAtCreation: true,
 });
 new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray);
 verticesBuffer.unmap();
 
-const pipeline = device.createRenderPipeline({
+const pipeline = window.device.createRenderPipeline({
   layout: "auto",
   vertex: {
-    module: device.createShaderModule({
+    module: window.device.createShaderModule({
       code: `
       struct Uniforms {
           modelViewProjectionMatrix : mat4x4<f32>,
@@ -133,7 +126,7 @@ const pipeline = device.createRenderPipeline({
     ],
   },
   fragment: {
-    module: device.createShaderModule({
+    module: window.device.createShaderModule({
       code: `@fragment
       fn main(
         @location(0) fragUV: vec2<f32>,
@@ -167,19 +160,19 @@ const pipeline = device.createRenderPipeline({
   },
 });
 
-const depthTexture = device.createTexture({
-  size: [width, height],
+const depthTexture = window.device.createTexture({
+  size: [window.window.size.width, window.window.size.height],
   format: "depth24plus",
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
 });
 
 const uniformBufferSize = 4 * 16; // 4x4 matrix
-const uniformBuffer = device.createBuffer({
+const uniformBuffer = window.device.createBuffer({
   size: uniformBufferSize,
   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
 });
 
-const uniformBindGroup = device.createBindGroup({
+const uniformBindGroup = window.device.createBindGroup({
   layout: pipeline.getBindGroupLayout(0),
   entries: [
     {
@@ -210,7 +203,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = {
     depthStoreOp: "store",
   },
 };
-const aspect = width / height;
+const aspect = window.window.size.width / window.window.size.height;
 const projectionMatrix = mat4.perspective(
   (2 * Math.PI) / 5,
   aspect,
@@ -237,7 +230,7 @@ function getTransformationMatrix() {
 
 mainloop(() => {
   const transformationMatrix = getTransformationMatrix();
-  device.queue.writeBuffer(
+  window.device.queue.writeBuffer(
     uniformBuffer,
     0,
     transformationMatrix.buffer,
@@ -248,13 +241,13 @@ mainloop(() => {
     .getCurrentTexture()
     .createView();
 
-  const commandEncoder = device.createCommandEncoder();
+  const commandEncoder = window.device.createCommandEncoder();
   const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
   passEncoder.setPipeline(pipeline);
   passEncoder.setBindGroup(0, uniformBindGroup);
   passEncoder.setVertexBuffer(0, verticesBuffer);
   passEncoder.draw(cubeVertexCount);
   passEncoder.end();
-  device.queue.submit([commandEncoder.finish()]);
-  surface.present();
+  window.device.queue.submit([commandEncoder.finish()]);
+  window.surface.present();
 }, false);