three_box.html

<html>
  <head>
    <title>Three.js WebGPU Renderer Box</title>
    <style>
      body {
        margin: 0;
        background-color: #000;
        color: #fff;
        overscroll-behavior: none;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import {
        BoxBufferGeometry,
        Camera,
        Mesh,
        MeshNormalMaterial,
        PerspectiveCamera,
        Scene
      } from 'https://raw.githack.com/mrdoob/three.js/r111/build/three.module.js';
      import WebGPURenderer from './js/webgpu_renderer.js';

      // @TODO: Detect WebGPU capability

      const run = () => {
        const renderer = new WebGPURenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        const scene = new Scene();

        const camera = new PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000.0);
        camera.position.y = 0.5;

        const box = new Mesh(
          new BoxBufferGeometry(2, 2, 2),
          new MeshNormalMaterial()
        );
        box.position.z = -4;
        box.rotation.x = 45 * Math.PI / 180;
        scene.add(box);

        const render = () => {
          requestAnimationFrame(render);
          box.rotation.y += 0.01;
          renderer.render(scene, camera);
        };

        const onResize = event => {
          renderer.setSize(window.innerWidth, window.innerHeight);
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        };

        window.addEventListener('resize', onResize, false);

        render();
      };

      run();
    </script>
  </body>
</html>