master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgpu_rtt.html

<html lang="en">
  <head>
    <title>WebGPU RTT</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 - RTT<br/>(Chrome Canary with flag: --enable-unsafe-webgpu)
    </div>

    <script type="module">

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

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

      let camera, scene, renderer;

      let cameraFX, sceneFX, textureRenderer;

      let box;

      const dpr = window.devicePixelRatio;

      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 loader = new v3d.TextureLoader();
        const texture = loader.load('./textures/uv_grid_opengl.jpg');

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

        box = new v3d.Mesh(geometryBox, materialBox);
        scene.add(box);

        //

        renderer = new WebGPURenderer();
        renderer.setPixelRatio(dpr);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        textureRenderer = new WebGPUTextureRenderer(renderer);
        textureRenderer.setSize(window.innerWidth * dpr, window.innerHeight * dpr);

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

        // FX

        cameraFX = new v3d.OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
        sceneFX = new v3d.Scene();

        const geometryFX = new v3d.PlaneBufferGeometry(2, 2);

        // @TODO Until NodeMaterial is available just copy the beauty pass to screen

        const materialFX = new v3d.MeshBasicMaterial({ map: textureRenderer.getTexture() });

        const quad = new v3d.Mesh(geometryFX, materialFX);
        sceneFX.add(quad);

        //

        return renderer.init();

      }

      function onWindowResize() {

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

        renderer.setSize(window.innerWidth, window.innerHeight);
        textureRenderer.setSize(window.innerWidth * dpr, window.innerHeight * dpr);

      }

      function animate() {

        requestAnimationFrame(animate);

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

        textureRenderer.render(scene, camera);
        renderer.render(sceneFX, cameraFX);

      }

      function error(error) {

        console.error(error);

      }

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