Source code
Revision control
Copy as Markdown
Other Tools
<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../resources/js-test-style.css"/>
<script src="../../js/js-test-pre.js"></script>
<script src="../../js/webgl-test-utils.js"></script>
<title>WebGL WEBGL_depth_texture Conformance Tests</title>
</head>
<body>
<script id="vshader" type="x-shader/x-vertex">
attribute vec4 a_position;
void main()
{
gl_Position = a_position;
}
</script>
<script id="fshader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
void main()
{
vec2 texcoord = (gl_FragCoord.xy - vec2(0.5)) / (u_resolution - vec2(1.0));
gl_FragColor = texture2D(u_texture, texcoord);
}
</script>
<div id="description"></div>
<div id="console"></div>
<canvas id="canvas" width="8" height="8" style="width: 8px; height: 8px;"></canvas>
<script>
"use strict";
description("This test verifies the functionality of the WEBGL_depth_texture extension, if it is available.");
debug("");
var wtu = WebGLTestUtils;
var canvas = document.getElementById("canvas");
var gl = wtu.create3DContext(canvas, {antialias: false});
var program = wtu.setupTexturedQuad(gl);
var ext = null;
var vao = null;
var tex;
var name;
var supportedFormats;
var canvas2;
if (!gl) {
testFailed("WebGL context does not exist");
} else {
testPassed("WebGL context exists");
// Run tests with extension disabled
runTestDisabled();
// Query the extension and store globally so shouldBe can access it
ext = wtu.getExtensionWithKnownPrefixes(gl, "WEBGL_depth_texture");
if (!ext) {
testPassed("No WEBGL_depth_texture support -- this is legal");
runSupportedTest(false);
} else {
testPassed("Successfully enabled WEBGL_depth_texture extension");
runSupportedTest(true);
runTestExtension(true);
runTestExtension(false);
}
}
function runSupportedTest(extensionEnabled) {
var name = wtu.getSupportedExtensionWithKnownPrefixes(gl, "WEBGL_depth_texture");
if (name !== undefined) {
if (extensionEnabled) {
testPassed("WEBGL_depth_texture listed as supported and getExtension succeeded");
} else {
testFailed("WEBGL_depth_texture listed as supported but getExtension failed");
}
} else {
if (extensionEnabled) {
testFailed("WEBGL_depth_texture not listed as supported but getExtension succeeded");
} else {
testPassed("WEBGL_depth_texture not listed as supported and getExtension failed -- this is legal");
}
}
}
function runTestDisabled() {
debug("Testing binding enum with extension disabled");
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
wtu.shouldGenerateGLError(gl, [gl.INVALID_ENUM, gl.INVALID_VALUE],
'gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, 1, 1, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null)');
wtu.shouldGenerateGLError(gl, [gl.INVALID_ENUM, gl.INVALID_VALUE],
'gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, 1, 1, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null)');
}
function dumpIt(gl, res, msg) {
return; // comment out to debug
debug(msg);
var actualPixels = new Uint8Array(res * res * 4);
gl.readPixels(0, 0, res, res, gl.RGBA, gl.UNSIGNED_BYTE, actualPixels);
for (var yy = 0; yy < res; ++yy) {
var strs = [];
for (var xx = 0; xx < res; ++xx) {
var actual = (yy * res + xx) * 4;
strs.push("(" + actualPixels[actual] + "," + actualPixels[actual+1] + "," + actualPixels[actual + 2] + "," + actualPixels[actual + 3] + ")");
}
debug(strs.join(" "));
}
}
function runTestExtension(unpackFlipY) {
debug("Testing WEBGL_depth_texture. UNPACK_FLIP_Y_WEBGL: " + unpackFlipY);
const res = 2;
const destRes = 4;
// make canvas for testing.
canvas2 = document.createElement("canvas");
canvas2.width = res;
canvas2.height = res;
var ctx = canvas2.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas2.width, canvas2.height);
var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['a_position']);
gl.useProgram(program);
gl.uniform2f(gl.getUniformLocation(program, "u_resolution"), destRes, destRes);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(
[ 1, 1, 1,
-1, 1, 0,
-1, -1, -1,
1, 1, 1,
-1, -1, -1,
1, -1, 0,
]),
gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, unpackFlipY);
var types = [
{obj: 'gl', attachment: 'DEPTH_ATTACHMENT', format: 'DEPTH_COMPONENT', type: 'UNSIGNED_SHORT', data: 'new Uint16Array(1)', depthBits: "16"},
{obj: 'gl', attachment: 'DEPTH_ATTACHMENT', format: 'DEPTH_COMPONENT', type: 'UNSIGNED_INT', data: 'new Uint32Array(1)', depthBits: "16"},
{obj: 'ext', attachment: 'DEPTH_STENCIL_ATTACHMENT', format: 'DEPTH_STENCIL', type: 'UNSIGNED_INT_24_8_WEBGL', data: 'new Uint32Array(1)', depthBits: "24", stencilBits: "8"}
];
for (var ii = 0; ii < types.length; ++ii) {
var typeInfo = types[ii];
var type = typeInfo.type;
var typeStr = typeInfo.obj + '.' + type;
debug("");
debug("testing: " + type);
// check that cubemaps are not allowed.
var cubeTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTex);
var targets = [
'TEXTURE_CUBE_MAP_POSITIVE_X',
'TEXTURE_CUBE_MAP_NEGATIVE_X',
'TEXTURE_CUBE_MAP_POSITIVE_Y',
'TEXTURE_CUBE_MAP_NEGATIVE_Y',
'TEXTURE_CUBE_MAP_POSITIVE_Z',
'TEXTURE_CUBE_MAP_NEGATIVE_Z'
];
for (var tt = 0; tt < targets.length; ++tt) {
wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, 'gl.texImage2D(gl.' + targets[ii] + ', 0, gl.' + typeInfo.format + ', 1, 1, 0, gl.' + typeInfo.format + ', ' + typeStr + ', null)');
}
// The WebGL_depth_texture extension supports both NEAREST and
// LINEAR filtering for depth textures, even though LINEAR
// doesn't have much meaning, and isn't supported in WebGL
// 2.0. Still, test both.
var filterModes = [
'LINEAR',
'NEAREST'
];
for (var jj = 0; jj < filterModes.length; ++jj) {
debug('');
debug('testing ' + filterModes[jj] + ' filtering');
var filterMode = gl[filterModes[jj]];
// check 2d textures.
tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
// test level > 0
wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, 'gl.texImage2D(gl.TEXTURE_2D, 1, gl.' + typeInfo.format + ', 1, 1, 0, gl.' + typeInfo.format + ', ' + typeStr + ', null)');
// test with data
wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, 'gl.texImage2D(gl.TEXTURE_2D, 0, gl.' + typeInfo.format + ', 1, 1, 0, gl.' + typeInfo.format + ', ' + typeStr + ', ' + typeInfo.data + ')');
// test with canvas
wtu.shouldGenerateGLError(gl, [gl.INVALID_VALUE, gl.INVALID_ENUM, gl.INVALID_OPERATION], 'gl.texImage2D(gl.TEXTURE_2D, 0, gl.' + typeInfo.format + ', gl.' + typeInfo.format + ', ' + typeStr + ', canvas2)');
// test copyTexImage2D
wtu.shouldGenerateGLError(gl, [gl.INVALID_ENUM, gl.INVALID_OPERATION], 'gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.' + typeInfo.format + ', 0, 0, 1, 1, 0)');
// test real thing
wtu.shouldGenerateGLError(gl, gl.NO_ERROR, 'gl.texImage2D(gl.TEXTURE_2D, 0, gl.' + typeInfo.format + ', ' + res + ', ' + res + ', 0, gl.' + typeInfo.format + ', ' + typeStr + ', null)');
// test texSubImage2D
wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, 'gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 1, 1, gl.' + typeInfo.format + ', ' + typeStr + ', ' + typeInfo.data + ')');
// test copyTexSubImage2D
wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, 'gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, 1, 1)');
// test generateMipmap
wtu.shouldGenerateGLError(gl, gl.INVALID_OPERATION, 'gl.generateMipmap(gl.TEXTURE_2D)');
var fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl[typeInfo.attachment], gl.TEXTURE_2D, tex, 0);
// Ensure DEPTH_BITS returns >= 16 bits for UNSIGNED_SHORT and UNSIGNED_INT, >= 24 UNSIGNED_INT_24_8_WEBGL.
// If there is stencil, ensure STENCIL_BITS reports >= 8 for UNSIGNED_INT_24_8_WEBGL.
shouldBeGreaterThanOrEqual('gl.getParameter(gl.DEPTH_BITS)', typeInfo.depthBits);
if (typeInfo.stencilBits === undefined) {
shouldBe('gl.getParameter(gl.STENCIL_BITS)', '0');
} else {
shouldBeGreaterThanOrEqual('gl.getParameter(gl.STENCIL_BITS)', typeInfo.stencilBits);
}
// TODO: remove this check if the spec is updated to require these combinations to work.
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE)
{
// try adding a color buffer.
var colorTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, colorTex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, res, res, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTex, 0);
}
shouldBe('gl.checkFramebufferStatus(gl.FRAMEBUFFER)', 'gl.FRAMEBUFFER_COMPLETE');
// use the default texture to render with while we return to the depth texture.
gl.bindTexture(gl.TEXTURE_2D, null);
/* Setup 2x2 depth texture:
* 1 0.6 0.8
* |
* 0 0.2 0.4
* 0---1
*/
const d00 = 0.2;
const d01 = 0.4;
const d10 = 0.6;
const d11 = 0.8;
gl.enable(gl.SCISSOR_TEST);
gl.scissor(0, 0, 1, 1);
gl.clearDepth(d00);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.scissor(1, 0, 1, 1);
gl.clearDepth(d10);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.scissor(0, 1, 1, 1);
gl.clearDepth(d01);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.scissor(1, 1, 1, 1);
gl.clearDepth(d11);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.disable(gl.SCISSOR_TEST);
// render the depth texture.
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.canvas.width = destRes;
gl.canvas.height = destRes;
gl.viewport(0, 0, destRes, destRes);
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.disable(gl.DITHER);
gl.enable(gl.DEPTH_TEST);
gl.clearColor(1, 0, 0, 1);
gl.clearDepth(1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 6);
dumpIt(gl, res, "--depth--");
var actualPixels = new Uint8Array(destRes * destRes * 4);
gl.readPixels(0, 0, destRes, destRes, gl.RGBA, gl.UNSIGNED_BYTE, actualPixels);
const eps = 0.002;
let expectedMin;
let expectedMax;
if (filterMode == gl.NEAREST) {
expectedMin = [
d00, d00, d10, d10,
d00, d00, d10, d10,
d01, d01, d11, d11,
d01, d01, d11, d11
];
expectedMax = expectedMin.slice();
expectedMin = expectedMin.map(x => x - eps);
expectedMax = expectedMax.map(x => x + eps);
} else {
expectedMin = [
d00-eps, d00, d00, d10-eps,
d00, d00, d00, d10,
d00, d00, d00, d10,
d01-eps, d01, d01, d11-eps,
];
expectedMax = [
d00+eps, d10, d10, d10+eps,
d01, d11, d11, d11,
d01, d11, d11, d11,
d01+eps, d11, d11, d11+eps,
];
}
for (var yy = 0; yy < destRes; ++yy) {
for (var xx = 0; xx < destRes; ++xx) {
const t = xx + destRes*yy;
const was = actualPixels[4*t] / 255.0; // 4bpp
const eMin = expectedMin[t];
const eMax = expectedMax[t];
let func = testPassed;
const text = `At ${xx},${yy}, expected within [${eMin},${eMax}], was ${was.toFixed(3)}`
if (was <= eMin || was >= eMax) {
func = testFailed;
}
func(text);
}
}
// check limitations
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl[typeInfo.attachment], gl.TEXTURE_2D, null, 0);
var badAttachment = typeInfo.attachment == 'DEPTH_ATTACHMENT' ? 'DEPTH_STENCIL_ATTACHMENT' : 'DEPTH_ATTACHMENT';
wtu.shouldGenerateGLError(gl, gl.NO_ERROR, 'gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.' + badAttachment + ', gl.TEXTURE_2D, tex, 0)');
shouldNotBe('gl.checkFramebufferStatus(gl.FRAMEBUFFER)', 'gl.FRAMEBUFFER_COMPLETE');
wtu.shouldGenerateGLError(gl, gl.INVALID_FRAMEBUFFER_OPERATION, 'gl.clear(gl.DEPTH_BUFFER_BIT)');
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
shouldBe('gl.getError()', 'gl.NO_ERROR');
}
}
}
debug("");
var successfullyParsed = true;
</script>
<script src="../../js/js-test-post.js"></script>
</body>
</html>