BaseWebGPU/web.html

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>BaseWebGPU</title>
  <style>
    body { width: 100vw; height: 100vh; overflow: hidden;}
    canvas { width: 100%; height: 100%; background-color: black;}
    body, canvas { margin: 0px; border: 0px; padding: 0px; };
  </style>
</head><body><script type='text/javascript'>
// =====================================
const canvas = document.createElement("canvas");
canvas.setAttribute("id", "canvas");
document.body.appendChild(canvas);
// =======================================
initWebGPU = async () => {
  // Check to ensure the user agent supports WebGPU
  if (!('gpu' in navigator)) {
    const msg = '⚠️ WebGPU is not available on this browser.';
    const pre = document.createElement('pre');
    pre.style.color = '#f00';
    pre.style.textAlign = 'center';
    pre.textContent = msg;
    document.body.appendChild(pre);
    console.error(msg);
    return false;
  }

  // Request an adapter
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.error('No WebGPU adapters found.');
    return false;
  }

  // Request a device
  const device  = await adapter.requestDevice();
  device.lost.then((info) => {
    console.error(`WebGPU device was lost: ${info.message}`);
    device = null;

    if (info.reason != 'destroyed') {
      initWebGPU();
    }
  });

  // Set WebGPU device in Module
  Module.preinitializedWebGPUDevice = device;
  return true;
}
initWebGPU();
</script>{{{ SCRIPT }}}<script>
Module.onRuntimeInitialized = () => { BaseWebGPU.init(); };
</script></body></html>