dom/canvas/test/webgl-conf/checkout/conformance2/rendering/draw-buffers-driver-hang.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 Draw Buffers Driver Hang Conformance Test</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" width="64" height="64"> </canvas>
  19 <div id="console"></div>
  20 <script id="vshader" type="x-shader/x-vertex">#version 300 es
  21 in vec4 a_position;
  22 void main() {
  23     gl_Position = a_position;
  24 }
  25 </script>
  26 <script id="fshader" type="x-shader/x-fragment">#version 300 es
  27 precision mediump float;
  28
  29 out vec4 my_FragColor;
  30 void main() {
  31     my_FragColor = vec4(1, 0, 0, 1);
  32 }
  33 </script>
  34 <script>
  35 "use strict";
  36 description("This is a regression test for a driver bug causing a hang in the driver and thereby the browser (crbug.com/696187).")
  37
  38 debug("Thanks to Andre Weissflog (@FlohOfWoe / @floooh) for this test.");
  39 debug("If the bug exists, this test doesn't fail or time out per the harness; the browser basically hangs.");
  40
  41 var wtu = WebGLTestUtils;
  42 var canvas = document.getElementById("canvas");
  43 var gl = wtu.create3DContext(canvas, { depth: true, stencil: true, alpha: false }, 2);
  44
  45 if (!gl) {
  46   testFailed("WebGL context does not exist");
  47 } else {
  48   testPassed("WebGL context exists");
  49
  50   runTest();
  51 }
  52
  53 function runTest() {
  54   // create a global VAO
  55   let vao = gl.createVertexArray();
  56   gl.bindVertexArray(vao);
  57
  58   // create a 3 MSAA 'offscreen render targets', each consisting of:
  59   //  - 1 color texture which will hold the MSAA resolve result
  60   //  - 1 MSAA color renderbuffer
  61   // plus one depth-stencil renderbuffer
  62   let tex0 = gl.createTexture();
  63   gl.activeTexture(gl.TEXTURE0);
  64   gl.bindTexture(gl.TEXTURE_2D, tex0);
  65   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 0);
  66   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  67   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  68   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  69   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  70   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 200, 200, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  71   let c_rb0 = gl.createRenderbuffer();
  72   gl.bindRenderbuffer(gl.RENDERBUFFER, c_rb0);
  73   gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, 200, 200);
  74   let ds_rb = gl.createRenderbuffer();
  75   gl.bindRenderbuffer(gl.RENDERBUFFER, ds_rb);
  76   gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.DEPTH24_STENCIL8, 200, 200);
  77
  78   // 2nd offscreen render target
  79   let tex1 = gl.createTexture();
  80   gl.activeTexture(gl.TEXTURE0);
  81   gl.bindTexture(gl.TEXTURE_2D, tex1);
  82   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 0);
  83   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  84   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  85   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  86   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  87   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 200, 200, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  88   let c_rb1 = gl.createRenderbuffer();
  89   gl.bindRenderbuffer(gl.RENDERBUFFER, c_rb1);
  90   gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, 200, 200);
  91
  92   // 3rd offscreen render target
  93   let tex2 = gl.createTexture();
  94   gl.activeTexture(gl.TEXTURE0);
  95   gl.bindTexture(gl.TEXTURE_2D, tex2);
  96   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 0);
  97   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  98   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  99   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 100   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 101   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 200, 200, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
 102   let c_rb2 = gl.createRenderbuffer();
 103   gl.bindRenderbuffer(gl.RENDERBUFFER, c_rb2);
 104   gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, 200, 200);
 105
 106   // an MRT framebuffer with the 3 MSAA renderbuffers and MSAA depth/stencil attachments
 107   let mrt_fb = gl.createFramebuffer();
 108   gl.bindFramebuffer(gl.FRAMEBUFFER, mrt_fb);
 109   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, c_rb0);
 110   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.RENDERBUFFER, c_rb1);
 111   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.RENDERBUFFER, c_rb2);
 112   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ds_rb);
 113   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.STENCIL_ATTACHMENT, gl.RENDERBUFFER, ds_rb);
 114   gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 115
 116   // 3 'MSAA resolve framebuffers' which are the target for the MSAA-resolve-blit,
 117   // with the 3 color textures as color attachments
 118   let res_fb0 = gl.createFramebuffer();
 119   gl.bindFramebuffer(gl.FRAMEBUFFER, res_fb0);
 120   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex0, 0);
 121   gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 122   let res_fb1 = gl.createFramebuffer();
 123   gl.bindFramebuffer(gl.FRAMEBUFFER, res_fb1);
 124   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, tex1, 0);
 125   gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 126   let res_fb2 = gl.createFramebuffer();
 127   gl.bindFramebuffer(gl.FRAMEBUFFER, res_fb2);
 128   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, tex2, 0);
 129   let frameNumber = 0;
 130
 131   function draw() {
 132     // draw one frame
 133     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 134     gl.viewport(0, 0, 1024, 768);
 135
 136   //--- BEGIN: comment out the block begin BEGIN/END to make the demo run
 137     // clear the 3 MSAA offscreen color renderbuffers and depth/stencil renderbuffer
 138     gl.bindFramebuffer(gl.FRAMEBUFFER, mrt_fb);
 139     gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);
 140     gl.viewport(0, 0, 200, 200);
 141     gl.depthMask(true);
 142     gl.clearBufferfv(gl.COLOR, 0, [0.25,0.0,0.0,1.0]);
 143     gl.clearBufferfv(gl.COLOR, 1, [0.0,0.25,0.0,1.0]);
 144     gl.clearBufferfv(gl.COLOR, 2, [0.0,0.0,0.25,1.0]);
 145     gl.clearBufferfi(gl.DEPTH_STENCIL, 0, 1.0, 0);
 146
 147     // the MSAA resolve operation
 148     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, mrt_fb);
 149     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, res_fb0);
 150     gl.readBuffer(gl.COLOR_ATTACHMENT0);
 151     gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
 152     gl.blitFramebuffer(0, 0, 200, 200, 0, 0, 200, 200, gl.COLOR_BUFFER_BIT, gl.NEAREST);
 153     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, res_fb1);
 154     gl.readBuffer(gl.COLOR_ATTACHMENT1);
 155     gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
 156     gl.blitFramebuffer(0, 0, 200, 200, 0, 0, 200, 200, gl.COLOR_BUFFER_BIT, gl.NEAREST);
 157     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, res_fb2);
 158     gl.readBuffer(gl.COLOR_ATTACHMENT2);
 159     gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
 160     gl.blitFramebuffer(0, 0, 200, 200, 0, 0, 200, 200, gl.COLOR_BUFFER_BIT, gl.NEAREST);
 161 //--- END
 162
 163     // bind and clear the default framebuffer
 164     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 165     gl.viewport(0, 0, 1024, 768);
 166     gl.clearColor(0.5, 0.5, 0.5, 1.0);
 167     gl.clearDepth(1.0);
 168     gl.clearStencil(0);
 169     gl.clear(gl.COLOR_BUFFER_BIT|gl.STENCIL_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
 170
 171     if (++frameNumber < 10) {
 172       requestAnimationFrame(draw);
 173     } else {
 174       finishTest();
 175     }
 176   }
 177
 178   // Start the rendering loop
 179   draw();
 180 }
 181
 182 debug("");
 183 var successfullyParsed = true;
 184 </script>
 185
 186 </body>
 187 </html>