master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_postprocessing_masking.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - postprocessing - masking</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="container"></div>

    <script type="module">

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

      import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
      import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
      import { TexturePass } from './jsm/postprocessing/TexturePass.js';
      import { ClearPass } from './jsm/postprocessing/ClearPass.js';
      import { MaskPass, ClearMaskPass } from './jsm/postprocessing/MaskPass.js';
      import { CopyShader } from './jsm/shaders/CopyShader.js';

      let camera, composer, renderer;
      let box, torus;

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 10;

        const scene1 = new v3d.Scene();
        const scene2 = new v3d.Scene();

        box = new v3d.Mesh(new v3d.BoxBufferGeometry(4, 4, 4));
        scene1.add(box);

        torus = new v3d.Mesh(new v3d.TorusBufferGeometry(3, 1, 16, 32));
        scene2.add(torus);

        renderer = new v3d.WebGLRenderer();
        renderer.setClearColor(0xe0e0e0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.autoClear = false;
        document.body.appendChild(renderer.domElement);

        //

        const clearPass = new ClearPass();

        const clearMaskPass = new ClearMaskPass();

        const maskPass1 = new MaskPass(scene1, camera);
        const maskPass2 = new MaskPass(scene2, camera);

        const texture1 = new v3d.TextureLoader().load('textures/758px-Canestra_di_frutta_(Caravaggio).jpg');
        texture1.minFilter = v3d.LinearFilter;
        const texture2 = new v3d.TextureLoader().load('textures/2294472375_24a3b8ef46_o.jpg');

        const texturePass1 = new TexturePass(texture1);
        const texturePass2 = new TexturePass(texture2);

        const outputPass = new ShaderPass(CopyShader);

        const parameters = {
          minFilter: v3d.LinearFilter,
          magFilter: v3d.LinearFilter,
          format: v3d.RGBFormat,
          stencilBuffer: true
        };

        const renderTarget = new v3d.WebGLRenderTarget(window.innerWidth, window.innerHeight, parameters);

        composer = new EffectComposer(renderer, renderTarget);
        composer.addPass(clearPass);
        composer.addPass(maskPass1);
        composer.addPass(texturePass1);
        composer.addPass(clearMaskPass);
        composer.addPass(maskPass2);
        composer.addPass(texturePass2);
        composer.addPass(clearMaskPass);
        composer.addPass(outputPass);

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

      }

      function onWindowResize() {

        const width = window.innerWidth;
        const height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);
        composer.setSize(width, height);

      }

      function animate() {

        requestAnimationFrame(animate);

        const time = performance.now() * 0.001 + 6000;

        box.position.x = Math.cos(time / 1.5) * 2;
        box.position.y = Math.sin(time) * 2;
        box.rotation.x = time;
        box.rotation.y = time / 2;

        torus.position.x = Math.cos(time) * 2;
        torus.position.y = Math.sin(time / 1.5) * 2;
        torus.rotation.x = time;
        torus.rotation.y = time / 2;

        renderer.clear();
        composer.render(time);

      }

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