LayoutTests/webgl/1.0.3/resources/webgl_test_files/extra/webgl-drawelements-validation.html - WebKit - Git at Google

 <!--

 /*
 ** Copyright (c) 2014 The Khronos Group Inc.
 **
 ** Permission is hereby granted, free of charge, to any person obtaining a
 ** copy of this software and/or associated documentation files (the
 ** "Materials"), to deal in the Materials without restriction, including
 ** without limitation the rights to use, copy, modify, merge, publish,
 ** distribute, sublicense, and/or sell copies of the Materials, and to
 ** permit persons to whom the Materials are furnished to do so, subject to
 ** the following conditions:
 **
 ** The above copyright notice and this permission notice shall be included
 ** in all copies or substantial portions of the Materials.
 **
 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
 */

 -->

 <!DOCTYPE html>
 <html>
 <head>
 <title>Micro-benchmark for WebGL drawElements index validation</title>
 <style>
 canvas {
     border: 1px solid #000;
 }
 </style>
 <script src="../conformance/resources/webgl-test-utils.js"></script>
 <script type="text/javascript">
 "use strict";

 var wtu = WebGLTestUtils;

 var totalTimeTest1 = 0;
 var totalTimeTest2 = 0;
 var totalTimeTest3 = 0;
 var iterationsLeft = 10; // How many times to run the full test.
 var indexCount = 500001; // Divisible by 3.

 var indices = [];
 for (var i = 0; i < indexCount - 1; ++i) {
     indices.push(0);
     indices.push(1);
     indices.push(2);
     indices.push(3);
 }
 indices.push(4);

 var fullIndicesArray = new Uint16Array(indices);

 var drawIterations = 50;

 var errorsCorrect = true;

 var log = function(msg) {
     console.log(msg);
     var p = document.createElement('p');
     p.textContent = msg;
     document.body.appendChild(p);
 };

 var runTestIteration = function() {
     var canvas = document.createElement('canvas');
     canvas.width = 10;
     canvas.height = 10;
     var gl = wtu.create3DContext(canvas);
     document.body.appendChild(canvas);

     var location = 0;
     wtu.setupSimpleColorProgram(gl, location);

     var verts = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, verts);
     var vertData = new Float32Array([-1, -1,
                                      -1, 1,
                                      1, -1,
                                      1, 1]);
     gl.bufferData(gl.ARRAY_BUFFER, vertData, gl.STATIC_DRAW);
     gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(location);

     var indexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, fullIndicesArray, gl.DYNAMIC_DRAW);
     gl.finish();

     var measureTime = function(f) {
         var startTime = new Date().getTime();
         f();
         var error = gl.getError();
         var endTime = new Date().getTime();
         errorsCorrect = errorsCorrect && error == gl.INVALID_OPERATION;
         return endTime - startTime;
     };

     // The buffer has at least one out-of-range index from the start,
     // so only validation will happen, not drawing.

     totalTimeTest1 += measureTime(function() {
         for (var i = 0; i < drawIterations; ++i) {
             // Change all data, which will cause complete revalidation of the index buffer.
             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, fullIndicesArray);
             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
         }
     });

     totalTimeTest2 += measureTime(function() {
         for (var i = 0; i < drawIterations; ++i) {
             // Change only one index and vary the amount of referenced indices.
             // These should not be a big problem to a smart implementation.
             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, Math.floor(indices.length / 2), new Uint16Array([i + 5]));
             gl.drawElements(gl.TRIANGLES, indices.length - i * 3, gl.UNSIGNED_SHORT, 0);
         }
     });

     totalTimeTest3 += measureTime(function() {
         for (var i = 0; i < drawIterations; ++i) {
             // Change data at two indices to cause completely revalidating the index buffer in
             // current implementations in Chrome and Firefox (as of March 17th 2014).
             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, new Uint16Array([i + 5]));
             gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, indices.length - 1, new Uint16Array([i + 5]));
             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
         }
     });

     setTimeout(function() {
         var lose = gl.getExtension('WEBGL_lose_context');
         lose.loseContext();
     }, 40);
 };

 var runTest = function() {
     if (iterationsLeft > 0) {
         runTestIteration();
         --iterationsLeft;
         setTimeout(runTest, 500);
     } else {
         log("Validation returned correct results: " + errorsCorrect);
         log('1. Time spent on full buffer updates: ' + totalTimeTest1 + ' ms');
         log('Indices uploaded and referenced by draw calls processed: ' + Math.round(indices.length * drawIterations / totalTimeTest1) + ' / ms');
         log('2. Time spent on validating single index updates while range referenced also changes on every draw call: ' + totalTimeTest2 + ' ms');
         log('Indices referenced by draw calls handled: ' + Math.round(indices.length * drawIterations / totalTimeTest2) + ' / ms');
         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');
         log('Indices referenced by draw calls handled: ' + Math.round(indices.length * drawIterations / totalTimeTest3) + ' / ms');
     }
 };
 </script>
 </head>
 <body onload="setTimeout(runTest, 100)">
 <h1>Micro-benchmark for WebGL drawElements index validation</h1>
 <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>
 <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>
 </body>
 </html>
	<!--

	/*
	** Copyright (c) 2014 The Khronos Group Inc.
	**
	** Permission is hereby granted, free of charge, to any person obtaining a
	** copy of this software and/or associated documentation files (the
	** "Materials"), to deal in the Materials without restriction, including
	** without limitation the rights to use, copy, modify, merge, publish,
	** distribute, sublicense, and/or sell copies of the Materials, and to
	** permit persons to whom the Materials are furnished to do so, subject to
	** the following conditions:
	**
	** The above copyright notice and this permission notice shall be included
	** in all copies or substantial portions of the Materials.
	**
	** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
	** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
	** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
	** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
	** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
	** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
	*/

	-->

	<!DOCTYPE html>
	<html>
	<head>
	<title>Micro-benchmark for WebGL drawElements index validation</title>
	<style>
	canvas {
	border: 1px solid #000;
	}
	</style>
	<script src="../conformance/resources/webgl-test-utils.js"></script>
	<script type="text/javascript">
	"use strict";

	var wtu = WebGLTestUtils;

	var totalTimeTest1 = 0;
	var totalTimeTest2 = 0;
	var totalTimeTest3 = 0;
	var iterationsLeft = 10; // How many times to run the full test.
	var indexCount = 500001; // Divisible by 3.

	var indices = [];
	for (var i = 0; i < indexCount - 1; ++i) {
	indices.push(0);
	indices.push(1);
	indices.push(2);
	indices.push(3);
	}
	indices.push(4);

	var fullIndicesArray = new Uint16Array(indices);

	var drawIterations = 50;

	var errorsCorrect = true;

	var log = function(msg) {
	console.log(msg);
	var p = document.createElement('p');
	p.textContent = msg;
	document.body.appendChild(p);
	};

	var runTestIteration = function() {
	var canvas = document.createElement('canvas');
	canvas.width = 10;
	canvas.height = 10;
	var gl = wtu.create3DContext(canvas);
	document.body.appendChild(canvas);

	var location = 0;
	wtu.setupSimpleColorProgram(gl, location);

	var verts = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, verts);
	var vertData = new Float32Array([-1, -1,
	-1, 1,
	1, -1,
	1, 1]);
	gl.bufferData(gl.ARRAY_BUFFER, vertData, gl.STATIC_DRAW);
	gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(location);

	var indexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, fullIndicesArray, gl.DYNAMIC_DRAW);
	gl.finish();

	var measureTime = function(f) {
	var startTime = new Date().getTime();
	f();
	var error = gl.getError();
	var endTime = new Date().getTime();
	errorsCorrect = errorsCorrect && error == gl.INVALID_OPERATION;
	return endTime - startTime;
	};

	// The buffer has at least one out-of-range index from the start,
	// so only validation will happen, not drawing.

	totalTimeTest1 += measureTime(function() {
	for (var i = 0; i < drawIterations; ++i) {
	// Change all data, which will cause complete revalidation of the index buffer.
	gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, fullIndicesArray);
	gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
	}
	});

	totalTimeTest2 += measureTime(function() {
	for (var i = 0; i < drawIterations; ++i) {
	// Change only one index and vary the amount of referenced indices.
	// These should not be a big problem to a smart implementation.
	gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, Math.floor(indices.length / 2), new Uint16Array([i + 5]));
	gl.drawElements(gl.TRIANGLES, indices.length - i * 3, gl.UNSIGNED_SHORT, 0);
	}
	});

	totalTimeTest3 += measureTime(function() {
	for (var i = 0; i < drawIterations; ++i) {
	// Change data at two indices to cause completely revalidating the index buffer in
	// current implementations in Chrome and Firefox (as of March 17th 2014).
	gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, new Uint16Array([i + 5]));
	gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, indices.length - 1, new Uint16Array([i + 5]));
	gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
	}
	});

	setTimeout(function() {
	var lose = gl.getExtension('WEBGL_lose_context');
	lose.loseContext();
	}, 40);
	};

	var runTest = function() {
	if (iterationsLeft > 0) {
	runTestIteration();
	--iterationsLeft;
	setTimeout(runTest, 500);
	} else {
	log("Validation returned correct results: " + errorsCorrect);
	log('1. Time spent on full buffer updates: ' + totalTimeTest1 + ' ms');
	log('Indices uploaded and referenced by draw calls processed: ' + Math.round(indices.length * drawIterations / totalTimeTest1) + ' / ms');
	log('2. Time spent on validating single index updates while range referenced also changes on every draw call: ' + totalTimeTest2 + ' ms');
	log('Indices referenced by draw calls handled: ' + Math.round(indices.length * drawIterations / totalTimeTest2) + ' / ms');
	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');
	log('Indices referenced by draw calls handled: ' + Math.round(indices.length * drawIterations / totalTimeTest3) + ' / ms');
	}
	};
	</script>
	</head>
	<body onload="setTimeout(runTest, 100)">
	<h1>Micro-benchmark for WebGL drawElements index validation</h1>
	<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>
	<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>
	</body>
	</html>