wip: webgpu texture storage

src/renderer/src/state/StateController.tsx

@@ -106,12 +106,17 @@ export const StateController = (props: { children?: JSXElement }): JSXElement =>
       throw new Error(`could not get gpu adapter`);
     }
 
-    const device = await adapter.requestDevice();
+    const hasBgra = adapter.features.has(`bgra8unorm-storage`);
+    const device = await adapter.requestDevice({
+      requiredFeatures: hasBgra ? [`bgra8unorm-storage`] : []
+    });
     if (device == null) {
       throw new Error(`could not get gpu device`);
     }
 
-    const cf = navigator.gpu.getPreferredCanvasFormat();
+    const cf = hasBgra
+      ? navigator.gpu.getPreferredCanvasFormat()
+      : `rgba8unorm`;
 
     setState(`gpu`, `adapter`, adapter);
     setState(`gpu`, `device`, device);

src/renderer/src/tools/Paintbrush/Paintbrush.wgsl

@@ -12,6 +12,7 @@ struct VertexOutput {
 };
 
 @group(0) @binding(0) var<uniform> input: ShaderInput;
+@group(0) @binding(0) var canvasOutput: texture_storage_2d<rgba8unorm, read_write>;
 
 @vertex 
 fn vs(
@@ -37,7 +38,7 @@ fn vs(
 
 fn circle(uv: vec2f, radius: f32) -> f32 {
   return 1.0 - smoothstep(
-    1,
+    0.5,
     radius,
     dot(uv, uv)
   );

src/renderer/src/tools/Paintbrush/PaintbrushContext2d.tsx

@@ -5,7 +5,7 @@ import style from './PaintbrushOLD.module.css';
 import { state } from "@renderer/state/StateController";
 import { commitCanvasChange } from "@renderer/util/commitCanvasChange";
 
-class PaintbrushToolOld extends VincentBaseTool {
+class PaintbrushTool extends VincentBaseTool {
   drawing = false;
 
   selectionArea: ImageData | null = null;
@@ -250,4 +250,4 @@ class PaintbrushToolOld extends VincentBaseTool {
   }
 }
 
-export default new PaintbrushToolOld();
+export default new PaintbrushTool();

src/renderer/src/tools/index.ts

@@ -1,3 +1,3 @@
-export * as PaintbrushTool from './Paintbrush/Paintbrush';
+export * as PaintbrushTool from './Paintbrush/PaintbrushWebGPU';
 export * as Eraser from './Eraser/Eraser';
 export * as BrushSelect from './BrushSelect/BrushSelect';

src/renderer/src/ui/viewport/ViewPort.tsx

@@ -117,29 +117,32 @@ const ViewPort = (): JSXElement => {
 
 
     // webgpu test
+    const adapter = state.gpu.adapter as GPUAdapter;
+    const device = state.gpu.device as GPUDevice;
 
-    // const adapter = state.gpu.adapter as GPUAdapter;
-    // const device = state.gpu.device as GPUDevice;
+    console.debug(adapter, device, await adapter.requestAdapterInfo());
 
-    // console.debug(adapter, device, await adapter.requestAdapterInfo());
-
-    // const ctx = canvasElem.getContext(`webgpu`);
-    // if (ctx == null) {
-    //   throw new Error(`could not get context webgpu`);
-    // }
+    const ctx = canvasElem.getContext(`webgpu`);
+    if (ctx == null) {
+      throw new Error(`could not get context webgpu`);
+    }
 
-    // ctx.configure({
-    //   device,
-    //   format: state.gpu.canvasFormat!,
-    //   alphaMode: `premultiplied`
-    // });
+    ctx.configure({
+      device,
+      format: state.gpu.canvasFormat!,
+      alphaMode: `premultiplied`,
+      usage: 
+        GPUTextureUsage.TEXTURE_BINDING | 
+        GPUTextureUsage.STORAGE_BINDING |
+        GPUTextureUsage.RENDER_ATTACHMENT
+    });
 
     // initalize canvases with webgl
-    const ctx = canvasElem.getContext(`webgl2`);
-    const ctx2 = selectionCanvasElem.getContext(`webgl2`);
-    if (ctx == null || ctx2 == null) {
-      throw new Error(`could not get webgl context`);
-    }
+    // const ctx = canvasElem.getContext(`webgl2`);
+    // const ctx2 = selectionCanvasElem.getContext(`webgl2`);
+    // if (ctx == null || ctx2 == null) {
+    //   throw new Error(`could not get webgl context`);
+    // }
   });
 
   createEffect(() => {