master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgpu_sandbox.html

<html lang="en">
  <head>
    <title>WebGPU Sandbox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> WebGPU - sandbox<br/>(Chrome Canary with flag: --enable-unsafe-webgpu)
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { DDSLoader } from './jsm/loaders/DDSLoader.js';

      import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
      import WebGPU from './jsm/renderers/webgpu/WebGPU.js';

      let camera, scene, renderer;

      let box;

      init().then(animate).catch(error);

      async function init() {

        if (WebGPU.isAvailable() === false) {

          document.body.appendChild(WebGPU.getErrorMessage());

          throw 'No WebGPU support';

        }

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10);
        camera.position.z = 4;

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0x222222);

        // textured mesh

        const textureLoader = new v3d.TextureLoader();
        const texture = textureLoader.load('./textures/uv_grid_opengl.jpg');

        const geometryBox = new v3d.BoxBufferGeometry();
        const materialBox = new v3d.MeshBasicMaterial({ map: texture });

        box = new v3d.Mesh(geometryBox, materialBox);
        box.position.set(0, 1, 0);
        scene.add(box);

        // data texture

        const geometryPlane = new v3d.PlaneBufferGeometry();
        const materialPlane = new v3d.MeshBasicMaterial({ map: createDataTexture(), transparent: true, opacity: 0.5 });

        const plane = new v3d.Mesh(geometryPlane, materialPlane);
        plane.position.set(0, - 1, 0);
        scene.add(plane);

        // compressed texture

        const ddsLoader = new DDSLoader();
        const dxt5Texture = ddsLoader.load('./textures/compressed/explosion_dxt5_mip.dds');

        const materialCompressed = new v3d.MeshBasicMaterial({ map: dxt5Texture, transparent: true });

        const boxCompressed = new v3d.Mesh(geometryBox, materialCompressed);
        boxCompressed.position.set(- 2, 1, 0);
        scene.add(boxCompressed);

        // points

        const points = [];

        for (let i = 0; i < 1000; i++) {

          const point = new v3d.Vector3().random().subScalar(0.5);
          points.push(point);

        }

        const geometryPoints = new v3d.BufferGeometry().setFromPoints(points);
        const materialPoints = new v3d.PointsMaterial();

        const pointCloud = new v3d.Points(geometryPoints, materialPoints);
        pointCloud.position.set(2, - 1, 0);
        scene.add(pointCloud);

        // lines

        const geometryLine = new v3d.BufferGeometry().setFromPoints([
          new v3d.Vector3(- 0.5, - 0.5, 0),
          new v3d.Vector3(0.5, - 0.5, 0),
          new v3d.Vector3(0.5, 0.5, 0),
          new v3d.Vector3(- 0.5, 0.5, 0)
        ]);
        const materialLine = new v3d.LineBasicMaterial();
        const line = new v3d.Line(geometryLine, materialLine);
        line.position.set(2, 1, 0);
        scene.add(line);

        //

        renderer = new WebGPURenderer({ extensions: ['texture-compression-bc'] });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', onWindowResize, false);

        return renderer.init();

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function animate() {

        requestAnimationFrame(animate);

        box.rotation.x += 0.01;
        box.rotation.y += 0.02;

        renderer.render(scene, camera);

      }

      function createDataTexture() {

        const color = new v3d.Color(0xff0000);

        const width = 512;
        const height = 512;

        const size = width * height;
        const data = new Uint8Array(4 * size);

        const r = Math.floor(color.r * 255);
        const g = Math.floor(color.g * 255);
        const b = Math.floor(color.b * 255);

        for (let i = 0; i < size; i++) {

          const stride = i * 4;

          data[stride] = r;
          data[stride + 1] = g;
          data[stride + 2] = b;
          data[stride + 3] = 255;

        }

        return new v3d.DataTexture(data, width, height, v3d.RGBAFormat);

      }

      function error(error) {

        console.error(error);

      }

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