dom/canvas/test/webgl-conf/checkout/conformance/rendering/bind-framebuffer-flush-bug.html

   1 <!--
   2 Copyright (c) 2020 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 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  12 <script src="../../js/js-test-pre.js"></script>
  13 <script src="../../js/webgl-test-utils.js"></script>
  14 <script>
  15 "use strict";
  16 const wtu = WebGLTestUtils;
  17
  18 function runTest() {
  19     let canvas = document.createElement('canvas');
  20     document.body.appendChild(canvas);
  21     const gl = wtu.create3DContext(canvas);
  22     if (!gl) {
  23         testFailed('could not create context');
  24         return;
  25     }
  26     const size = 100;
  27
  28     debug('Setup');
  29     canvas.width = size;
  30     canvas.height = size;
  31
  32     const texture = gl.createTexture();
  33     gl.bindTexture(gl.TEXTURE_2D, texture);
  34     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  35     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  36     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  37     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  38     gl.bindTexture(gl.TEXTURE_2D, texture);
  39     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  40
  41     const backbuffer = gl.createFramebuffer();
  42     gl.bindFramebuffer(gl.FRAMEBUFFER, backbuffer);
  43     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  44
  45     const vertexBuffer = gl.createBuffer();
  46     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  47     gl.bufferData(gl.ARRAY_BUFFER, 32, gl.DYNAMIC_DRAW);
  48     gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array([
  49         1, 1,
  50         1, -1,
  51         -1, 1,
  52         -1, -1,
  53     ]));
  54     gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 8, 0);
  55     gl.enableVertexAttribArray(0);
  56
  57     const blitTextureProgram = gl.createProgram();
  58     const blitTextureVertex = gl.createShader(gl.VERTEX_SHADER);
  59     gl.shaderSource(blitTextureVertex, `
  60         precision mediump float;
  61         attribute vec2 pos;
  62         varying vec2 uv;
  63         void main(){
  64             uv = (pos + vec2(1.0)) / 2.0;
  65             gl_Position=vec4(pos*2.-1.,0.,1.);
  66         }
  67     `);
  68     gl.compileShader(blitTextureVertex);
  69     gl.attachShader(blitTextureProgram, blitTextureVertex);
  70     const blitTextureFragment = gl.createShader(gl.FRAGMENT_SHADER);
  71     gl.shaderSource(blitTextureFragment, `
  72         precision mediump float;
  73         uniform sampler2D texture;
  74         varying vec2 uv;
  75         void main(){
  76             gl_FragColor=texture2D(texture, uv);
  77         }
  78     `);
  79     gl.compileShader(blitTextureFragment);
  80     gl.attachShader(blitTextureProgram, blitTextureFragment);
  81     gl.linkProgram(blitTextureProgram);
  82
  83     const solidColorProgram = gl.createProgram();
  84     const solidColorVertex = gl.createShader(gl.VERTEX_SHADER);
  85     gl.shaderSource(solidColorVertex, `
  86         precision mediump float;
  87         attribute vec2 pos;
  88         void main(){
  89             gl_Position=vec4(pos,0.,1.);
  90         }
  91     `);
  92     gl.compileShader(solidColorVertex);
  93     gl.attachShader(solidColorProgram, solidColorVertex);
  94     const solidColorFragment = gl.createShader(gl.FRAGMENT_SHADER);
  95     gl.shaderSource(solidColorFragment, `
  96         precision mediump float;
  97         void main(){
  98             gl_FragColor=vec4(0.,0.,1.,1.);
  99         }
 100     `);
 101     gl.compileShader(solidColorFragment);
 102     gl.attachShader(solidColorProgram, solidColorFragment);
 103     gl.bindAttribLocation(solidColorProgram, 0, "pos");
 104     gl.linkProgram(solidColorProgram);
 105     gl.clearColor(1, 0, 0, 1);
 106
 107     debug('Drawing');
 108     // Draw blue rectangle to backbuffer texture
 109     gl.bindFramebuffer(gl.FRAMEBUFFER, backbuffer);
 110     gl.useProgram(solidColorProgram);
 111     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 112
 113     // Blit backbuffer texture to screen
 114     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 115     gl.useProgram(blitTextureProgram);
 116     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 117
 118     // Clear backbuffer texture to red
 119     gl.bindFramebuffer(gl.FRAMEBUFFER, backbuffer);
 120     gl.clear(gl.COLOR_BUFFER_BIT);
 121
 122     // Blit backbuffer texture to screen
 123     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 124     gl.useProgram(blitTextureProgram);
 125     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 126
 127     debug('Expected: canvas should be red');
 128     debug('Buggy: canvas is blue');
 129     wtu.checkCanvasRect(gl, 0, 0, 1, 1, [255, 0, 0], 'should be red');
 130 }
 131 </script>
 132 </head>
 133 <body>
 134 <div id="description"></div>
 135 <div id="console"></div>
 136 <script>
 137 "use strict";
 138 description('Verifies workaround for bug in Intel drivers where clear and drawArrays calls are reordered across bindFramebuffer.');
 139 debug('Regression test for <a href="http://crbug.com/1018028">http://crbug.com/1018028</a>');
 140 runTest();
 141 var successfullyParsed = true;
 142 </script>
 143 <script src="../../js/js-test-post.js"></script>
 144
 145 </body>
 146 </html>