master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_postprocessing_fxaa.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D WebGL  - postprocessing - FXAA</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: 80px;
        width: 100%;
        bottom: 0px;
      }
    </style>
  </head>

  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - postprocessing - FXAA<br />
      Left scene processed with FXAA, right scene is rendered without anti-aliasing.
    </div>
    <div id="container">
    </div>

    <script type="module">

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

      import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
      import { RenderPass } from './jsm/postprocessing/RenderPass.js';
      import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
      import { CopyShader } from './jsm/shaders/CopyShader.js';
      import { FXAAShader } from './jsm/shaders/FXAAShader.js';

      let camera, scene, renderer, clock, group, container;

      let composer1, composer2, fxaaPass;

      init();
      animate();

      function init() {

        container = document.getElementById('container');

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

        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, 0x444444);
        hemiLight.position.set(0, 1000, 0);
        scene.add(hemiLight);

        const dirLight = new v3d.DirectionalLight(0xffffff, 0.8);
        dirLight.position.set(- 3000, 1000, - 1000);
        scene.add(dirLight);

        //

        group = new v3d.Group();

        const geometry = new v3d.TetrahedronBufferGeometry(10);
        const material = new v3d.MeshStandardMaterial({ color: 0xee0808, flatShading: true });

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

          const mesh = new v3d.Mesh(geometry, material);

          mesh.position.x = Math.random() * 500 - 250;
          mesh.position.y = Math.random() * 500 - 250;
          mesh.position.z = Math.random() * 500 - 250;

          mesh.scale.setScalar(Math.random() * 2 + 1);

          mesh.rotation.x = Math.random() * Math.PI;
          mesh.rotation.y = Math.random() * Math.PI;
          mesh.rotation.z = Math.random() * Math.PI;

          group.add(mesh);

        }

        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 renderPass = new RenderPass(scene, camera);

        //

        fxaaPass = new ShaderPass(FXAAShader);

        const pixelRatio = renderer.getPixelRatio();

        fxaaPass.material.uniforms['resolution'].value.x = 1 / (container.offsetWidth * pixelRatio);
        fxaaPass.material.uniforms['resolution'].value.y = 1 / (container.offsetHeight * pixelRatio);

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

        //

        const copyPass = new ShaderPass(CopyShader);

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

        //

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

      }

      function onWindowResize() {

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

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

        const pixelRatio = renderer.getPixelRatio();

        fxaaPass.material.uniforms['resolution'].value.x = 1 / (container.offsetWidth * pixelRatio);
        fxaaPass.material.uniforms['resolution'].value.y = 1 / (container.offsetHeight * pixelRatio);

      }

      function animate() {

        requestAnimationFrame(animate);

        const halfWidth = container.offsetWidth / 2;

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

        renderer.setViewport(0, 0, halfWidth, container.offsetHeight);

        composer1.render();

        renderer.setViewport(halfWidth, 0, halfWidth, container.offsetHeight);

        composer2.render();

      }

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