dom/canvas/test/webgl-conf/checkout/conformance2/glsl3/frag-depth.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL Frag Depth Conformance Tests</title>
  12 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  13 <script src="../../js/js-test-pre.js"></script>
  14 <script src="../../js/webgl-test-utils.js"></script>
  15 </head>
  16 <body>
  17 <div id="description"></div>
  18 <canvas id="canvas" style="width: 50px; height: 50px;"> </canvas>
  19 <div id="console"></div>
  20 <!-- Shaders for testing fragment depth writing -->
  21
  22 <!-- Shader omitting the required #version -->
  23 <script id="fragmentShaderESSL1" type="x-shader/x-fragment">
  24 precision mediump float;
  25 void main() {
  26     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  27     gl_FragDepth = 1.0;
  28 }
  29 </script>
  30 <!-- Shader with required #version -->
  31 <script id="fragmentShaderESSL3" type="x-shader/x-fragment">#version 300 es
  32 precision mediump float;
  33 out vec4 my_FragColor;
  34 void main() {
  35     my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  36     gl_FragDepth = 1.0;
  37 }
  38 </script>
  39 <!-- Shader using the EXT suffix -->
  40 <script id="fragmentShaderESSL3EXT" type="x-shader/x-fragment">#version 300 es
  41 precision mediump float;
  42 out vec4 my_FragColor;
  43 void main() {
  44     my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  45     gl_FragDepthEXT = 1.0;
  46 }
  47 </script>
  48 <!-- Shaders to link with test fragment shaders -->
  49 <script id="vertexShaderESSL1" type="x-shader/x-vertex">
  50 attribute vec4 vPosition;
  51 void main() {
  52     gl_Position = vPosition;
  53 }
  54 </script>
  55 <script id="vertexShaderESSL3" type="x-shader/x-vertex">#version 300 es
  56 in vec4 vPosition;
  57 void main() {
  58     gl_Position = vPosition;
  59 }
  60 </script>
  61
  62 <!-- Shader to test output -->
  63 <script id="outputFragmentShader" type="x-shader/x-fragment">#version 300 es
  64 precision mediump float;
  65 uniform float uDepth;
  66
  67 out vec4 my_FragColor;
  68 void main() {
  69     my_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  70     gl_FragDepth = uDepth;
  71 }
  72 </script>
  73
  74 <script>
  75 "use strict";
  76 description("This test verifies the functionality of setting fragment depth in a shader.");
  77
  78 debug("");
  79
  80 var wtu = WebGLTestUtils;
  81 var canvas = document.getElementById("canvas");
  82 var gl = wtu.create3DContext(canvas, null, 2);
  83
  84 if (!gl) {
  85     testFailed("WebGL context does not exist");
  86 } else {
  87     testPassed("WebGL context exists");
  88
  89     runShaderTests();
  90     debug("");
  91     runOutputTests();
  92 }
  93
  94 function runShaderTests() {
  95     debug("");
  96     debug("Testing various shader compiles");
  97
  98     // Always expect ESSL1 shaders to fail
  99     var fragmentProgramESSL1 = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL1", "fragmentShaderESSL1");
 100     if (fragmentProgramESSL1) {
 101         testFailed("gl_FragDepth allowed in ESSL1 shader - should be disallowed");
 102     } else {
 103         testPassed("gl_FragDepth disallowed in ESSL1 shader");
 104     }
 105
 106     // Try to compile a shader using the built-ins that should only succeed if enabled
 107     var testFragmentProgram = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL3", "fragmentShaderESSL3");
 108     if (testFragmentProgram) {
 109         testPassed("gl_FragDepth allowed in ESSL3 shader");
 110     } else {
 111         testFailed("gl_FragDepth disallowed in ESSL3 shader");
 112     }
 113
 114     var testFragmentProgram = wtu.loadProgramFromScriptExpectError(gl, "vertexShaderESSL3", "fragmentShaderESSL3EXT");
 115     if (testFragmentProgram) {
 116         testFailed("gl_FragDepthEXT allowed in ESSL3 shader - should only allow gl_FragDepth");
 117     } else {
 118         testPassed("gl_FragDepthEXT disallowed in ESSL3 shader");
 119     }
 120 }
 121
 122 function runOutputTests() {
 123     debug("Testing rendering results from writing to gl_FragData");
 124
 125     canvas.width = 50; canvas.height = 50;
 126     gl.viewport(0, 0, canvas.width, canvas.height);
 127
 128     // Enable depth testing with a clearDepth of 0.5
 129     // This makes it so that fragments are only rendered when
 130     // gl_FragDepth is < 0.5
 131     gl.clearDepth(0.5);
 132     gl.enable(gl.DEPTH_TEST);
 133
 134     var positionLoc = 0;
 135     var texcoordLoc = 1;
 136     var program = wtu.setupProgram(gl, ["vertexShaderESSL3", "outputFragmentShader"], ['vPosition'], [0]);
 137     var quadParameters = wtu.setupUnitQuad(gl, 0, 1);
 138     var depthUniform = gl.getUniformLocation(program, "uDepth");
 139
 140     // Draw 1: Greater than clear depth
 141     gl.uniform1f(depthUniform, 1.0);
 142     wtu.clearAndDrawUnitQuad(gl);
 143     wtu.checkCanvas(gl, [255, 255, 255, 255]);
 144
 145     // Draw 2: Less than clear depth
 146     gl.uniform1f(depthUniform, 0.0);
 147     wtu.clearAndDrawUnitQuad(gl);
 148     wtu.checkCanvas(gl, [255, 0, 0, 255]);
 149 }
 150
 151 debug("");
 152 var successfullyParsed = true;
 153 </script>
 154 <script src="../../js/js-test-post.js"></script>
 155
 156 </body>
 157 </html>