Mercurial

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
36:84672efec192 37:fb9bcd3145cb
1 import ReactDOM from "react-dom/client";
2
3 const shaders = `
4 struct VertexOut {
5 @builtin(position) position : vec4f,
6 @location(0) color : vec4f
7 }
8
9 @vertex
10 fn vertex_main(@location(0) position: vec4f,
11 @location(1) color: vec4f) -> VertexOut
12 {
13 var output : VertexOut;
14 output.position = position;
15 output.color = color;
16 return output;
17 }
18
19 @fragment
20 fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
21 {
22 return fragData.color;
23 }
24 `;
25
26 async function init() {
27 if (!navigator.gpu) {
28 throw Error("WebGPU not supported.");
29 }
30
31 const adapter = await navigator.gpu.requestAdapter();
32 if (!adapter) {
33 throw Error("Couldn't request WebGPU adapter.");
34 }
35
36 const device = await adapter.requestDevice();
37
38 const shaderModule = device.createShaderModule({
39 code: shaders,
40 });
41
42 const canvas = document.querySelector("#gpuCanvas");
43 const context = canvas.getContext("webgpu");
44
45 context.configure({
46 device,
47 format: navigator.gpu.getPreferredCanvasFormat(),
48 alphaMode: "premultiplied",
49 });
50
51 console.log(device)
52 }
53
54 void init();
55
56 const Current = () => {
57 return (<>hello </>);
58 };
59
60 ReactDOM.createRoot(document.getElementById("root")!).render(<Current />);