master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_displacementmap.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - materials - displacement map</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> - (normal + ao + displacement + environment) map demo.<br />
      ninja head from <a href="https://gpuopen.com/archive/gamescgi/amd-gpu-meshmapper/" target="_blank" rel="noopener">AMD GPU MeshMapper</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 { OBJLoader } from './jsm/loaders/OBJLoader.js';
      let stats;

      let camera, scene, renderer, controls;
      const settings = {
        metalness: 1.0,
        roughness: 0.4,
        ambientIntensity: 0.2,
        aoMapIntensity: 1.0,
        envMapIntensity: 1.0,
        displacementScale: 2.436143, // from original model
        normalScale: 1.0
      };

      let mesh, material;

      let pointLight, ambientLight;

      const height = 500; // of camera frustum

      let r = 0.0;

      init();
      animate();
      initGui();

      // Init gui
      function initGui() {

        const gui = new GUI();
        //let gui = gui.addFolder("Material");
        gui.add(settings, "metalness").min(0).max(1).onChange(function(value) {

          material.metalness = value;

        });

        gui.add(settings, "roughness").min(0).max(1).onChange(function(value) {

          material.roughness = value;

        });

        gui.add(settings, "aoMapIntensity").min(0).max(1).onChange(function(value) {

          material.aoMapIntensity = value;

        });

        gui.add(settings, "ambientIntensity").min(0).max(1).onChange(function(value) {

          ambientLight.intensity = value;

        });

        gui.add(settings, "envMapIntensity").min(0).max(3).onChange(function(value) {

          material.envMapIntensity = value;

        });

        gui.add(settings, "displacementScale").min(0).max(3.0).onChange(function(value) {

          material.displacementScale = value;

        });

        gui.add(settings, "normalScale").min(- 1).max(1).onChange(function(value) {

          material.normalScale.set(1, - 1).multiplyScalar(value);

        });

      }

      function init() {

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

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        renderer.outputEncoding = v3d.sRGBEncoding;

        //

        scene = new v3d.Scene();

        const aspect = window.innerWidth / window.innerHeight;
        camera = new v3d.OrthographicCamera(- height * aspect, height * aspect, height, - height, 1, 10000);
        camera.position.z = 1500;
        scene.add(camera);

        controls = new OrbitControls(camera, renderer.domElement);
        controls.enableZoom = false;
        controls.enableDamping = true;

        // lights

        ambientLight = new v3d.AmbientLight(0xffffff, settings.ambientIntensity);
        scene.add(ambientLight);

        pointLight = new v3d.PointLight(0xff0000, 0.5);
        pointLight.position.z = 2500;
        scene.add(pointLight);

        const pointLight2 = new v3d.PointLight(0xff6666, 1);
        camera.add(pointLight2);

        const pointLight3 = new v3d.PointLight(0x0000ff, 0.5);
        pointLight3.position.x = - 1000;
        pointLight3.position.z = 1000;
        scene.add(pointLight3);

        // env map

        const path = "textures/cube/SwedishRoyalCastle/";
        const format = '.jpg';
        const urls = [
          path + 'px' + format, path + 'nx' + format,
          path + 'py' + format, path + 'ny' + format,
          path + 'pz' + format, path + 'nz' + format
        ];

        const reflectionCube = new v3d.CubeTextureLoader().load(urls);
        reflectionCube.encoding = v3d.sRGBEncoding;

        // textures

        const textureLoader = new v3d.TextureLoader();
        const normalMap = textureLoader.load("models/obj/ninja/normal.png");
        const aoMap = textureLoader.load("models/obj/ninja/ao.jpg");
        const displacementMap = textureLoader.load("models/obj/ninja/displacement.jpg");

        // material

        material = new v3d.MeshStandardMaterial({

          color: 0x888888,
          roughness: settings.roughness,
          metalness: settings.metalness,

          normalMap: normalMap,
          normalScale: new v3d.Vector2(1, - 1), // why does the normal map require negation in this case?

          aoMap: aoMap,
          aoMapIntensity: 1,

          displacementMap: displacementMap,
          displacementScale: settings.displacementScale,
          displacementBias: - 0.428408, // from original model

          envMap: reflectionCube,
          envMapIntensity: settings.envMapIntensity,

          side: v3d.DoubleSide

        });

        //

        const loader = new OBJLoader();
        loader.load("models/obj/ninja/ninjaHead_Low.obj", function(group) {

          const geometry = group.children[0].geometry;
          geometry.attributes.uv2 = geometry.attributes.uv;
          geometry.center();

          mesh = new v3d.Mesh(geometry, material);
          mesh.scale.multiplyScalar(25);
          scene.add(mesh);

        });

        //

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

        //

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

      }

      function onWindowResize() {

        const aspect = window.innerWidth / window.innerHeight;

        camera.left = - height * aspect;
        camera.right = height * aspect;
        camera.top = height;
        camera.bottom = - height;

        camera.updateProjectionMatrix();

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

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        controls.update();

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

      }

      function render() {

        pointLight.position.x = 2500 * Math.cos(r);
        pointLight.position.z = 2500 * Math.sin(r);

        r += 0.01;

        renderer.render(scene, camera);

      }

    </script>

  </body>

</html>