dom/canvas/test/webgl-conf/checkout/conformance/buffers/vertex-buffer-updated-after-draw.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 Vertex Buffer Updated After Draw 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 <canvas id="example" width="50" height="50">
  18 </canvas>
  19 <div id="description"></div>
  20 <div id="console"></div>
  21 <script id="vshader" type="x-shader/x-vertex">
  22 attribute vec2 a_position;
  23 attribute vec4 a_color;
  24 varying vec4 v_outcolor;
  25 void main() {
  26   gl_Position = vec4(a_position, 0, 1);
  27   v_outcolor = a_color;
  28 }
  29 </script>
  30
  31 <script id="fshader" type="x-shader/x-fragment">
  32 varying mediump vec4 v_outcolor;
  33 void main() {
  34     gl_FragColor = v_outcolor;
  35 }
  36 </script>
  37
  38 <script>
  39 // Tests that D3D11 dirty bit updates don't forget about BufferSubData attrib updates.
  40 // Based on ANGLE test (StateChangeTest, VertexBufferUpdatedAfterDraw) from https://github.com/google/angle/blob/f7f0b8c3ab21c52cc2915048959361cf628d95f0/src/tests/gl_tests/StateChangeTest.cpp
  41 "use strict";
  42 var wtu = WebGLTestUtils;
  43 description();
  44
  45 var gl = wtu.create3DContext("example");
  46
  47 var program = wtu.setupProgram(gl, ['vshader', 'fshader']);
  48
  49 var colorLoc = gl.getAttribLocation(program, "a_color");
  50 var green = new Uint8Array(4 * 6);
  51 var red = new Uint8Array(4 * 6);
  52
  53 for (var i = 0; i < 6; ++i) {
  54   var ci = i * 4;
  55
  56   green[ci] = 0;
  57   red[ci] = 255;
  58
  59   green[ci + 1] = 255;
  60   red[ci + 1] = 0;
  61
  62   green[ci + 2] = red[ci + 2] = 0;
  63
  64   green[ci + 3] = red[ci + 3] = 255;
  65 }
  66
  67 var positionLoc = gl.getAttribLocation(program, "a_position");
  68
  69 var gridRes = 1;
  70 wtu.setupIndexedQuad(gl, gridRes, positionLoc);
  71
  72 var colorBuf = gl.createBuffer();
  73 gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
  74 gl.bufferData(gl.ARRAY_BUFFER, green, gl.STATIC_DRAW);
  75 gl.vertexAttribPointer(colorLoc, 4, gl.UNSIGNED_BYTE, true, 0, 0);
  76 gl.enableVertexAttribArray(colorLoc);
  77
  78 wtu.clearAndDrawIndexedQuad(gl, gridRes);
  79 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
  80
  81 gl.bufferSubData(gl.ARRAY_BUFFER, 0, red);
  82
  83 wtu.clearAndDrawIndexedQuad(gl, gridRes);
  84 wtu.checkCanvas(gl, [255, 0, 0, 255], "should be red");
  85
  86 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  87
  88 var successfullyParsed = true;
  89 </script>
  90 <script src="../../js/js-test-post.js"></script>
  91
  92 </body>
  93 </html>
  94