master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_variations_toon.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - materials</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">Verge3D</a> - Toon Material Variantions with OutlineEffect</div>

    <script type="module">

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

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

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { OutlineEffect } from './jsm/effects/OutlineEffect.js';

      let container, stats;

      let camera, scene, renderer, effect;
      let particleLight;

      const loader = new v3d.FontLoader();
      loader.load('fonts/gentilis_regular.typeface.json', function(font) {

        init(font);
        animate();

      });

      function init(font) {

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

        camera = new v3d.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2500);
        camera.position.set(0.0, 400, 400 * 3.5);

        //

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0x444488);

        // Materials

        const cubeWidth = 400;
        const numberOfSphersPerSide = 5;
        const sphereRadius = (cubeWidth / numberOfSphersPerSide) * 0.8 * 0.5;
        const stepSize = 1.0 / numberOfSphersPerSide;

        const geometry = new v3d.SphereBufferGeometry(sphereRadius, 32, 16);

        for (let alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++) {

          const colors = new Uint8Array(alphaIndex + 2);

          for (let c = 0; c <= colors.length; c ++) {

            colors[c] = (c / colors.length) * 256;

          }

          const gradientMap = new v3d.DataTexture(colors, colors.length, 1, v3d.LuminanceFormat);
          gradientMap.minFilter = v3d.NearestFilter;
          gradientMap.magFilter = v3d.NearestFilter;
          gradientMap.generateMipmaps = false;

          for (let beta = 0; beta <= 1.0; beta += stepSize) {

            for (let gamma = 0; gamma <= 1.0; gamma += stepSize) {

              // basic monochromatic energy preservation
              const diffuseColor = new v3d.Color().setHSL(alpha, 0.5, gamma * 0.5 + 0.1).multiplyScalar(1 - beta * 0.2);

              const material = new v3d.MeshToonMaterial({
                color: diffuseColor,
                gradientMap: gradientMap
              });

              const mesh = new v3d.Mesh(geometry, material);

              mesh.position.x = alpha * 400 - 200;
              mesh.position.y = beta * 400 - 200;
              mesh.position.z = gamma * 400 - 200;

              scene.add(mesh);

            }

          }

        }

        function addLabel(name, location) {

          const textGeo = new v3d.TextBufferGeometry(name, {

            font: font,

            size: 20,
            height: 1,
            curveSegments: 1

          });

          const textMaterial = new v3d.MeshBasicMaterial();
          const textMesh = new v3d.Mesh(textGeo, textMaterial);
          textMesh.position.copy(location);
          scene.add(textMesh);

        }

        addLabel("-gradientMap", new v3d.Vector3(- 350, 0, 0));
        addLabel("+gradientMap", new v3d.Vector3(350, 0, 0));

        addLabel("-diffuse", new v3d.Vector3(0, 0, - 300));
        addLabel("+diffuse", new v3d.Vector3(0, 0, 300));

        particleLight = new v3d.Mesh(
          new v3d.SphereBufferGeometry(4, 8, 8),
          new v3d.MeshBasicMaterial({ color: 0xffffff })
        );
        scene.add(particleLight);

        // Lights

        scene.add(new v3d.AmbientLight(0x888888));

        const pointLight = new v3d.PointLight(0xffffff, 2, 800);
        particleLight.add(pointLight);

        //

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

        effect = new OutlineEffect(renderer);

        //

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

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 200;
        controls.maxDistance = 2000;

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

      }

      function onWindowResize() {

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

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

      }

      //

      function animate() {

        requestAnimationFrame(animate);

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

      }

      function render() {

        const timer = Date.now() * 0.00025;

        particleLight.position.x = Math.sin(timer * 7) * 300;
        particleLight.position.y = Math.cos(timer * 5) * 400;
        particleLight.position.z = Math.cos(timer * 3) * 300;

        effect.render(scene, camera);

      }

    </script>

  </body>
</html>