Naloga 2: WIP Bezier curves

2024-11-17 19:09:01 +01:00
parent d825f4e090
commit 0671004a38
11 changed files with 301 additions and 1 deletions
--- a/vaja_1/index.html
+++ b/vaja_1/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Vaja 1</title>
+
+    <script type="module" src="main.js"></script>
+</head>
+<body>
+<canvas width="512" height="512"></canvas>
+</body>
+</html>
--- a/vaja_1/main.js
+++ b/vaja_1/main.js
@@ -0,0 +1,90 @@
+// Initialize WebGPU
+const adapter = await navigator.gpu.requestAdapter();
+const device = await adapter.requestDevice();
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('webgpu');
+
+const format = 'rgba8unorm';
+context.configure({ device, format });
+
+// Create shaders
+const code = await fetch('shader.wgsl').then((res) => res.text());
+const module = device.createShaderModule({ code });
+
+// Create vertex buffer layouts
+/** @type {GPUVertexBufferLayout} */
+const vertexBufferLayout = {
+    arrayStride: 32,
+    attributes: [
+        {
+            offset: 0,
+            format: 'float32x4',
+            shaderLocation: 0,
+        },
+        {
+            offset: 16,
+            format: 'float32x4',
+            shaderLocation: 1,
+        },
+    ],
+};
+
+// Create render pipeline
+const pipeline = device.createRenderPipeline({
+    vertex: {
+        module,
+        buffers: [vertexBufferLayout],
+    },
+    fragment: {
+        module,
+        targets: [{ format }],
+    },
+    layout: 'auto',
+});
+
+// Create vertex buffer
+const vertices = new Float32Array([
+    0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1,
+    1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1,
+]);
+
+const vertexBuffer = device.createBuffer({
+    size: vertices.byteLength,
+    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+});
+
+device.queue.writeBuffer(vertexBuffer, 0, vertices);
+
+const indices = new Uint32Array([0, 1, 2, 1, 2, 3]);
+
+const indexBuffer = device.createBuffer({
+    size: indices.byteLength,
+    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+});
+
+device.queue.writeBuffer(indexBuffer, 0, indices);
+
+// Create command encoder
+const commandEncoder = device.createCommandEncoder();
+
+// Encode render pass
+const renderPass = commandEncoder.beginRenderPass({
+    colorAttachments: [
+        {
+            view: context.getCurrentTexture().createView(),
+            loadOp: 'clear',
+            clearValue: [1, 1, 1, 1],
+            storeOp: 'store',
+        },
+    ],
+});
+renderPass.setPipeline(pipeline);
+renderPass.setVertexBuffer(0, vertexBuffer);
+renderPass.setIndexBuffer(indexBuffer, 'uint32');
+renderPass.drawIndexed(indices.length);
+renderPass.end();
+
+const commandBuffer = commandEncoder.finish();
+
+// Send commands to GPU
+device.queue.submit([commandBuffer]);
--- a/vaja_1/shader.wgsl
+++ b/vaja_1/shader.wgsl
@@ -0,0 +1,17 @@
+struct VertexOutput {
+    @builtin(position) position: vec4f,
+    @location(0) color: vec4f,
+}
+
+@vertex
+fn vertex(@location(0) position: vec4f, @location(1) color: vec4f) -> VertexOutput {
+    var output: VertexOutput;
+    output.position = position;
+    output.color = color;
+    return output;
+}
+
+@fragment
+fn fragment(@location(0) color: vec4f) -> @location(0) vec4f {
+    return color;
+}