Using createRenderPipelineAsync everywhere

src/pages/canvas-texture.tsx

@@ -13,7 +13,7 @@ import { type Vec3, mat4 } from "~/utils/math";
 import { useCanvas } from "~/webgpu/use-canvas";
 import { useToggle } from "usehooks-ts";
 import { ToOverlay } from "~/utils/overlay";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 import { getSourceSize, numMipLevels } from "~/utils/mips";
 import { makeWithMips } from "~/webgpu/gpu-mipmap";
 import { range } from "~/utils/other";
@@ -56,7 +56,7 @@ const Example: FC = () => {
  const frameRef = useRef<(time: number) => void>();
 
  useGPU(
- ({ device }) => {
+ async ({ device, frame, gpu }) => {
  const shader = gpu.createShaderModule({
  label: "Canvas texture shader",
  code: /* wgsl */ `
@@ -96,7 +96,7 @@ const Example: FC = () => {
  }`,
  });
 
- const pipeline = gpu.createRenderPipeline({
+ const pipeline = await gpu.createRenderPipelineAsync({
  label: "Canvas texture render pipeline",
  layout: "auto",
  vertex: {

src/pages/compute.tsx

@@ -6,15 +6,15 @@ import { WebGPUApp } from "~/utils/webgpu-app";
 import { useAsyncAction } from "~/utils/hooks";
 import { ToOverlay } from "~/utils/overlay";
 import { useToggle } from "usehooks-ts";
-import { action, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 
 const Example: FC = () => {
  const input = useMemo(() => new Float32Array([1, 3, 5, 5, 9, 7, 4, 5]), []);
 
  const [label, toggleLabel] = useToggle();
 
  const double = useGPU(
- ({ device }) => {
+ async ({ device, action, gpu }) => {
  const shader = gpu.createShaderModule({
  code: /* wgsl */ `
  @group(0) @binding(0) var<storage, read_write> data: array<f32>;
@@ -29,7 +29,7 @@ const Example: FC = () => {
  label: "doubling compute module",
  });
 
- const pipeline = gpu.createComputePipeline({
+ const pipeline = await gpu.createComputePipelineAsync({
  label: "Main compute pipeline",
  layout: "auto",
  compute: {
@@ -96,7 +96,7 @@ const Example: FC = () => {
  // this gotta go
  const { execute, locked } = useAsyncAction(
  { double },
- async ({ double }) => double(),
+ async ({ double }) => double().catch(console.error),
  []
  );
 

src/pages/external-textures.tsx

@@ -10,7 +10,7 @@ import {
 import { WebGPUApp } from "~/utils/webgpu-app";
 import { ToOverlay } from "~/utils/overlay";
 import { useAsyncResource } from "~/utils/hooks";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 import { getSourceSize, loadImageBitmap } from "~/utils/mips";
 import { type H } from "~/utils/other";
 
@@ -42,7 +42,7 @@ const Example: FC = () => {
  const context = useWebGPUContext();
 
  useGPU(
- ({ device }) => {
+ async ({ device, frame, gpu }) => {
  const shader = gpu.createShaderModule({
  label: "External texture shader module",
  code: /* wgsl */ `
@@ -87,7 +87,7 @@ const Example: FC = () => {
  `,
  });
 
- const pipeline = gpu.createRenderPipeline({
+ const pipeline = await gpu.createRenderPipelineAsync({
  label: "External texture render pipeline",
  layout: "auto",
  vertex: {

src/pages/hello-triangle.tsx

@@ -4,17 +4,18 @@ import Head from "next/head";
 import { type FC } from "react";
 import { usePresentationFormat, useWebGPUContext } from "~/webgpu/canvas";
 import { WebGPUApp } from "~/utils/webgpu-app";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 
 const Example: FC = () => {
  const presentationFormat = usePresentationFormat();
 
  const context = useWebGPUContext();
 
- useGPU(() => {
- const shader = gpu.createShaderModule({
- label: "our hardcoded red triangle shader",
- code: /* wgsl */ `
+ useGPU(
+ async ({ frame, gpu }) => {
+ const shader = gpu.createShaderModule({
+ label: "our hardcoded red triangle shader",
+ code: /* wgsl */ `
  @vertex fn vsMain(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
  vec2f( 0.0, 0.5),
@@ -28,41 +29,43 @@ const Example: FC = () => {
  return vec4f(1.0, 0.0, 0.0, 1.0);
  }
  `,
- });
+  });
 
- const pipeline = gpu.createRenderPipeline({
- label: "Main render pipeline",
- layout: "auto",
- vertex: {
- module: shader,
- entryPoint: "vsMain",
- },
- fragment: {
- module: shader,
- entryPoint: "fsMain",
- targets: [{ format: presentationFormat }],
- },
- });
+  const pipeline = await gpu.createRenderPipelineAsync({
+  label: "Main render pipeline",
+  layout: "auto",
+  vertex: {
+  module: shader,
+  entryPoint: "vsMain",
+  },
+  fragment: {
+  module: shader,
+  entryPoint: "fsMain",
+  targets: [{ format: presentationFormat }],
+  },
+  });
 
- frame.main!(({ encoder }) => {
- const renderPassDescriptor: GPURenderPassDescriptor = {
- label: "our basic canvas renderPass",
- colorAttachments: [
- {
- view: context.getCurrentTexture().createView(),
- clearValue: [0.0, 0.0, 0.1, 1],
- loadOp: "clear",
- storeOp: "store",
- },
- ],
- };
+  frame.main!(({ encoder }) => {
+  const renderPassDescriptor: GPURenderPassDescriptor = {
+  label: "our basic canvas renderPass",
+  colorAttachments: [
+  {
+  view: context.getCurrentTexture().createView(),
+  clearValue: [0.0, 0.0, 0.1, 1],
+  loadOp: "clear",
+  storeOp: "store",
+  },
+  ],
+  };
 
- const pass = encoder.beginRenderPass(renderPassDescriptor);
- pass.setPipeline(pipeline);
- pass.draw(3);
- pass.end();
- }, []);
- }, [presentationFormat]);
+ const pass = encoder.beginRenderPass(renderPassDescriptor);
+ pass.setPipeline(pipeline);
+ pass.draw(3);
+ pass.end();
+ }, []);
+ },
+ [presentationFormat]
+ );
 
  return null;
 };

src/pages/index-buffers.tsx

@@ -10,7 +10,7 @@ import {
 import { WebGPUApp } from "~/utils/webgpu-app";
 import { ToOverlay } from "~/utils/overlay";
 import { rand, range } from "~/utils/other";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 
 export function createCircleVerticesIndexed({
  radius = 1,
@@ -93,7 +93,7 @@ const Example: FC = () => {
  const objectCountRef = useRef(10);
 
  const randomize = useGPU(
- ({ device }) => {
+ async ({ frame, gpu, device }) => {
  const shader = gpu.createShaderModule({
  label: "Index example shader",
  code: /* wgsl */ `
@@ -153,7 +153,7 @@ const Example: FC = () => {
  },
  ];
 
- const pipeline = gpu.createRenderPipeline({
+ const pipeline = await gpu.createRenderPipelineAsync({
  label: "Index buffer pipeline",
  layout: "auto",
  vertex: {

src/pages/interstage.tsx

@@ -7,7 +7,7 @@ import { WebGPUApp } from "~/utils/webgpu-app";
 import { useToggle } from "usehooks-ts";
 import { ToOverlay } from "~/utils/overlay";
 import { match } from "ts-pattern";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 
 const InterpolationType = {
  /**
@@ -65,11 +65,12 @@ const Example: FC = () => {
 
  const context = useWebGPUContext();
 
- useGPU(() => {
- const shader = gpu.createShaderModule({
- label: "rgb triangle shader",
- code: value
- ? /* wgsl */ `
+ useGPU(
+ async ({ frame, gpu }) => {
+ const shader = gpu.createShaderModule({
+ label: "rgb triangle shader",
+ code: value
+ ? /* wgsl */ `
  struct OurVertexShaderOutput {
  // Note @builtin(position) is accessible in the 
  // vertex shader too, so you can either access fsInput.position
@@ -131,7 +132,7 @@ const Example: FC = () => {
  // return fsInput.color;
  // }
  `
- : /* wgsl */ `
+  : /* wgsl */ `
  struct OurVertexShaderOutput {
  @builtin(position) position: vec4f,
  };
@@ -157,48 +158,50 @@ const Example: FC = () => {
  return select(red, cyan, checker);
  }
  `,
- });
+  });
 
- const pipeline = gpu.createRenderPipeline({
- label: "Main render pipeline",
- layout: "auto",
- vertex: {
- module: shader,
- buffers: [],
- entryPoint: "vsMain",
- },
- fragment: {
- module: shader,
- entryPoint: "fsMain",
- targets: [{ format: presentationFormat }],
- },
- });
+  const pipeline = await gpu.createRenderPipelineAsync({
+  label: "Main render pipeline",
+  layout: "auto",
+  vertex: {
+  module: shader,
+  buffers: [],
+  entryPoint: "vsMain",
+  },
+  fragment: {
+  module: shader,
+  entryPoint: "fsMain",
+  targets: [{ format: presentationFormat }],
+  },
+  });
 
- frame.main!(
- ({ encoder }) => {
- const renderPassDescriptor: GPURenderPassDescriptor = {
- label: "our basic canvas renderPass",
- colorAttachments: [
- // This is the location(0)
- // since we use context.getCurrentTexture as the view
- // it will render to the canvas
- {
- view: context.getCurrentTexture().createView(),
- clearValue: [0.0, 0.0, 0.0, 1],
- loadOp: "clear",
- storeOp: "store",
- },
- ],
- };
+  frame.main!(
+  ({ encoder }) => {
+  const renderPassDescriptor: GPURenderPassDescriptor = {
+  label: "our basic canvas renderPass",
+  colorAttachments: [
+  // This is the location(0)
+  // since we use context.getCurrentTexture as the view
+  // it will render to the canvas
+  {
+  view: context.getCurrentTexture().createView(),
+  clearValue: [0.0, 0.0, 0.0, 1],
+  loadOp: "clear",
+  storeOp: "store",
+  },
+  ],
+  };
 
- const pass = encoder.beginRenderPass(renderPassDescriptor);
- pass.setPipeline(pipeline);
- pass.draw(3);
- pass.end();
- },
- [value, type, presentationFormat, sampling]
- );
- }, [value, type, presentationFormat, sampling]);
+ const pass = encoder.beginRenderPass(renderPassDescriptor);
+ pass.setPipeline(pipeline);
+ pass.draw(3);
+ pass.end();
+ },
+ [value, type, presentationFormat, sampling]
+ );
+ },
+ [value, type, presentationFormat, sampling]
+ );
 
  return (
  <ToOverlay>

src/pages/storage-buffers.tsx

@@ -12,7 +12,7 @@ import {
  useWebGPUCanvas,
  useWebGPUContext,
 } from "~/webgpu/canvas";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 
 const Example: FC = () => {
  const canvas = useWebGPUCanvas();
@@ -21,7 +21,7 @@ const Example: FC = () => {
  const presentationFormat = usePresentationFormat();
 
  useGPU(
- ({ device }) => {
+ async ({ frame, gpu, device }) => {
  const shader = gpu.createShaderModule({
  label: "Storage buffers shader module",
  code: /*wgsl*/ `
@@ -67,7 +67,7 @@ const Example: FC = () => {
  `,
  });
 
- const pipeline = gpu.createRenderPipeline({
+ const pipeline = await gpu.createRenderPipelineAsync({
  label: "Storage buffers render pipeline",
  layout: "auto",
  vertex: {

src/pages/textures-cpu-mips.tsx

@@ -11,7 +11,7 @@ import { WebGPUApp } from "~/utils/webgpu-app";
 import { ToOverlay } from "~/utils/overlay";
 import { type MipTexture, generateMips } from "~/utils/mips";
 import { type Vec3, mat4 } from "~/utils/math";
-import { frame, gpu, useGPU } from "~/webgpu/use-gpu";
+import { useGPU } from "~/webgpu/use-gpu";
 
 const Example: FC = () => {
  const context = useWebGPUContext();
@@ -21,7 +21,7 @@ const Example: FC = () => {
  const presentationFormat = usePresentationFormat();
 
  useGPU(
- ({ device }) => {
+ async ({ frame, gpu, device }) => {
  const shader = gpu.createShaderModule({
  label: "CPU Mips shader",
  code: /* wgsl */ `
@@ -65,7 +65,7 @@ const Example: FC = () => {
  `,
  });
 
- const pipeline = gpu.createRenderPipeline({
+ const pipeline = await gpu.createRenderPipelineAsync({
  label: "CPU Mips render pipeline",
  layout: "auto",
  vertex: {