WebGPU

<!doctype html>
<meta charset="utf-8">
<title>WebGPU · ejemplo mínimo</title>
<!-- Cómputo en la GPU: duplica ocho números con un shader WGSL y lee el resultado. -->
<pre id="out">…</pre>
<script type="module">
const out = document.querySelector('#out');

if (!navigator.gpu) throw (out.textContent = 'WebGPU no está disponible en este navegador.');
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) throw (out.textContent = 'No hay un adaptador de GPU utilizable.');
const device = await adapter.requestDevice();
device.lost.then((info) => console.warn('GPU perdida:', info.reason, info.message));

const input = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]);
const storage = device.createBuffer({
  size: input.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(storage, 0, input);
const readback = device.createBuffer({
  size: input.byteLength,
  usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
});

const module = device.createShaderModule({ code: /* wgsl */ `
  @group(0) @binding(0) var<storage, read_write> data: array<f32>;
  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) id: vec3u) {
    if (id.x < arrayLength(&data)) { data[id.x] = data[id.x] * 2.0; }
  }` });
const pipeline = device.createComputePipeline({ layout: 'auto', compute: { module, entryPoint: 'main' } });
const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{ binding: 0, resource: { buffer: storage } }],
});

const encoder = device.createCommandEncoder();
const pass = encoder.beginComputePass();
pass.setPipeline(pipeline);
pass.setBindGroup(0, bindGroup);
pass.dispatchWorkgroups(Math.ceil(input.length / 64));
pass.end();
encoder.copyBufferToBuffer(storage, 0, readback, 0, input.byteLength);
device.queue.submit([encoder.finish()]);

await readback.mapAsync(GPUMapMode.READ);
const result = new Float32Array(readback.getMappedRange().slice(0)); // copia antes de unmap()
readback.unmap();
out.textContent = `[${input}] → [${result}]`;
</script>