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