examples/depthtexture-webgl1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <!--

    @license twgl.js Copyright 2019 Gregg Tavares
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.

    -->
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, user-scalable=yes">
    <meta property="og:title" content="TWGL.js - depth texture webgl1" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://twgljs.org/examples/screenshots/depthtexture-webgl1.png" />
    <meta property="og:description" content="TWGL.js - depth texture webgl1" />
    <meta property="og:url" content="http://twgljs.org" />

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@greggman">
    <meta name="twitter:creator" content="@greggman">
    <meta name="twitter:domain" content="twgljs.org">
    <meta name="twitter:title" content="TWGL.js - depth texture webgl1">
    <meta name="twitter:url" content="http://twgljs.org/examples/depthtexture-webgl1.html">
    <meta name="twitter:description" content="TWGL.js - depth texture webgl1">
    <meta name="twitter:image:src" content="http://twgljs.org/examples/screenshots/depthtextrue-webgl1.png">

    <link href="/resources/images/twgljs-icon.png" rel="shortcut icon" type="image/png">

    <title>twgl.js - depth texture webgl1</title>
    <style>
      body {
          margin: 0;
          font-family: monospace;
      }
      canvas {
          display: block;
          width: 100vw;
          height: 100vh;
      }
      #b {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <div id="b"><a href="http://twgljs.org">twgl.js</a> - depth texture webgl1</div>
  </body>
  <script type="module">
import * as twgl from '../src/twgl-full.js';

function main() {
  const m4 = twgl.m4;
  const gl = document.querySelector("canvas").getContext("webgl");
  const ext = gl.getExtension('WEBGL_depth_texture');
  if (!ext) {
    alert('need WEBGL_depth_texture');  // eslint-disable-line
    return;
  }

  const attachments = [
    { format: gl.RGBA, },
    { format: gl.DEPTH_COMPONENT },
  ];
  const fbi = twgl.createFramebufferInfo(gl, attachments, 256, 256);

  const vs = `
  attribute vec4 position;
  attribute vec2 texcoord;
  uniform mat4 u_worldViewProjection;
  varying vec2 v_texcoord;
  void main() {
    gl_Position = u_worldViewProjection * position;
    v_texcoord = texcoord;
  }
  `;
  const fs = `
  precision mediump float; 
  uniform sampler2D u_tex;
  varying vec2 v_texcoord;
  void main() {
    gl_FragColor = texture2D(u_tex, v_texcoord);
  }
  `;

  // compile shaders, links program, looks up locations
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
  // calls gl.createBuffer, gl.bindBuffer, gl.bufferData
  const cubeBufferInfo = twgl.primitives.createCubeBufferInfo(gl);

  const green = twgl.createTexture(gl, { src: [0, 255, 0, 255]});

  function drawCube(gl, u_tex, aspect, time) {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const fov = Math.PI * 0.25;
    const zNear = 1;
    const zFar = 4;
    const projection = m4.perspective(fov, aspect, zNear, zFar);
    const world = m4.translation([0, 0, -3]);
    m4.rotateY(world, Math.PI * .1 * time, world);
    m4.rotateX(world, Math.PI * .15 * time, world);

    // calls gl.uniformXXX
    twgl.setUniforms(programInfo, {
      u_tex,
      u_worldViewProjection: m4.multiply(projection, world),
    });

    // calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(gl, cubeBufferInfo);
  }

  function render(time) {
    time *= 0.001; // seconds

    twgl.resizeCanvasToDisplaySize(gl.canvas);

    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);

    gl.useProgram(programInfo.program);
    // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(gl, programInfo, cubeBufferInfo);

    // call gl.bindFramebuffer, gl.viewport
    twgl.bindFramebufferInfo(gl, fbi);
    gl.clearColor(0, 0, 1, 1);
    drawCube(gl, green, fbi.width / fbi.height, time);

    // call gl.bindFramebuffer, gl.viewport
    twgl.bindFramebufferInfo(gl, null);
    gl.clearColor(0.2, 0.2, 0.2, 0);
    drawCube(gl, fbi.attachments[(time + 1 | 0) % 2], gl.canvas.clientWidth / gl.canvas.clientHeight, time);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}
main();
  </script>
</html>