From 21d3fa9889f0e6e122fc5d18c850e48e065a24fa Mon Sep 17 00:00:00 2001 From: Dean Srebnik <49134864+load1n9@users.noreply.github.com> Date: Wed, 24 Jan 2024 12:07:40 -0500 Subject: [PATCH] fix: webgpu example --- deno.jsonc | 4 +- examples/webgpu.ts | 131 ++++-------------------------------- src/core/event.ts | 4 +- src/platform/glfw/window.ts | 8 +-- 4 files changed, 20 insertions(+), 127 deletions(-) diff --git a/deno.jsonc b/deno.jsonc index 081c763..91c9f4b 100644 --- a/deno.jsonc +++ b/deno.jsonc @@ -18,12 +18,12 @@ "example:capture": "deno run -A --unstable examples/mouse-capture.ts", "example:custom_cursor": "deno run -A --unstable examples/custom-cursor.ts", "example:custom_icon": "deno run -A --unstable examples/custom-icon.ts", - "example:webgpu": "deno run -A --unstable examples/webgpu.ts" + "example:webgpu": "deno run -A --unstable-ffi --unstable-webgpu examples/webgpu.ts" }, "lint": { "rules": { - "exclude": ["no-unused-vars", "no-window"] + "exclude": ["no-unused-vars"] } } } diff --git a/examples/webgpu.ts b/examples/webgpu.ts index 8b8ba3a..53b7d46 100644 --- a/examples/webgpu.ts +++ b/examples/webgpu.ts @@ -16,141 +16,34 @@ const surface = window.windowSurface(); const context = surface.getContext("webgpu"); -let pipeline: GPURenderPipeline; - -const uniformLength = 5; - -let uniformValues: Float32Array, - uniformBindGroup: GPUBindGroup, - uniformBuffer: GPUBuffer; - -function createPipeline() { - const fragEntry = "fs_main"; - - const shaderModule = device.createShaderModule({ - code: ` - struct Uniforms { - mouse: vec2f, - clicked: f32, - frame: f32, - }; - - @group(0) @binding(0) var shaderplay: Uniforms; - $struct VertexInput { - @builtin(vertex_index) vertex_index: u32, - }; - - @vertex - fn vs_main(in: VertexInput) -> @builtin(position) vec4 { - let x = f32(i32(in.vertex_index) - 1); - let y = f32(i32(in.vertex_index & 1u) * 2 - 1); - return vec4(x, y, 0.0, 1.0); - } - - @fragment - fn fs_main(@builtin(position) pos: vec4) -> @location(0) vec4 { - return vec4(1.0, 0.0, 0.0, 1.0); - } - `, - label: "example", - }); - - const bindGroupLayout = device.createBindGroupLayout({ - entries: [ - { - binding: 0, - visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX, - buffer: { - type: "uniform", - }, - }, - ], - }); - pipeline = device.createRenderPipeline({ - // "auto" layout not working in Deno but works in browser - layout: device.createPipelineLayout({ - bindGroupLayouts: [ - bindGroupLayout, - ], - }), - vertex: { - module: shaderModule, - entryPoint: "vs_main", - buffers: [], - }, - fragment: { - module: shaderModule, - entryPoint: fragEntry, - targets: [ - { - format: "bgra8unorm", - }, - ], - }, - }); - - const value = new Float32Array(uniformLength); - uniformBuffer = device.createBuffer({ - size: value.byteLength, - usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, - }); - uniformValues = value; - - device.queue.writeBuffer(uniformBuffer, 0, value); - - uniformBindGroup = device.createBindGroup({ - layout: bindGroupLayout, - entries: [ - { binding: 0, resource: { buffer: uniformBuffer } }, - ], - }); - - // window.raise(); -} - -createPipeline(); - context.configure({ device, format: "bgra8unorm", -}); - -addEventListener("mousemove", (evt) => { - uniformValues[0] = evt.clientX / width; - uniformValues[1] = evt.clientY / height; -}); - -addEventListener("mousedown", (evt) => { - uniformValues[2] = 1; -}); - -addEventListener("mouseup", (evt) => { - uniformValues[2] = 0; + width, + height, }); await mainloop(() => { - uniformValues[3]++; // frame++ + // Sine wave + const r = Math.sin(Date.now() / 1000) / 2 + 0.5; + const g = Math.sin(Date.now() / 1000 + 2) / 2 + 0.5; + const b = Math.sin(Date.now() / 1000 + 4) / 2 + 0.5; - const commandEncoder = device.createCommandEncoder(); const textureView = context.getCurrentTexture().createView(); - - const renderPass = commandEncoder.beginRenderPass({ + const renderPassDescriptor = { colorAttachments: [ { view: textureView, - clearValue: { r: 0, g: 0, b: 0, a: 1 }, + clearValue: { r, g, b, a: 1.0 }, loadOp: "clear", storeOp: "store", }, ], - }); - - device.queue.writeBuffer(uniformBuffer, 0, uniformValues); + }; - renderPass.setPipeline(pipeline); - renderPass.setBindGroup(0, uniformBindGroup); - renderPass.draw(3, 1); - renderPass.end(); + const commandEncoder = device.createCommandEncoder(); + const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); + passEncoder.end(); device.queue.submit([commandEncoder.finish()]); surface.present(); diff --git a/src/core/event.ts b/src/core/event.ts index 679abe4..6a913bf 100644 --- a/src/core/event.ts +++ b/src/core/event.ts @@ -1,3 +1,4 @@ +// deno-lint-ignore-file no-window import { DwmWindow } from "./window.ts"; /** @@ -256,8 +257,7 @@ export function _cancelAnimationFrameImpl(id: number) { animationFrames.delete(id); } -// deno-lint-ignore no-window -Object.assign(window, { +Object.assign(globalThis, { requestAnimationFrame: _requestAnimationFrameImpl, cancelAnimationFrame: _cancelAnimationFrameImpl, }); diff --git a/src/platform/glfw/window.ts b/src/platform/glfw/window.ts index c4aacca..5a1f13a 100644 --- a/src/platform/glfw/window.ts +++ b/src/platform/glfw/window.ts @@ -1071,8 +1071,8 @@ export class WindowGlfw extends DwmWindow { #rawHandle(): [ RawPlatform, - Deno.UnsafePointerView, - Deno.UnsafePointerView | null, + Deno.PointerValue, + Deno.PointerValue | null, ] { let platform: RawPlatform; let handle: Deno.PointerValue; @@ -1114,8 +1114,8 @@ export class WindowGlfw extends DwmWindow { } return [ platform, - new Deno.UnsafePointerView(handle!), - display == null ? null : new Deno.UnsafePointerView(display), + handle!, + display == null ? null : display, ]; }