master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl2_materials_texture2darray.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - 2D texture array</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>
  <script id="vs" type="x-shader/x-vertex">
  uniform vec2 size;
  out vec2 vUv;

  void main() {

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    // Convert position.xy to 1.0-0.0

    vUv.xy = position.xy / size + 0.5;
    vUv.y = 1.0 - vUv.y; // original data is upside down

  }
  </script>

  <script id="fs" type="x-shader/x-fragment">
  precision highp float;
  precision highp int;
  precision highp sampler2DArray;

  uniform sampler2DArray diffuse;
  in vec2 vUv;
  uniform int depth;

  out vec4 outColor;

  void main() {

    vec4 color = texture(diffuse, vec3(vUv, depth));

    // lighten a bit
    outColor = vec4(color.rrr * 1.5, 1.0);

  }
  </script>
  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - 2D Texture array<br />
      Scanned head data by
      <a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a><br />
      licensed under
      <a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
    </div>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';
      import { JSZip } from './jsm/libs/jszip.module.min.js';

      import { WEBGL } from './jsm/WebGL.js';

      if (WEBGL.isWebGL2Available() === false) {

        document.body.appendChild(WEBGL.getWebGL2ErrorMessage());

      }

      let camera, scene, mesh, renderer, stats;

      const planeWidth = 50;
      const planeHeight = 50;

      let depthStep = 0.4;

      init();
      animate();

      function init() {

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

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.z = 70;

        scene = new v3d.Scene();

        // width 256, height 256, depth 109, 8-bit, zip archived raw data

        new v3d.FileLoader()
          .setResponseType('arraybuffer')
          .load('textures/3d/head256x256x109.zip', function(data) {

            const zip = new JSZip(data);
            const array = zip.files['head256x256x109'].asUint8Array();

            const texture = new v3d.DataTexture2DArray(array, 256, 256, 109);
            texture.format = v3d.RedFormat;
            texture.type = v3d.UnsignedByteType;

            const material = new v3d.ShaderMaterial({
              uniforms: {
                diffuse: { value: texture },
                depth: { value: 55 },
                size: { value: new v3d.Vector2(planeWidth, planeHeight) }
              },
              vertexShader: document.getElementById('vs').textContent.trim(),
              fragmentShader: document.getElementById('fs').textContent.trim(),
              glslVersion: v3d.GLSL3
            });

            const geometry = new v3d.PlaneBufferGeometry(planeWidth, planeHeight);

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

            scene.add(mesh);

          });

        // 2D Texture array is available on WebGL 2.0

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

        if (mesh) {

          let value = mesh.material.uniforms["depth"].value;

          value += depthStep;

          if (value > 109.0 || value < 0.0) {

            if (value > 1.0) value = 109.0 * 2.0 - value;
            if (value < 0.0) value = - value;

            depthStep = - depthStep;

          }

          mesh.material.uniforms["depth"].value = value;

        }

        render();
        stats.update();

      }

      function render() {

        renderer.render(scene, camera);

      }

    </script>
  </body>
</html>