master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_postprocessing_3dlut.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - 3d luts</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> - 3D LUTs<br />
      Battle Damaged Sci-fi Helmet by
      <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
      <a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a><br />
      LUTs from <a href="https://www.rocketstock.com/free-after-effects-templates/35-free-luts-for-color-grading-videos/">RocketStock</a>
    </div>

    <script type="module">
      import * as v3d from '../build/v3d.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
      import { RGBELoader } from './jsm/loaders/RGBELoader.js';
      import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
      import { RenderPass } from './jsm/postprocessing/RenderPass.js';
      import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
      import { LUTPass } from './jsm/postprocessing/LUTPass.js';
      import { LUTCubeLoader } from './jsm/loaders/LUTCubeLoader.js';
      import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
      import { GUI } from './jsm/libs/dat.gui.module.js';

      const params = {
        enabled: true,
        lut: 'Bourbon 64.CUBE',
        intensity: 1,
        use2dLut: false,
      };

      const lutMap = {
        'Bourbon 64.CUBE': null,
        'Chemical 168.CUBE': null,
        'Clayton 33.CUBE': null,
        'Cubicle 99.CUBE': null,
        'Remy 24.CUBE': null,
      };

      let gui;
      let camera, scene, renderer;
      let composer, lutPass;

      init();
      render();

      function init() {

        const container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(- 1.8, 0.6, 2.7);

        scene = new v3d.Scene();

        new RGBELoader()
          .setDataType(v3d.UnsignedByteType)
          .setPath('textures/equirectangular/')
          .load('royal_esplanade_1k.hdr', function(texture) {

            const envMap = pmremGenerator.fromEquirectangular(texture).texture;

            scene.background = envMap;
            scene.environment = envMap;

            texture.dispose();
            pmremGenerator.dispose();

            // model

            const loader = new GLTFLoader().setPath('models/gltf/DamagedHelmet/glTF/');
            loader.load('DamagedHelmet.gltf', function(gltf) {

              scene.add(gltf.scene);

            });

          });

        Object.keys(lutMap).forEach(name => {

          new LUTCubeLoader()
            .load('luts/' + name, function(result) {

              lutMap[name] = result;

            });

        });

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = v3d.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        container.appendChild(renderer.domElement);

        const target = new v3d.WebGLRenderTarget({
          minFilter: v3d.LinearFilter,
          magFilter: v3d.LinearFilter,
          format: v3d.RGBAFormat,
          encoding: v3d.sRGBEncoding
        });

        composer = new EffectComposer(renderer, target);
        composer.setPixelRatio(window.devicePixelRatio);
        composer.setSize(window.innerWidth, window.innerHeight);
        composer.addPass(new RenderPass(scene, camera));
        composer.addPass(new ShaderPass(GammaCorrectionShader));

        lutPass = new LUTPass();
        composer.addPass(lutPass);

        const pmremGenerator = new v3d.PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularShader();

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 2;
        controls.maxDistance = 10;
        controls.target.set(0, 0, - 0.2);
        controls.update();

        gui = new GUI();
        gui.width = 350;
        gui.add(params, 'enabled');
        gui.add(params, 'lut', Object.keys(lutMap));
        gui.add(params, 'intensity').min(0).max(1);

        if (renderer.capabilities.isWebGL2) {

          gui.add(params, 'use2dLut');

        } else {

          params.use2DLut = true;

        }

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

      }

      function onWindowResize() {

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

        renderer.setSize(window.innerWidth, window.innerHeight);
        composer.setSize(window.innerWidth, window.innerHeight);

        render();

      }

      //

      function render() {

        requestAnimationFrame(render);

        lutPass.enabled = params.enabled && Boolean(lutMap[params.lut]);
        lutPass.intensity = params.intensity;
        if (lutMap[params.lut]) {

          const lut = lutMap[params.lut];
          lutPass.lut = params.use2DLut ? lut.texture : lut.texture3D;

        }

        composer.render();

      }

    </script>

  </body>
</html>