master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_depth_texture.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - Depth Texture</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>
      #error {
        margin: auto;
        margin-top: 40px;
        display: block;
        max-width: 400px;
        padding: 20px;
        background: #CE0808;
      }
    </style>

    <script id="post-vert" type="x-shader/x-vertex">
      varying vec2 vUv;

      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    </script>
    <script id="post-frag" type="x-shader/x-fragment">
      #include <packing>

      varying vec2 vUv;
      uniform sampler2D tDiffuse;
      uniform sampler2D tDepth;
      uniform float cameraNear;
      uniform float cameraFar;


      float readDepth(sampler2D depthSampler, vec2 coord) {
        float fragCoordZ = texture2D(depthSampler, coord).x;
        float viewZ = perspectiveDepthToViewZ(fragCoordZ, cameraNear, cameraFar);
        return viewZToOrthographicDepth(viewZ, cameraNear, cameraFar);
      }

      void main() {
        //vec3 diffuse = texture2D(tDiffuse, vUv).rgb;
        float depth = readDepth(tDepth, vUv);

        gl_FragColor.rgb = 1.0 - vec3(depth);
        gl_FragColor.a = 1.0;
      }
    </script>

  </head>
  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">threejs</a> webgl - depth texture<br/>
      Stores render target depth in a texture attachment.<br/>
      Created by <a href="http://twitter.com/mattdesl" target="_blank" rel="noopener">@mattdesl</a>.

      <div id="error" style="display: none;">
      Your browser does not support <strong>WEBGL_depth_texture</strong>.<br/><br/>
      This demo will not work.
      </div>
    </div>

    <script type="module">

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

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

      import { GUI } from './jsm/libs/dat.gui.module.js';
      import { OrbitControls } from './jsm/controls/OrbitControls.js';

      let camera, scene, renderer, controls, stats;
      let target;
      let postScene, postCamera, postMaterial;
      let supportsExtension = true;

      const params = {
        format: v3d.DepthFormat,
        type: v3d.UnsignedShortType
      };

      const formats = { DepthFormat: v3d.DepthFormat, DepthStencilFormat: v3d.DepthStencilFormat };
      const types = { UnsignedShortType: v3d.UnsignedShortType, UnsignedIntType: v3d.UnsignedIntType, UnsignedInt248Type: v3d.UnsignedInt248Type };

      init();
      animate();

      function init() {

        renderer = new v3d.WebGLRenderer();

        if (renderer.capabilities.isWebGL2 === false && renderer.extensions.has('WEBGL_depth_texture') === false) {

          supportsExtension = false;
          document.querySelector('#error').style.display = 'block';
          return;

        }

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        stats = new Stats();
        document.body.appendChild(stats.dom);

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 50);
        camera.position.z = 4;

        controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        // Create a render target with depth texture
        setupRenderTarget();

        // Our scene
        setupScene();

        // Setup post-processing step
        setupPost();

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

        //
        const gui = new GUI({ width: 300 });

        gui.add(params, 'format', formats).onChange(setupRenderTarget);
        gui.add(params, 'type', types).onChange(setupRenderTarget);
        gui.open();

      }

      function setupRenderTarget() {

        if (target) target.dispose();

        const format = parseFloat(params.format);
        const type = parseFloat(params.type);

        target = new v3d.WebGLRenderTarget(window.innerWidth, window.innerHeight);
        target.texture.format = v3d.RGBFormat;
        target.texture.minFilter = v3d.NearestFilter;
        target.texture.magFilter = v3d.NearestFilter;
        target.texture.generateMipmaps = false;
        target.stencilBuffer = (format === v3d.DepthStencilFormat) ? true : false;
        target.depthBuffer = true;
        target.depthTexture = new v3d.DepthTexture();
        target.depthTexture.format = format;
        target.depthTexture.type = type;

      }

      function setupPost() {

        // Setup post processing stage
        postCamera = new v3d.OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
        postMaterial = new v3d.ShaderMaterial({
          vertexShader: document.querySelector('#post-vert').textContent.trim(),
          fragmentShader: document.querySelector('#post-frag').textContent.trim(),
          uniforms: {
            cameraNear: { value: camera.near },
            cameraFar: { value: camera.far },
            tDiffuse: { value: null },
            tDepth: { value: null }
          }
        });
        const postPlane = new v3d.PlaneBufferGeometry(2, 2);
        const postQuad = new v3d.Mesh(postPlane, postMaterial);
        postScene = new v3d.Scene();
        postScene.add(postQuad);

      }

      function setupScene() {

        scene = new v3d.Scene();

        const geometry = new v3d.TorusKnotBufferGeometry(1, 0.3, 128, 64);
        const material = new v3d.MeshBasicMaterial({ color: 'blue' });

        const count = 50;
        const scale = 5;

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

          const r = Math.random() * 2.0 * Math.PI;
          const z = (Math.random() * 2.0) - 1.0;
          const zScale = Math.sqrt(1.0 - z * z) * scale;

          const mesh = new v3d.Mesh(geometry, material);
          mesh.position.set(
            Math.cos(r) * zScale,
            Math.sin(r) * zScale,
            z * scale
          );
          mesh.rotation.set(Math.random(), Math.random(), Math.random());
          scene.add(mesh);

        }

      }

      function onWindowResize() {

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

        const dpr = renderer.getPixelRatio();
        target.setSize(window.innerWidth * dpr, window.innerHeight * dpr);
        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function animate() {

        if (!supportsExtension) return;

        requestAnimationFrame(animate);

        // render scene into target
        renderer.setRenderTarget(target);
        renderer.render(scene, camera);

        // render post FX
        postMaterial.uniforms.tDiffuse.value = target.texture;
        postMaterial.uniforms.tDepth.value = target.depthTexture;

        renderer.setRenderTarget(null);
        renderer.render(postScene, postCamera);

        controls.update(); // required because damping is enabled

        stats.update();

      }

    </script>

  </body>
</html>