src/third_party/webgl/src/sdk/tests/extra/webgl-drawelements-validation.html

   1 <!--
   2
   3 /*
   4 ** Copyright (c) 2014 The Khronos Group Inc.
   5 **
   6 ** Permission is hereby granted, free of charge, to any person obtaining a
   7 ** copy of this software and/or associated documentation files (the
   8 ** "Materials"), to deal in the Materials without restriction, including
   9 ** without limitation the rights to use, copy, modify, merge, publish,
  10 ** distribute, sublicense, and/or sell copies of the Materials, and to
  11 ** permit persons to whom the Materials are furnished to do so, subject to
  12 ** the following conditions:
  13 **
  14 ** The above copyright notice and this permission notice shall be included
  15 ** in all copies or substantial portions of the Materials.
  16 **
  17 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  18 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  19 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  20 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
  21 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
  22 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  23 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
  24 */
  25
  26 -->
  27
  28 <!DOCTYPE html>
  29 <html>
  30 <head>
  31 <title>Micro-benchmark for WebGL drawElements index validation</title>
  32 <style>
  33 canvas {
  34     border: 1px solid #000;
  35 }
  36 </style>
  37 <script src="../conformance/resources/webgl-test-utils.js"></script>
  38 <script type="text/javascript">
  39 "use strict";
  40
  41 var wtu = WebGLTestUtils;
  42
  43 var totalTimeTest1 = 0;
  44 var totalTimeTest2 = 0;
  45 var totalTimeTest3 = 0;
  46 var iterationsLeft = 10; // How many times to run the full test.
  47 var indexCount = 500001; // Divisible by 3.
  48
  49 var indices = [];
  50 for (var i = 0; i < indexCount - 1; ++i) {
  51     indices.push(0);
  52     indices.push(1);
  53     indices.push(2);
  54     indices.push(3);
  55 }
  56 indices.push(4);
  57
  58 var fullIndicesArray = new Uint16Array(indices);
  59
  60 var drawIterations = 50;
  61
  62 var errorsCorrect = true;
  63
  64 var log = function(msg) {
  65     console.log(msg);
  66     var p = document.createElement('p');
  67     p.textContent = msg;
  68     document.body.appendChild(p);
  69 };
  70
  71 var runTestIteration = function() {
  72     var canvas = document.createElement('canvas');
  73     canvas.width = 10;
  74     canvas.height = 10;
  75     var gl = wtu.create3DContext(canvas);
  76     document.body.appendChild(canvas);
  77
  78     var location = 0;
  79     wtu.setupSimpleColorProgram(gl, location);
  80
  81     var verts = gl.createBuffer();
  82     gl.bindBuffer(gl.ARRAY_BUFFER, verts);
  83     var vertData = new Float32Array([-1, -1,
  84                                      -1, 1,
  85                                      1, -1,
  86                                      1, 1]);
  87     gl.bufferData(gl.ARRAY_BUFFER, vertData, gl.STATIC_DRAW);
  88     gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
  89     gl.enableVertexAttribArray(location);
  90
  91     var indexBuffer = gl.createBuffer();
  92     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  93     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, fullIndicesArray, gl.DYNAMIC_DRAW);
  94     gl.finish();
  95
  96     var measureTime = function(f) {
  97         var startTime = new Date().getTime();
  98         f();
  99         var error = gl.getError();
 100         var endTime = new Date().getTime();
 101         errorsCorrect = errorsCorrect && error == gl.INVALID_OPERATION;
 102         return endTime - startTime;
 103     };
 104
 105     // The buffer has at least one out-of-range index from the start,
 106     // so only validation will happen, not drawing.
 107
 108     totalTimeTest1 += measureTime(function() {
 109         for (var i = 0; i < drawIterations; ++i) {
 110             // Change all data, which will cause complete revalidation of the index buffer.
 111             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, fullIndicesArray);
 112             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
 113         }
 114     });
 115
 116     totalTimeTest2 += measureTime(function() {
 117         for (var i = 0; i < drawIterations; ++i) {
 118             // Change only one index and vary the amount of referenced indices.
 119             // These should not be a big problem to a smart implementation.
 120             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, Math.floor(indices.length / 2), new Uint16Array([i + 5]));
 121             gl.drawElements(gl.TRIANGLES, indices.length - i * 3, gl.UNSIGNED_SHORT, 0);
 122         }
 123     });
 124
 125     totalTimeTest3 += measureTime(function() {
 126         for (var i = 0; i < drawIterations; ++i) {
 127             // Change data at two indices to cause completely revalidating the index buffer in
 128             // current implementations in Chrome and Firefox (as of March 17th 2014).
 129             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, new Uint16Array([i + 5]));
 130             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, indices.length - 1, new Uint16Array([i + 5]));
 131             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
 132         }
 133     });
 134
 135     setTimeout(function() {
 136         var lose = gl.getExtension('WEBGL_lose_context');
 137         lose.loseContext();
 138     }, 40);
 139 };
 140
 141 var runTest = function() {
 142     if (iterationsLeft > 0) {
 143         runTestIteration();
 144         --iterationsLeft;
 145         setTimeout(runTest, 500);
 146     } else {
 147         log("Validation returned correct results: " + errorsCorrect);
 148         log('1. Time spent on full buffer updates: ' + totalTimeTest1 + ' ms');
 149         log('Indices uploaded and referenced by draw calls processed: ' + Math.round(indices.length * drawIterations / totalTimeTest1) + ' / ms');
 150         log('2. Time spent on validating single index updates while range referenced also changes on every draw call: ' + totalTimeTest2 + ' ms');
 151         log('Indices referenced by draw calls handled: ' + Math.round(indices.length * drawIterations / totalTimeTest2) + ' / ms');
 152         log('3. Time spent on validating single index updates at each end of the buffer (worst case for Firefox implementation as of March 2014, not reflective of real world performance): ' + totalTimeTest3 + ' ms');
 153         log('Indices referenced by draw calls handled: ' + Math.round(indices.length * drawIterations / totalTimeTest3) + ' / ms');
 154     }
 155 };
 156 </script>
 157 </head>
 158 <body onload="setTimeout(runTest, 100)">
 159 <h1>Micro-benchmark for WebGL drawElements index validation</h1>
 160 <p>Note that these test cases are completely artificial, and their results only very rough indicators of the performance of a specific part of the system.</p>
 161 <p>The benchmark does not perform any drawing, but rather measures the time the browser takes to upload indices and to check if there are out-of-range indices.</p>
 162 </body>
 163 </html>