master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_envmaps_exr.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>threejs webgl - materials - equirectangular exr image based lighting</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>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">threejs</a> - Example of an IBL (Image based lighting) pipeline based around<br> equirectangular EXR lightprobe data. Created by <a href="https://github.com/richardmonette" target="_blank" rel="noopener">Richard Monette</a></div>

    <script type="module">

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

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

      import { GUI } from './jsm/libs/dat.gui.module.js';
      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { EXRLoader } from './jsm/loaders/EXRLoader.js';

      const params = {
        envMap: 'EXR',
        roughness: 0.0,
        metalness: 0.0,
        exposure: 1.0,
        debug: false,
      };

      let container, stats;
      let camera, scene, renderer, controls;
      let torusMesh, planeMesh;
      let pngCubeRenderTarget, exrCubeRenderTarget;
      let pngBackground, exrBackground;

      init();
      animate();

      function init() {

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

        camera = new v3d.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 0, 120);

        scene = new v3d.Scene();

        renderer = new v3d.WebGLRenderer();

        //

        let geometry = new v3d.TorusKnotBufferGeometry(18, 8, 150, 20);
        let material = new v3d.MeshStandardMaterial({
          metalness: params.roughness,
          roughness: params.metalness,
          envMapIntensity: 1.0
        });

        torusMesh = new v3d.Mesh(geometry, material);
        scene.add(torusMesh);

        geometry = new v3d.PlaneBufferGeometry(200, 200);
        material = new v3d.MeshBasicMaterial();

        planeMesh = new v3d.Mesh(geometry, material);
        planeMesh.position.y = - 50;
        planeMesh.rotation.x = - Math.PI * 0.5;
        scene.add(planeMesh);

        v3d.DefaultLoadingManager.onLoad = function() {

          pmremGenerator.dispose();

        };

        new EXRLoader()
          .setDataType(v3d.UnsignedByteType)
          .load('textures/piz_compressed.exr', function(texture) {

            exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
            exrBackground = exrCubeRenderTarget.texture;

            texture.dispose();

          });

        new v3d.TextureLoader().load('textures/equirectangular.png', function(texture) {

          texture.encoding = v3d.sRGBEncoding;

          pngCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);

          pngBackground = pngCubeRenderTarget.texture;

          texture.dispose();

        });

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

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        container.appendChild(renderer.domElement);

        renderer.toneMapping = v3d.ACESFilmicToneMapping;
        renderer.outputEncoding = v3d.sRGBEncoding;

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

        controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 50;
        controls.maxDistance = 300;

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

        const gui = new GUI();

        gui.add(params, 'envMap', ['EXR', 'PNG']);
        gui.add(params, 'roughness', 0, 1, 0.01);
        gui.add(params, 'metalness', 0, 1, 0.01);
        gui.add(params, 'exposure', 0, 2, 0.01);
        gui.add(params, 'debug', false);
        gui.open();

      }

      function onWindowResize() {

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

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

        renderer.setSize(width, height);

      }

      function animate() {

        requestAnimationFrame(animate);

        stats.begin();
        render();
        stats.end();

      }

      function render() {

        torusMesh.material.roughness = params.roughness;
        torusMesh.material.metalness = params.metalness;

        let newEnvMap = torusMesh.material.envMap;
        let background = scene.background;

        switch (params.envMap) {

          case 'EXR':
            newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
            background = exrBackground;
            break;
          case 'PNG':
            newEnvMap = pngCubeRenderTarget ? pngCubeRenderTarget.texture : null;
            background = pngBackground;
            break;

        }

        if (newEnvMap !== torusMesh.material.envMap) {

          torusMesh.material.envMap = newEnvMap;
          torusMesh.material.needsUpdate = true;

          planeMesh.material.map = newEnvMap;
          planeMesh.material.needsUpdate = true;

        }

        torusMesh.rotation.y += 0.005;
        planeMesh.visible = params.debug;

        scene.background = background;
        renderer.toneMappingExposure = params.exposure;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>