Mercurial
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 />);