master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_modifier_tessellation.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - modifier - tessellation</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> - modifier tessellation</div>
    <div id="container"></div>

    <script type="x-shader/x-vertex" id="vertexshader">

      uniform float amplitude;

      attribute vec3 customColor;
      attribute vec3 displacement;

      varying vec3 vNormal;
      varying vec3 vColor;

      void main() {

        vNormal = normal;
        vColor = customColor;

        vec3 newPosition = position + normal * amplitude * displacement;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);

      }

    </script>

    <script type="x-shader/x-fragment" id="fragmentshader">

      varying vec3 vNormal;
      varying vec3 vColor;

      void main() {

        const float ambient = 0.4;

        vec3 light = vec3(1.0);
        light = normalize(light);

        float directional = max(dot(vNormal, light), 0.0);

        gl_FragColor = vec4((directional + ambient) * vColor, 1.0);

      }

    </script>

    <script type="module">

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

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

      import { TrackballControls } from './jsm/controls/TrackballControls.js';
      import { TessellateModifier } from './jsm/modifiers/TessellateModifier.js';

      let renderer, scene, camera, stats;

      let controls;

      let mesh, uniforms;

      const WIDTH = window.innerWidth;
      const HEIGHT = window.innerHeight;

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

        init(font);
        animate();

      });

      function init(font) {

        camera = new v3d.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 10000);
        camera.position.set(- 100, 100, 200);

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

        //

        let geometry = new v3d.TextGeometry("v3d.JS", {

          font: font,

          size: 40,
          height: 5,
          curveSegments: 3,

          bevelThickness: 2,
          bevelSize: 1,
          bevelEnabled: true

        });

        geometry.center();

        const tessellateModifier = new TessellateModifier(8, 6);

        geometry = tessellateModifier.modify(geometry);

        //

        geometry = new v3d.BufferGeometry().fromGeometry(geometry);

        const numFaces = geometry.attributes.position.count / 3;

        const colors = new Float32Array(numFaces * 3 * 3);
        const displacement = new Float32Array(numFaces * 3 * 3);

        const color = new v3d.Color();

        for (let f = 0; f < numFaces; f ++) {

          const index = 9 * f;

          const h = 0.2 * Math.random();
          const s = 0.5 + 0.5 * Math.random();
          const l = 0.5 + 0.5 * Math.random();

          color.setHSL(h, s, l);

          const d = 10 * (0.5 - Math.random());

          for (let i = 0; i < 3; i++) {

            colors[index + (3 * i)] = color.r;
            colors[index + (3 * i) + 1] = color.g;
            colors[index + (3 * i) + 2] = color.b;

            displacement[index + (3 * i)] = d;
            displacement[index + (3 * i) + 1] = d;
            displacement[index + (3 * i) + 2] = d;

          }

        }

        geometry.setAttribute('customColor', new v3d.BufferAttribute(colors, 3));
        geometry.setAttribute('displacement', new v3d.BufferAttribute(displacement, 3));

        //

        uniforms = {

          amplitude: { value: 0.0 }

        };

        const shaderMaterial = new v3d.ShaderMaterial({

          uniforms: uniforms,
          vertexShader: document.getElementById('vertexshader').textContent,
          fragmentShader: document.getElementById('fragmentshader').textContent

        });

        //

        mesh = new v3d.Mesh(geometry, shaderMaterial);

        scene.add(mesh);

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(WIDTH, HEIGHT);

        const container = document.getElementById('container');
        container.appendChild(renderer.domElement);

        controls = new TrackballControls(camera, renderer.domElement);

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

        //

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

        render();

        stats.update();

      }

      function render() {

        const time = Date.now() * 0.001;

        uniforms.amplitude.value = 1.0 + Math.sin(time * 0.5);

        controls.update();

        renderer.render(scene, camera);

      }


    </script>

</body>

</html>