generated from hchiam/learning-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (90 loc) · 3.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGPU Life</title>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script type="module">
// type="module" enables top-level await
const canUseWebGPU = navigator.gpu;
if (!canUseWebGPU) {
throw new Error("WebGPU not supported on this browser.");
}
const adapter = await navigator.gpu.requestAdapter(); // "low-power" or "high-performance" - https://gpuweb.github.io/gpuweb/#adapter-selection
if (!adapter) {
throw new Error("No appropriate GPUAdapter found.");
}
const device = await adapter.requestDevice(); // options: https://gpuweb.github.io/gpuweb/#gpudevicedescriptor
const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: canvasFormat,
});
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
colorAttachments: [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
clearValue: { r: 0, g: 0, b: 0.4, a: 1 }, // New line
storeOp: "store",
},
],
});
pass.end();
const commandBuffer = encoder.finish(); // finish command buffer
device.queue.submit([commandBuffer]); // submit command buffer
const vertices = new Float32Array([
// (x,y), (x,y), (x,y), (x,y),...
-0.8,
-0.8, // Triangle 1 (Blue)
0.8,
-0.8,
0.8,
0.8,
-0.8,
-0.8, // Triangle 2 (Red)
0.8,
0.8,
-0.8,
0.8,
]); // consider Index Buffers for more complex geometry
const vertexBuffer = device.createBuffer({
label: "Cell vertices", // label is helpful for error messages
size: vertices.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
// GPUBufferUsage.VERTEX = buffer to be used for vertex data
// GPUBufferUsage.COPY_DST = able to copy data into buffer
});
device.queue.writeBuffer(vertexBuffer, /*bufferOffset=*/ 0, vertices);
const vertexBufferLayout = {
arrayStride: 8, // stride to get to next pair of coordinates (32 bits * 2 = 64 bits = 8 bytes)
attributes: [
{
format: "float32x2",
offset: 0, // start offset, before next stride
shaderLocation: 0, // 0-15
// Position, see vertex shader
// other options for colour, direction, etc.
},
],
};
const cellShaderModule = device.createShaderModule({
label: "Cell shader",
// Your WGSL shader code will go here:
code: `
@vertex
fn vertexMain(@location(0) pos: vec2f) ->
@builtin(position) vec4f {
return vec4f(pos, 0, 1);
}
`,
});
// continue at: https://codelabs.developers.google.com/your-first-webgpu-app#3
</script>
</body>
</html>