diff react_games/src/current.tsx @ 37:fb9bcd3145cb

[ReactGames] Few games I made using react just to practice few things.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:22:47 -0800
parents
children 0cfd7d9277b0
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/react_games/src/current.tsx	Mon Dec 01 20:22:47 2025 -0800
@@ -0,0 +1,60 @@
+import ReactDOM from "react-dom/client";
+
+const shaders = `
+struct VertexOut {
+  @builtin(position) position : vec4f,
+  @location(0) color : vec4f
+}
+
+@vertex
+fn vertex_main(@location(0) position: vec4f,
+               @location(1) color: vec4f) -> VertexOut
+{
+  var output : VertexOut;
+  output.position = position;
+  output.color = color;
+  return output;
+}
+
+@fragment
+fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
+{
+  return fragData.color;
+}
+`;
+
+async function init() {
+  if (!navigator.gpu) {
+    throw Error("WebGPU not supported.");
+  }
+
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    throw Error("Couldn't request WebGPU adapter.");
+  }
+
+  const device = await adapter.requestDevice();
+
+  const shaderModule = device.createShaderModule({
+    code: shaders,
+  });
+
+  const canvas = document.querySelector("#gpuCanvas");
+  const context = canvas.getContext("webgpu");
+  
+  context.configure({
+    device,
+    format: navigator.gpu.getPreferredCanvasFormat(),
+    alphaMode: "premultiplied",
+  });
+
+  console.log(device)
+}
+
+void init();
+
+const Current = () => {
+  return (<>hello </>);
+};
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<Current />);