Verify depth textures are cleared to 1.0

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<canvas></canvas>

index.js

import * as twgl from 'https://twgljs.org/dist/4.x/twgl-full.module.js';

const gl = document.querySelector('canvas').getContext('webgl');
const ext = gl.getExtension('WEBGL_depth_texture');
if (!ext) {
  alert('need WEBGL_depth_texture');
}

const vs = `
attribute vec4 position;

uniform vec4 offset;
void main() { 
  gl_Position = position + offset;
}
`;

const fs = `
precision mediump float;
uniform vec4 color;
void main() {
  gl_FragColor = color;
}
`;

const prgInfo = twgl.createProgramInfo(gl, [vs, fs]);
gl.useProgram(prgInfo.program);

const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: {
    numComponents: 2,
    data: [ -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1 ],
  },
});

twgl.createFramebufferInfo(gl, [
  { format: gl.RGBA },
  { format: gl.DEPTH_COMPONENT },
]);

twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
twgl.setUniforms(prgInfo, {color: [1, 0, 0, 1]});
twgl.drawBufferInfo(gl, bufferInfo);

assertEqual(gl.getError(), gl.NONE);

checkColor(gl, [255, 0, 0, 255]);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.EQUAL);

twgl.setUniforms(prgInfo, {color: [0, 1, 0, 1]});
twgl.drawBufferInfo(gl, bufferInfo);
// should still be red
checkColor(gl, [255, 0, 0, 255]);

twgl.setUniforms(prgInfo, {color: [0, 1, 0, 1], offset: [0, 0, 1, 0]});
twgl.drawBufferInfo(gl, bufferInfo);
checkColor(gl, [0, 255, 0, 255]);

function assertEqual(a, b) {
  if (a !== b) {
    console.error(`FAIL: ${a} was expected to be ${b}`);
  }
}

function checkColor(gl, color) {
  const [x, y, width, height] = gl.getParameter(gl.VIEWPORT);
  const pixels = new Uint8Array(width * height * 4);
  gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  for (let offset = 0; offset < pixels.length; offset += 4) {
    if (pixels[offset    ] !== color[0] ||
        pixels[offset + 1] !== color[1] ||
        pixels[offset + 2] !== color[2] ||
        pixels[offset + 3] !== color[3]) {
      const p = offset / 4;
      const px = p % width;
      const py = p / width | 0;
      console.error(`FAIL: expected pixel ${px + x}, ${py + y} to be ${color} but was ${pixels.slice(offset, offset + 4)}`);
      return;
    }
  }
  console.log(`PASS: rect ${x},${y},${width},${height} color was ${color}`);
}

jsGist.json

{"name":"Verify depth textures are cleared to 1.0","settings":{},"filenames":["index.html","index.css","index.js"]}