webgl2_multisampled_renderbuffers.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D WebGL 2 - Multisampled Renderbuffers</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">
    <style>
      body {
        background-color: #fff;
        color: #222;
      }

      a {
        color: #08f;
      }

      #container {
        position: absolute;
        top: 70px;
        width: 100%;
        bottom: 0px;
      }
    </style>
  </head>

  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - Multisampled Renderbuffers<br />
      Left: WebGLRenderTarget, Right: WebGLMultisampleRenderTarget.
    </div>
    <div id="container">
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
      {
        "imports": {
          "v3d": "../build/v3d.module.js",
          "v3d/addons/": "./jsm/"
        }
      }
    </script>

    <script type="module">

      import * as v3d from 'v3d';

      import { EffectComposer } from 'v3d/addons/postprocessing/EffectComposer.js';
      import { RenderPass } from 'v3d/addons/postprocessing/RenderPass.js';
      import { ShaderPass } from 'v3d/addons/postprocessing/ShaderPass.js';
      import { CopyShader } from 'v3d/addons/shaders/CopyShader.js';
      import WebGL from 'v3d/addons/capabilities/WebGL.js';

      let camera, renderer, clock, group, container;

      let composer1, composer2;

      init();

      function init() {

        if (WebGL.isWebGL2Available() === false) {

          document.body.appendChild(WebGL.getWebGL2ErrorMessage());
          return;

        }

        container = document.getElementById('container');

        camera = new v3d.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 1, 2000);
        camera.position.z = 500;

        const scene = new v3d.Scene();
        scene.background = new v3d.Color(0xffffff);
        scene.fog = new v3d.Fog(0xcccccc, 100, 1500);

        clock = new v3d.Clock();

        //

        const hemiLight = new v3d.HemisphereLight(0xffffff, 0x222222, 1.5);
        hemiLight.position.set(1, 1, 1);
        scene.add(hemiLight);

        //

        group = new v3d.Group();

        const geometry = new v3d.SphereGeometry(10, 64, 40);
        const material = new v3d.MeshLambertMaterial({ color: 0xee0808 });
        const material2 = new v3d.MeshBasicMaterial({ color: 0xffffff, wireframe: true });

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

          const mesh = new v3d.Mesh(geometry, material);
          mesh.position.x = Math.random() * 600 - 300;
          mesh.position.y = Math.random() * 600 - 300;
          mesh.position.z = Math.random() * 600 - 300;
          mesh.rotation.x = Math.random();
          mesh.rotation.z = Math.random();
          mesh.scale.setScalar(Math.random() * 5 + 5);
          group.add(mesh);

          const mesh2 = new v3d.Mesh(geometry, material2);
          mesh2.position.copy(mesh.position);
          mesh2.rotation.copy(mesh.rotation);
          mesh2.scale.copy(mesh.scale);
          group.add(mesh2);

        }

        scene.add(group);

        //

        renderer = new v3d.WebGLRenderer();
        renderer.autoClear = false;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(container.offsetWidth, container.offsetHeight);
        container.appendChild(renderer.domElement);

        //

        const size = renderer.getDrawingBufferSize(new v3d.Vector2());
        const renderTarget = new v3d.WebGLRenderTarget(size.width, size.height, { samples: 4 });

        const renderPass = new RenderPass(scene, camera);
        const copyPass = new ShaderPass(CopyShader);

        //

        composer1 = new EffectComposer(renderer);
        composer1.addPass(renderPass);
        composer1.addPass(copyPass);

        //

        composer2 = new EffectComposer(renderer, renderTarget);
        composer2.addPass(renderPass);
        composer2.addPass(copyPass);

        //

        window.addEventListener('resize', onWindowResize);

        animate();

      }

      function onWindowResize() {

        camera.aspect = container.offsetWidth / container.offsetHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(container.offsetWidth, container.offsetHeight);
        composer1.setSize(container.offsetWidth, container.offsetHeight);
        composer2.setSize(container.offsetWidth, container.offsetHeight);

      }

      function animate() {

        requestAnimationFrame(animate);

        const halfWidth = container.offsetWidth / 2;

        group.rotation.y += clock.getDelta() * 0.1;

        renderer.setScissorTest(true);

        renderer.setScissor(0, 0, halfWidth - 1, container.offsetHeight);
        composer1.render();

        renderer.setScissor(halfWidth, 0, halfWidth, container.offsetHeight);
        composer2.render();

        renderer.setScissorTest(false);

      }

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