master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_envmaps_hdr.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>threejs webgl - materials - hdr environment mapping</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> - High dynamic range (RGBE) Image-based Lighting (IBL)<br />using run-time generated pre-filtered roughness mipmaps (PMREM)<br/>
      Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</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 { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';

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

      let container, stats;
      let camera, scene, renderer, controls;
      let torusMesh, planeMesh;
      let generatedCubeRenderTarget, ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
      let ldrCubeMap, hdrCubeMap, rgbmCubeMap;

      init();
      animate();

      function getEnvScene() {

        const envScene = new v3d.Scene();

        const geometry = new v3d.BoxBufferGeometry();
        geometry.deleteAttribute('uv');
        const roomMaterial = new v3d.MeshStandardMaterial({ metalness: 0, side: v3d.BackSide });
        const room = new v3d.Mesh(geometry, roomMaterial);
        room.scale.setScalar(10);
        envScene.add(room);

        const mainLight = new v3d.PointLight(0xffffff, 50, 0, 2);
        envScene.add(mainLight);

        const lightMaterial = new v3d.MeshLambertMaterial({ color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 });

        const light1 = new v3d.Mesh(geometry, lightMaterial);
        light1.material.color.setHex(0xff0000);
        light1.position.set(- 5, 2, 0);
        light1.scale.set(0.1, 1, 1);
        envScene.add(light1);

        const light2 = new v3d.Mesh(geometry, lightMaterial.clone());
        light2.material.color.setHex(0x00ff00);
        light2.position.set(0, 5, 0);
        light2.scale.set(1, 0.1, 1);
        envScene.add(light2);

        const light3 = new v3d.Mesh(geometry, lightMaterial.clone());
        light3.material.color.setHex(0x0000ff);
        light3.position.set(2, 1, 5);
        light3.scale.set(1.5, 2, 0.1);
        envScene.add(light3);

        return envScene;

      }

      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();
        scene.background = new v3d.Color(0x000000);

        renderer = new v3d.WebGLRenderer();
        renderer.physicallyCorrectLights = true;
        renderer.toneMapping = v3d.ACESFilmicToneMapping;

        //

        let geometry = new v3d.TorusKnotBufferGeometry(18, 8, 150, 20);
        // let geometry = new v3d.SphereBufferGeometry(26, 64, 32);
        let material = new v3d.MeshStandardMaterial({
          color: 0xffffff,
          metalness: params.metalness,
          roughness: params.roughness
        });

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

        };

        const hdrUrls = ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'];
        hdrCubeMap = new HDRCubeTextureLoader()
          .setPath('./textures/cube/pisaHDR/')
          .setDataType(v3d.UnsignedByteType)
          .load(hdrUrls, function() {

            hdrCubeRenderTarget = pmremGenerator.fromCubemap(hdrCubeMap);

            hdrCubeMap.magFilter = v3d.LinearFilter;
            hdrCubeMap.needsUpdate = true;

          });

        const ldrUrls = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
        ldrCubeMap = new v3d.CubeTextureLoader()
          .setPath('./textures/cube/pisa/')
          .load(ldrUrls, function() {

            ldrCubeMap.encoding = v3d.sRGBEncoding;

            ldrCubeRenderTarget = pmremGenerator.fromCubemap(ldrCubeMap);

          });


        const rgbmUrls = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
        rgbmCubeMap = new v3d.CubeTextureLoader()
          .setPath('./textures/cube/pisaRGBM16/')
          .load(rgbmUrls, function() {

            rgbmCubeMap.encoding = v3d.RGBM16Encoding;
            rgbmCubeMap.format = v3d.RGBAFormat;

            rgbmCubeRenderTarget = pmremGenerator.fromCubemap(rgbmCubeMap);

            rgbmCubeMap.magFilter = v3d.LinearFilter;
            rgbmCubeMap.needsUpdate = true;

          });

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

        const envScene = getEnvScene();
        generatedCubeRenderTarget = pmremGenerator.fromScene(envScene, 0.04);

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

        //renderer.toneMapping = ReinhardToneMapping;
        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', ['Generated', 'LDR', 'HDR', 'RGBM16']);
        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 renderTarget, cubeMap;

        switch (params.envMap) {

          case 'Generated':
            renderTarget = generatedCubeRenderTarget;
            cubeMap = generatedCubeRenderTarget.texture;
            break;
          case 'LDR':
            renderTarget = ldrCubeRenderTarget;
            cubeMap = ldrCubeMap;
            break;
          case 'HDR':
            renderTarget = hdrCubeRenderTarget;
            cubeMap = hdrCubeMap;
            break;
          case 'RGBM16':
            renderTarget = rgbmCubeRenderTarget;
            cubeMap = rgbmCubeMap;
            break;

        }

        const newEnvMap = renderTarget ? renderTarget.texture : null;

        if (newEnvMap && 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 = cubeMap;
        renderer.toneMappingExposure = params.exposure;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>