master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_buffergeometry_points_interleav...

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - buffergeometry - particles</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> webgl - buffergeometry - particles</div>

    <script type="module">

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

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

      let container, stats;

      let camera, scene, renderer;

      let points;

      init();
      animate();

      function init() {

        container = document.getElementById('container');

        camera = new v3d.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500);
        camera.position.z = 2750;

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0x050505);
        scene.fog = new v3d.Fog(0x050505, 2000, 3500);

        //

        const particles = 500000;

        const geometry = new v3d.BufferGeometry();

        // create a generic buffer of binary data (a single particle has 16 bytes of data)

        const arrayBuffer = new ArrayBuffer(particles * 16);

        // the following typed arrays share the same buffer

        const interleavedFloat32Buffer = new Float32Array(arrayBuffer);
        const interleavedUint8Buffer = new Uint8Array(arrayBuffer);

        //

        const color = new v3d.Color();

        const n = 1000, n2 = n / 2; // particles spread in the cube

        for (let i = 0; i < interleavedFloat32Buffer.length; i += 4) {

          // position (first 12 bytes)

          const x = Math.random() * n - n2;
          const y = Math.random() * n - n2;
          const z = Math.random() * n - n2;

          interleavedFloat32Buffer[i + 0] = x;
          interleavedFloat32Buffer[i + 1] = y;
          interleavedFloat32Buffer[i + 2] = z;

          // color (last 4 bytes)

          const vx = (x / n) + 0.5;
          const vy = (y / n) + 0.5;
          const vz = (z / n) + 0.5;

          color.setRGB(vx, vy, vz);

          const j = (i + 3) * 4;

          interleavedUint8Buffer[j + 0] = color.r * 255;
          interleavedUint8Buffer[j + 1] = color.g * 255;
          interleavedUint8Buffer[j + 2] = color.b * 255;
          interleavedUint8Buffer[j + 3] = 0; // not needed

        }

        const interleavedBuffer32 = new v3d.InterleavedBuffer(interleavedFloat32Buffer, 4);
        const interleavedBuffer8 = new v3d.InterleavedBuffer(interleavedUint8Buffer, 16);

        geometry.setAttribute('position', new v3d.InterleavedBufferAttribute(interleavedBuffer32, 3, 0, false));
        geometry.setAttribute('color', new v3d.InterleavedBufferAttribute(interleavedBuffer8, 3, 12, true));

        //

        const material = new v3d.PointsMaterial({ size: 15, vertexColors: true });

        points = new v3d.Points(geometry, material);
        scene.add(points);

        //

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

        container.appendChild(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;

        points.rotation.x = time * 0.25;
        points.rotation.y = time * 0.5;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>