master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_channels.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - materials - channels</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> - <span id="description">Normal, Depth, DepthRGBA, DepthRGBAUnpacked, Materials</span><br/>
      by <a href="https://Clara.io">Ben Houston</a>. 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 { OBJLoader } from './jsm/loaders/OBJLoader.js';
      import { OrbitControls } from './jsm/controls/OrbitControls.js';

      let stats;

      let camera, scene, renderer;

      const params = {
        material: 'normal',
        camera: 'perspective',
        side: 'double'
      };

      const sides = {
        'front': v3d.FrontSide,
        'back': v3d.BackSide,
        'double': v3d.DoubleSide
      };

      let cameraOrtho, cameraPerspective;
      let controlsOrtho, controlsPerspective;

      let mesh, materialStandard, materialDepthBasic, materialDepthRGBA, materialNormal;

      const SCALE = 2.436143; // from original model
      const BIAS = - 0.428408; // from original model

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

      // Init gui
      function initGui() {

        const gui = new GUI();
        gui.add(params, 'material', ['standard', 'normal', 'depthBasic', 'depthRGBA']);
        gui.add(params, 'camera', ['perspective', 'ortho']);
        gui.add(params, 'side', ['front', 'back', 'double']);

      }

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

        //

        scene = new v3d.Scene();

        const aspect = window.innerWidth / window.innerHeight;
        cameraPerspective = new v3d.PerspectiveCamera(45, aspect, 500, 3000);
        cameraPerspective.position.z = 1500;
        scene.add(cameraPerspective);

        const height = 500;
        cameraOrtho = new v3d.OrthographicCamera(- height * aspect, height * aspect, height, - height, 1000, 2500);
        cameraOrtho.position.z = 1500;
        scene.add(cameraOrtho);

        camera = cameraPerspective;

        controlsPerspective = new OrbitControls(cameraPerspective, renderer.domElement);
        controlsPerspective.minDistance = 1000;
        controlsPerspective.maxDistance = 2400;
        controlsPerspective.enablePan = false;
        controlsPerspective.enableDamping = true;

        controlsOrtho = new OrbitControls(cameraOrtho, renderer.domElement);
        controlsOrtho.minZoom = 0.5;
        controlsOrtho.maxZoom = 1.5;
        controlsOrtho.enablePan = false;
        controlsOrtho.enableDamping = true;

        // lights

        const ambientLight = new v3d.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);

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

        // 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

        materialStandard = new v3d.MeshStandardMaterial({
          color: 0xffffff,

          metalness: 0.5,
          roughness: 0.6,

          displacementMap: displacementMap,
          displacementScale: SCALE,
          displacementBias: BIAS,

          aoMap: aoMap,

          normalMap: normalMap,
          normalScale: new v3d.Vector2(1, - 1),

          //flatShading: true,

          side: v3d.DoubleSide
        });

        materialDepthBasic = new v3d.MeshDepthMaterial({
          depthPacking: v3d.BasicDepthPacking,

          displacementMap: displacementMap,
          displacementScale: SCALE,
          displacementBias: BIAS,

          side: v3d.DoubleSide
        });

        materialDepthRGBA = new v3d.MeshDepthMaterial({
          depthPacking: v3d.RGBADepthPacking,

          displacementMap: displacementMap,
          displacementScale: SCALE,
          displacementBias: BIAS,

          side: v3d.DoubleSide
        });

        materialNormal = new v3d.MeshNormalMaterial({
          displacementMap: displacementMap,
          displacementScale: SCALE,
          displacementBias: BIAS,

          normalMap: normalMap,
          normalScale: new v3d.Vector2(1, - 1),

          //flatShading: true,

          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, materialNormal);
          mesh.scale.multiplyScalar(25);
          scene.add(mesh);

        });


        //

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

        //

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

      }

      function onWindowResize() {

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

        camera.aspect = aspect;

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

        camera.updateProjectionMatrix();

        renderer.setSize(width, height);

      }

      //

      function animate() {

        requestAnimationFrame(animate);

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

      }

      function render() {

        if (mesh) {

          let material = mesh.material;

          switch (params.material) {

            case 'standard': material = materialStandard; break;
            case 'depthBasic': material = materialDepthBasic; break;
            case 'depthRGBA': material = materialDepthRGBA; break;
            case 'normal': material = materialNormal; break;

          }

          if (sides[params.side] !== material.side) {

            switch (params.side) {

              case 'front': material.side = v3d.FrontSide; break;
              case 'back': material.side = v3d.BackSide; break;
              case 'double': material.side = v3d.DoubleSide; break;

            }

            material.needsUpdate = true;

          }

          mesh.material = material;

        }

        switch (params.camera) {

          case 'perspective':
            camera = cameraPerspective;
            break;
          case 'ortho':
            camera = cameraOrtho;
            break;

        }

        controlsPerspective.update();
        controlsOrtho.update(); // must update both controls for damping to complete

        renderer.render(scene, camera);

      }

    </script>

  </body>

</html>