master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_geometry_terrain_fog.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - geometry - terrain + fog</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">
    <style>
      body {
        background-color: #efd1b5;
        color: #61443e;
      }
      a {
        color: #a06851;
      }
    </style>
  </head>
  <body>

    <div id="container"></div>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>

    <script type="module">

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

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

      import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
      import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';

      let container, stats;
      let camera, controls, scene, renderer;
      let mesh, texture;

      const worldWidth = 256, worldDepth = 256;
      const clock = new v3d.Clock();

      init();
      animate();

      function init() {

        container = document.getElementById('container');

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xefd1b5);
        scene.fog = new v3d.FogExp2(0xefd1b5, 0.0025);

        const data = generateHeight(worldWidth, worldDepth);

        camera.position.set(100, 800, - 800);
        camera.lookAt(- 100, 810, - 800);

        const geometry = new v3d.PlaneBufferGeometry(7500, 7500, worldWidth - 1, worldDepth - 1);
        geometry.rotateX(- Math.PI / 2);

        const vertices = geometry.attributes.position.array;

        for (let i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {

          vertices[j + 1] = data[i] * 10;

        }

        texture = new v3d.CanvasTexture(generateTexture(data, worldWidth, worldDepth));
        texture.wrapS = v3d.ClampToEdgeWrapping;
        texture.wrapT = v3d.ClampToEdgeWrapping;

        mesh = new v3d.Mesh(geometry, new v3d.MeshBasicMaterial({ map: texture }));
        scene.add(mesh);

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

        controls = new FirstPersonControls(camera, renderer.domElement);
        controls.movementSpeed = 150;
        controls.lookSpeed = 0.1;

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

        controls.handleResize();

      }

      function generateHeight(width, height) {

        let seed = Math.PI / 4;
        window.Math.random = function() {

          const x = Math.sin(seed ++) * 10000;
          return x - Math.floor(x);

        };

        const size = width * height, data = new Uint8Array(size);
        const perlin = new ImprovedNoise(), z = Math.random() * 100;

        let quality = 1;

        for (let j = 0; j < 4; j ++) {

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

            const x = i % width, y = ~ ~ (i / width);
            data[i] += Math.abs(perlin.noise(x / quality, y / quality, z) * quality * 1.75);

          }

          quality *= 5;

        }

        return data;

      }

      function generateTexture(data, width, height) {

        let context, image, imageData, shade;

        const vector3 = new v3d.Vector3(0, 0, 0);

        const sun = new v3d.Vector3(1, 1, 1);
        sun.normalize();

        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;

        context = canvas.getContext('2d');
        context.fillStyle = '#000';
        context.fillRect(0, 0, width, height);

        image = context.getImageData(0, 0, canvas.width, canvas.height);
        imageData = image.data;

        for (let i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++) {

          vector3.x = data[j - 2] - data[j + 2];
          vector3.y = 2;
          vector3.z = data[j - width * 2] - data[j + width * 2];
          vector3.normalize();

          shade = vector3.dot(sun);

          imageData[i] = (96 + shade * 128) * (0.5 + data[j] * 0.007);
          imageData[i + 1] = (32 + shade * 96) * (0.5 + data[j] * 0.007);
          imageData[i + 2] = (shade * 96) * (0.5 + data[j] * 0.007);

        }

        context.putImageData(image, 0, 0);

        // Scaled 4x

        const canvasScaled = document.createElement('canvas');
        canvasScaled.width = width * 4;
        canvasScaled.height = height * 4;

        context = canvasScaled.getContext('2d');
        context.scale(4, 4);
        context.drawImage(canvas, 0, 0);

        image = context.getImageData(0, 0, canvasScaled.width, canvasScaled.height);
        imageData = image.data;

        for (let i = 0, l = imageData.length; i < l; i += 4) {

          const v = ~ ~ (Math.random() * 5);

          imageData[i] += v;
          imageData[i + 1] += v;
          imageData[i + 2] += v;

        }

        context.putImageData(image, 0, 0);

        return canvasScaled;

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

      }


      function render() {

        controls.update(clock.getDelta());
        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>