master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_postprocessing_smaa.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - postprocessing smaa</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 noreferrer">Verge3D</a> - post-processing SMAA
    </div>

    <div id="container"></div>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';

      import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
      import { RenderPass } from './jsm/postprocessing/RenderPass.js';
      import { SMAAPass } from './jsm/postprocessing/SMAAPass.js';

      let camera, scene, renderer, composer, stats;

      init();
      animate();

      function init() {

        const container = document.getElementById("container");

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

        stats = new Stats();
        container.appendChild(stats.dom);

        //

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

        scene = new v3d.Scene();

        const geometry = new v3d.BoxBufferGeometry(120, 120, 120);
        const material1 = new v3d.MeshBasicMaterial({ color: 0xffffff, wireframe: true });

        const mesh1 = new v3d.Mesh(geometry, material1);
        mesh1.position.x = - 100;
        scene.add(mesh1);

        const texture = new v3d.TextureLoader().load("textures/brick_diffuse.jpg");
        texture.anisotropy = 4;

        const material2 = new v3d.MeshBasicMaterial({ map: texture });

        const mesh2 = new v3d.Mesh(geometry, material2);
        mesh2.position.x = 100;
        scene.add(mesh2);

        // postprocessing

        composer = new EffectComposer(renderer);
        composer.addPass(new RenderPass(scene, camera));

        const pass = new SMAAPass(window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio());
        composer.addPass(pass);

        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);

        stats.begin();

        for (let i = 0; i < scene.children.length; i++) {

          const child = scene.children[i];

          child.rotation.x += 0.005;
          child.rotation.y += 0.01;

        }

        composer.render();

        stats.end();

      }

    </script>

  </body>
</html>