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">
<title>WebGL Frag Depth Conformance Tests</title>
<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>
</head>
<body>
<div id="description"></div>
<canvas id="canvas" style="width: 50px; height: 50px;"> </canvas>
<div id="console"></div>
<!-- Shaders for testing fragment depth writing -->
<!-- Shader omitting the required #version -->
<script id="fragmentShaderESSL1" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
gl_FragDepth = 1.0;
}
</script>
<!-- Shader with required #version -->
<script id="fragmentShaderESSL3" type="x-shader/x-fragment">#version 300 es
precision mediump float;
out vec4 my_FragColor;
void main() {
my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
gl_FragDepth = 1.0;
}
</script>
<!-- Shader using the EXT suffix -->
<script id="fragmentShaderESSL3EXT" type="x-shader/x-fragment">#version 300 es
precision mediump float;
out vec4 my_FragColor;
void main() {
my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
gl_FragDepthEXT = 1.0;
}
</script>
<!-- Shaders to link with test fragment shaders -->
<script id="vertexShaderESSL1" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="vertexShaderESSL3" type="x-shader/x-vertex">#version 300 es
in vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<!-- Shader to test output -->
<script id="outputFragmentShader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
uniform float uDepth;
out vec4 my_FragColor;
void main() {
my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
gl_FragDepth = uDepth;
}
</script>
<script>
"use strict";
description("This test verifies the functionality of setting fragment depth in a shader.");
debug("");
var wtu = WebGLTestUtils;
var canvas = document.getElementById("canvas");
var gl = wtu.create3DContext(canvas, null, 2);
if (!gl) {
testFailed("WebGL context does not exist");
} else {
testPassed("WebGL context exists");
runShaderTests();
debug("");
runOutputTests();
}
function runShaderTests() {
debug("");
debug("Testing various shader compiles");
// Always expect ESSL1 shaders to fail
var fragmentProgramESSL1 = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL1", "fragmentShaderESSL1");
if (fragmentProgramESSL1) {
testFailed("gl_FragDepth allowed in ESSL1 shader - should be disallowed");
} else {
testPassed("gl_FragDepth disallowed in ESSL1 shader");
}
// Try to compile a shader using the built-ins that should only succeed if enabled
var testFragmentProgram = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL3", "fragmentShaderESSL3");
if (testFragmentProgram) {
testPassed("gl_FragDepth allowed in ESSL3 shader");
} else {
testFailed("gl_FragDepth disallowed in ESSL3 shader");
}
var testFragmentProgram = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL3", "fragmentShaderESSL3EXT");
if (testFragmentProgram) {
testFailed("gl_FragDepthEXT allowed in ESSL3 shader - should only allow gl_FragDepth");
} else {
testPassed("gl_FragDepthEXT disallowed in ESSL3 shader");
}
}
function runOutputTests() {
debug("Testing rendering results from writing to gl_FragData");
canvas.width = 50; canvas.height = 50;
gl.viewport(0, 0, canvas.width, canvas.height);
// Enable depth testing with a clearDepth of 0.5
// This makes it so that fragments are only rendered when
// gl_FragDepth is < 0.5
gl.clearDepth(0.5);
gl.enable(gl.DEPTH_TEST);
var positionLoc = 0;
var texcoordLoc = 1;
var program = wtu.setupProgram(gl, ["vertexShaderESSL3", "outputFragmentShader"], ['vPosition'], [0]);
var quadParameters = wtu.setupUnitQuad(gl, 0, 1);
var depthUniform = gl.getUniformLocation(program, "uDepth");
// Draw 1: Greater than clear depth
gl.uniform1f(depthUniform, 1.0);
wtu.clearAndDrawUnitQuad(gl);
wtu.checkCanvas(gl, [255, 255, 255, 255]);
// Draw 2: Less than clear depth
gl.uniform1f(depthUniform, 0.0);
wtu.clearAndDrawUnitQuad(gl);
wtu.checkCanvas(gl, [255, 0, 0, 255]);
}
debug("");
var successfullyParsed = true;
</script>
<script src="../../js/js-test-post.js"></script>
</body>
</html>