diff options
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/extra')
39 files changed, 4636 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/extra/50x50pixel-black-with-red-triangle.png b/dom/canvas/test/webgl-conf/checkout/extra/50x50pixel-black-with-red-triangle.png Binary files differnew file mode 100644 index 0000000000..4ec9751070 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/50x50pixel-black-with-red-triangle.png diff --git a/dom/canvas/test/webgl-conf/checkout/extra/big-fbos-example.html b/dom/canvas/test/webgl-conf/checkout/extra/big-fbos-example.html new file mode 100644 index 0000000000..0e0a09bcef --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/big-fbos-example.html @@ -0,0 +1,256 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Big FBO Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../../devtools/src/debug/webgl-debug.js"></script> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<canvas id="canvas" width="256" height="256"> </canvas> +<div id="description"></div> +<div id="console"></div> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec4 vPosition; +attribute vec2 texCoord0; +varying vec2 texCoord; +void main() +{ + gl_Position = vec4(vPosition.xyz, 1.0); + texCoord = texCoord0; +} +</script> + +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; +uniform sampler2D tex; +varying vec2 texCoord; +void main() +{ + gl_FragColor = texture2D(tex, texCoord); +} +</script> +<script> +"use strict"; +window.onload = init; + +var g_textures = []; + +debug("Tests the performance of using lots of large FBOs"); + +function init() { + if (confirm( + "After clicking OK your machine may become unresponsive or crash.")) { + main(); + } else { + debug("cancelled"); + } +} + +function checkFBOStatus(gl) { + var err = gl.getError(); + if (err != gl.NO_ERROR) { + if (err != gl.OUT_OF_MEMORY) + testFailed("gl.getError returned " + err); + else + testPassed("OUT-OF-MEMORY"); + return false; + } + var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); + if (status != gl.FRAMEBUFFER_COMPLETE) { + testFailed("gl.checkFramebufferStatus() returned " + WebGLTestUtils.glEnumToString(gl, status)); + return false; + } + return true; +} + +function setupFBO(gl, size) { + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + + var fb = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, fb); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); + + gl.texImage2D(gl.TEXTURE_2D, + 0, // level + gl.RGBA, // internalFormat + size, // width + size, // height + 0, // border + gl.RGBA, // format + gl.UNSIGNED_BYTE, // type + null); // data + if (!checkFBOStatus(gl)) + return null; + + return { fb: fb, tex: tex }; +} + +function checkPixels(gl) { + var width = 256; + var height = 256; + + var thresh = 3; + + var buf = new Uint8Array(width * height * 4); + gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); + for (var yy = 0; yy < height; ++yy) { + for (var xx = 0; xx < width; ++xx) { + var offset = (yy * width + xx) * 4; + if (Math.abs(buf[offset] - 255) > thresh || + Math.abs(buf[offset + 1] - 0) > thresh || + Math.abs(buf[offset + 2] - 0) > thresh) { + testFailed("drawing results incorrect"); + return false; + } + } + } + return true; +} + +function handleContextLost() { + debug("context lost"); +} + +function main() { + debug(""); + debug("Checking for out of memory handling."); + + var canvas = document.getElementById("canvas"); + canvas.addEventListener('webglcontextlost', handleContextLost); + var wtu = WebGLTestUtils; + var gl = wtu.create3DContext("canvas"); + var prog = wtu.setupProgram(gl, ["vshader", "fshader"], ["vPosition", "texCoord0"]); + + WebGLDebugUtils.init(gl); + + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.BLEND); + + var vertexObject = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ + -1,1,0, 1,1,0, -1,-1,0, + -1,-1,0, 1,1,0, 1,-1,0 + ]), gl.STATIC_DRAW); + gl.enableVertexAttribArray(0); + gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); + + var vertexObject = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0, 1,0, 0,1, + 0,1, 1,0, 1,1 + ]), gl.STATIC_DRAW); + gl.enableVertexAttribArray(1); + gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0); + + var texLoc = gl.getUniformLocation(prog, "tex"); + gl.uniform1i(texLoc, 0); + + gl.clearColor(0, 0, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "setup should succeed"); + + var size = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE); + debug("max render buffer size: " + size + + ", size used: " + (size / 2)); + size /= 2; + + var maxFBOs = 200; + var numFBOs = 0; + allocateNextFBO(); + + function allocateNextFBO() { + if (numFBOs >= maxFBOs) { + phase2(); + return; + } + if (!allocateFBO()) { + phase2(); + return; + } + ++numFBOs; + setTimeout(allocateNextFBO, 100); + } + + function allocateFBO() { + debug(""); + debug("trying to create fbo #" + (numFBOs + 1)); + var t = setupFBO(gl, 2); + if (!t) { + return false; + } + + var tex = t.tex; + var fb = t.fb; + + debug("allocating fbo color buffer of size " + size + " x " + size); + gl.texImage2D(gl.TEXTURE_2D, + 0, // level + gl.RGBA, // internalFormat + size, // width + size, // height + 0, // border + gl.RGBA, // format + gl.UNSIGNED_BYTE, // type + null); // data + if (!checkFBOStatus(gl)) { + return false; + } + g_textures.push(tex); + debug("succeeded in creating fbo"); + + debug("clearing the fbo with red color"); + gl.bindFramebuffer(gl.FRAMEBUFFER, fb); + gl.clearColor(1, 0, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + + debug("deleting fbo, but the now red texture should be untouched"); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + gl.deleteFramebuffer(fb); + + debug("drawing to the canvas using the red texture"); + gl.clearColor(0, 0, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + gl.drawArrays(gl.TRIANGLES, 0, 6); + if (!checkPixels(gl)) { + return false; + } + + debug("succeeded in drawing"); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "each run with no error"); + return true; + } + + function phase2() { + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + debug(""); + debug("fbos allocated:" + numFBOs); + if (!checkPixels(gl)) { + testFailed("final check of canvas drawing buffer pixels failed"); + } + debug(""); + finishTest(); + } +} + +var successfullyParsed = true; +</script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/buffer-gc-stress.html b/dom/canvas/test/webgl-conf/checkout/extra/buffer-gc-stress.html new file mode 100644 index 0000000000..86056747e2 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/buffer-gc-stress.html @@ -0,0 +1,155 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Float32Array garbage collection test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<canvas id="canvas" width="40" height="40"></canvas> +<div id="description"></div> +<div id="console"></div> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec2 inPosition; +attribute vec4 inColor; + +varying vec4 color; + +void main() +{ + color = inColor; + + gl_Position = vec4(inPosition, 0.0, 1.0); +} +</script> +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; + +varying vec4 color; + +void main() +{ + if (color == vec4(0.0)) + discard; + + gl_FragColor = color; +} +</script> + +<script> +"use strict"; + +description("Allocates a buffer object and then updates it repeatedly using throw-away Float32Array objects. " + + "Ideally, this should not result in a browser crash or instability, since GC should be able to collect all Float32Arrays."); +var wtu = WebGLTestUtils; + +var vertices = []; +var w = 0.25; +for (var x = -1; x < 1; x += w) { + for (var y = -1; y < 1; y += w) { + vertices.push(x + w, y + w); + vertices.push(x, y + w); + vertices.push(x, y ); + + vertices.push(x + w, y + w); + vertices.push(x, y ); + vertices.push(x + w, y ); + } +} +var numVertices = (vertices.length / 2); + +var gl; +var squareBuffer; +var buffer; +var updateBufferData; +var drawIterationsPerTest = 100; + +function initGL() { + gl = wtu.create3DContext("canvas"); + var attribs = ["inPosition", "inColor"]; + wtu.setupProgram(gl, ["vshader", "fshader"], attribs); + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.BLEND); + + squareBuffer = gl.createBuffer(); + gl.enableVertexAttribArray(0); + gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); + gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); + + buffer = gl.createBuffer(); + gl.enableVertexAttribArray(1); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0); +} + +var testIndex = -1; +var drawIterations = 0; +var size = 0; +function runNextTest() { + ++testIndex; + var prevSize = size; + size = Math.pow(2, testIndex) * numVertices * 16; + + if (size > 2 * 1024 * 1024 && prevSize <= 2 * 1024 * 1024) { + if (!confirm("The following tests can cause unresponsiveness or instability. Press OK to continue.")) { + testFailed("Tests aborted"); + return; + } + } + + if (size > 64 * 1024 * 1024) { + gl.deleteBuffer(buffer); + testPassed("Tests finished"); + return; + } + + debug('Initializing buffer with size: ' + size); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, size, gl.DYNAMIC_DRAW); + updateBufferData = new Float32Array(size / 4); + + debug("Drawing " + drawIterationsPerTest + " times, each time creating a new throw-away Float32Array of size " + size + " and using it to update the buffer"); + drawIterations = 0; + doDraw(); +}; + +var doDraw = function() { + gl.clearColor(0, 255, 0, 255); + gl.clear(gl.COLOR_BUFFER_BIT); + + // Update the array buffer with a throw-away Float32Array + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(updateBufferData)); + + gl.drawArrays(gl.TRIANGLES, 0, numVertices); + var error = gl.getError(); + if (error !== gl.NO_ERROR) { + testFailed("drawArrays failed with error " + wtu.glEnumToString(gl, error)); + return; + } + if (drawIterations < drawIterationsPerTest) { + ++drawIterations; + requestAnimationFrame(doDraw); + } else { + runNextTest(); + } +}; + +initGL(); +runNextTest(); + +var successfullyParsed = true; +</script> + +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/buffer-sizes.html b/dom/canvas/test/webgl-conf/checkout/extra/buffer-sizes.html new file mode 100644 index 0000000000..736c135b7a --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/buffer-sizes.html @@ -0,0 +1,268 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Buffer allocation test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<div id="canvasParent"></div> +<div id="description"></div> +<div id="console"></div> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec2 inPosition; +attribute vec4 inColor0; +attribute vec4 inColor1; +attribute vec4 inColor2; +attribute vec4 inColor3; +attribute vec4 inColor4; +attribute vec4 inColor5; +attribute vec4 inColor6; +attribute vec4 inColor7; + +varying vec4 color; + +void main() +{ + color = abs(inColor0) + abs(inColor1) + abs(inColor2) + abs(inColor3) + + abs(inColor4) + abs(inColor5) + abs(inColor6) + abs(inColor7); + + color = clamp(color, vec4(0.0), vec4(1.0)); + + gl_Position = vec4(inPosition, 0.0, 1.0); +} +</script> +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; + +varying vec4 color; + +void main() +{ + if (color == vec4(0.0)) + discard; + + gl_FragColor = color; +} +</script> + +<script> +description("Allocates a number of different sized buffers and checks that the buffers are cleared " + + "OR that the allocation results in gl.OUT_OF_MEMORY or context loss."); +var wtu = WebGLTestUtils; + +// The shader processes eight vec4 attributes at once to reduce the amount of +// draw calls. +var numColorAttrs = 8; + +// Process 64 squares at once to also reduce the amount of draw calls. +var vertices = []; +var w = 0.25; +for (var x = -1; x < 1; x += w) { + for (var y = -1; y < 1; y += w) { + vertices.push(x + w, y + w); + vertices.push(x, y + w); + vertices.push(x, y ); + + vertices.push(x + w, y + w); + vertices.push(x, y ); + vertices.push(x + w, y ); + } +} +var numVertices = (vertices.length / 2); + +var gl; +var squareBuffer; +var error = 0; +var expectContextLost = false; + +function initGLForBufferSizesTest() { + var canvas = document.createElement("canvas"); + canvas.width = 40; + canvas.height = 40; + var parent = document.getElementById("canvasParent"); + parent.innerHTML = ''; + parent.appendChild(canvas); + gl = wtu.create3DContext(canvas); + var attribs = ["inPosition", "inColor0", "inColor1", "inColor2", "inColor3", + "inColor4", "inColor5", "inColor6", "inColor7"]; + wtu.setupProgram(gl, ["vshader", "fshader"], attribs); + gl.enableVertexAttribArray(0); + for (var i = 0; i < numColorAttrs; i++) { + gl.enableVertexAttribArray(1 + i); + } + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.BLEND); + + squareBuffer = gl.createBuffer(); + + gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); +} + +function createBuffer(size, allowedToFail) { + var msg = "Calling bufferData with size=" + size; + var buffer = gl.createBuffer(); + + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, size, gl.STATIC_DRAW); + + error = gl.getError(); + if (error !== gl.NO_ERROR) { + gl.deleteBuffer(buffer); + if (allowedToFail) { + if (error === gl.OUT_OF_MEMORY) { + testPassed(msg + " failed with gl.OUT_OF_MEMORY (this is allowed)"); + return null; + } else if (error === gl.CONTEXT_LOST_WEBGL) { + testPassed(msg + " failed with gl.CONTEXT_LOST_WEBGL (this is allowed)"); + return null; + } + } + testFailed(msg + " failed with error " + wtu.glEnumToString(gl, error)); + return null; + } + + testPassed(msg + " did not result in any errors"); + var reportedSize = gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); + expectContextLost = false; + if (reportedSize === null) { + testPassed("Null size reported by gl, this should happen if the context is lost which is allowed."); + expectContextLost = true; + } else if (reportedSize !== size) { + if (size > Math.pow(2, 32)) { + testPassed("gl reported different size " + reportedSize + " for the buffer, but this is expected since " + + "the requested size was above what the return value of getBufferParameter can represent."); + } else { + testFailed("gl reported different size " + reportedSize + " for the buffer."); + } + } else { + testPassed("Size reported by gl was the same as the requested size."); + } + + return buffer; +} + +// Draw a square on the canvas using attributes from the clear buffer created with bufferData. +function drawWithBuffer(buffer, allowedToFail) { + gl.clearColor(0, 1, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + var size = gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); + // Each vec4 is 16 bytes + var increment = numVertices * numColorAttrs * 16; + for (var offset = 0; offset + increment <= size; offset += increment) { + gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer); + gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); + + for (var i = 0; i < numColorAttrs; i++) { + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.vertexAttribPointer(1 + i, 4, gl.FLOAT, false, 0, + offset + increment * i / numColorAttrs); + } + gl.drawArrays(gl.TRIANGLES, 0, numVertices); + error = gl.getError(); + + if (error !== gl.NO_ERROR) { + if (allowedToFail) { + if (error === gl.OUT_OF_MEMORY) { + testPassed("drawArrays failed with gl.OUT_OF_MEMORY (this is allowed)"); + return; + } else if (error === gl.CONTEXT_LOST_WEBGL) { + testPassed("drawArrays failed with gl.CONTEXT_LOST_WEBGL (this is allowed)"); + return; + } + } + testFailed("drawArrays failed with error " + wtu.glEnumToString(gl, error)); + return; + } + } + wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); +} + + +// To be able to confirm the whole buffer has been cleared, the size needs to +// be divisible by the amount of vertices. Thus most sizes are multiples of 3. +var tests = [ + // Reasonable sized buffers. + { size: 3 * 1024, allowedToFail: false, tryDrawing: true }, + { size: 3 * 1024 * 1024, allowedToFail: false, tryDrawing: true }, + { size: 3 * 1024 * 1024 * 16, allowedToFail: false, tryDrawing: true }, + + // Huge buffers, which are meant to test out of memory handling. + // Allowed failures are gl.OUT_OF_MEMORY or context loss. + // Succeeding in the allocations is allowed as well for forward compatibility. + + // 1.5 GB allocation for stressing lower-end 32-bit systems. + // Allocation is likely to succeed on higher-end hardware. + { size: 3 * 1024 * 1024 * 512, allowedToFail: true, tryDrawing: true }, + // A buffer that no implementation will be able to allocate for some time + // to come. To do this, we use half of the lower 43-bit half of a 44-bit + // memory address space, so that the size is still valid on current common + // 64-bit implementations, and also below 52-bit limit for exact conversion + // from float to long long in WebIDL (though 2^n should be safe anyway). + // The 4 TB size is large enough that even extrapolating the historical + // exponential growth trend of memory sizes, hardware in 2020's should + // still have some trouble actually doing the allocation. + { size: (1 << 12) * (1 << 30), allowedToFail: true, tryDrawing: false } +]; + +function finishBufferSizesTest() { + gl.deleteBuffer(squareBuffer); + finishTest(); +} + +var testIndex = -1; +function runNextTest() { + ++testIndex; + if (testIndex > 0 && tests[testIndex - 1].allowedToFail) { + if (gl.isContextLost() || error === gl.OUT_OF_MEMORY) { + initGLForBufferSizesTest(); + } else if (expectContextLost) { + testFailed("Context was not lost after timeout even though gl.getBufferParameter returned null."); + } + } + var buffer = createBuffer(tests[testIndex].size, tests[testIndex].allowedToFail); + if (buffer) { + if (tests[testIndex].tryDrawing) { + drawWithBuffer(buffer, tests[testIndex].allowedToFail); + } + gl.deleteBuffer(buffer); + } + + if (testIndex + 1 >= tests.length) { + finishBufferSizesTest(); + } else { + if (tests[testIndex + 1].allowedToFail && !tests[testIndex].allowedToFail) { + if (!confirm("The following tests can cause unresponsiveness or instability. Press OK to continue.")) { + testFailed("Tests aborted"); + return; + } + } + if (tests[testIndex].allowedToFail) { + // Give plenty of time for possible context loss + setTimeout(runNextTest(), 5000); + } else { + runNextTest(); + } + } +}; + +initGLForBufferSizesTest(); +runNextTest(); + +var successfullyParsed = true; +</script> + +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-test.html b/dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-test.html new file mode 100644 index 0000000000..6eab0020bc --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-test.html @@ -0,0 +1,88 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Canvas Compositing Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +Below are 2 50x50 pixel canvas but using CSS to display them at 100x100 pixels. <br/> +They are solid black with a red triangle<br/> +They each have a 10px CSS solid black border around them.<br/> +Depending on how the browser composites the canvas with the page they will get +a white outline<hr/> +<div> +2d canvas<br/> +<canvas id="example2" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas> +</div> +<hr/> +3d canvas<br/> +<div> +<canvas id="example" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas> +</div> +<hr/> +img tag<br/> +<img src="50x50pixel-black-with-red-triangle.png" style="width: 100px; height: 100px; border: 10px solid black;"/> +<div id="description"></div> +<div id="console"></div> + <script id="vshader" type="x-shader/x-vertex"> + attribute vec4 vPosition; + void main() + { + gl_Position = vPosition; + } + </script> + + <script id="fshader" type="x-shader/x-fragment"> + void main() + { + gl_FragColor = vec4(1.0,0.0,0.0,1.0); + } + </script> + + <script> + "use strict"; + function init() + { + var wtu = WebGLTestUtils; + var canvas2d = document.getElementById("example2"); + var ctx2d = canvas2d.getContext("2d"); + ctx2d.fillStyle = "rgba(0, 0, 0, 255)" + ctx2d.fillRect(0, 0, 50, 50); + ctx2d.fillStyle = "rgba(255, 0, 0, 255)" + ctx2d.beginPath(); + ctx2d.moveTo(25, 12.5); + ctx2d.lineTo(12.5, 37.5); + ctx2d.lineTo(37.5, 37.5); + ctx2d.lineTo(25, 12.5); + ctx2d.fill(); + + + var gl = wtu.create3DContext("example"); + var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["vPosition"]); + + var vertexObject = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW); + gl.enableVertexAttribArray(0); + gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); + + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.drawArrays(gl.TRIANGLES, 0, 3); + } + + init(); + var successfullyParsed = true; + </script> +</body> +<script src="../js/js-test-post.js"></script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-test.png b/dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-test.png Binary files differnew file mode 100644 index 0000000000..ba80dbe760 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-test.png diff --git a/dom/canvas/test/webgl-conf/checkout/extra/constant-index-out-of-range.html b/dom/canvas/test/webgl-conf/checkout/extra/constant-index-out-of-range.html new file mode 100644 index 0000000000..f16ade96af --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/constant-index-out-of-range.html @@ -0,0 +1,219 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Indexing with a constant expression should compile only if the index is in range</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<link rel="stylesheet" href="../resources/glsl-feature-tests.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +<script src="../js/glsl-conformance-test.js"></script> +<script id="VertexArrayTemplate" type="x-shader/x-vertex"> +precision mediump float; + +uniform float ua[4]; + +$(init) + +void main() { + float c = ua[$(constantExpression)]; + gl_Position = vec4(c); +} +</script> +<script id="FragmentArrayTemplate" type="x-shader/x-fragment"> +precision mediump float; + +uniform float ua[4]; + +$(init) + +void main() { + float c = ua[$(constantExpression)]; + gl_FragColor = vec4(c); +} +</script> +<script id="VertexVectorTemplate" type="x-shader/x-vertex"> +precision mediump float; + +uniform vec4 uv; + +$(init) + +void main() { + float c = uv[$(constantExpression)]; + gl_Position = vec4(c); +} +</script> +<script id="FragmentVectorTemplate" type="x-shader/x-fragment"> +precision mediump float; + +uniform vec4 uv; + +$(init) + +void main() { + float c = uv[$(constantExpression)]; + gl_FragColor = vec4(c); +} +</script> +<script id="VertexMatrixTemplate" type="x-shader/x-vertex"> +precision mediump float; + +uniform mat4 um; + +$(init) + +void main() { + float c = um[$(constantExpression)].x; + gl_Position = vec4(c); +} +</script> +<script id="FragmentMatrixTemplate" type="x-shader/x-fragment"> +precision mediump float; + +uniform mat4 um; + +$(init) + +void main() { + float c = um[$(constantExpression)].x; + gl_FragColor = vec4(c); +} +</script> +</head> +<body onload="runTest()"> +<div id="description"></div> +<div id="console"></div> +<script type="application/javascript"> +"use strict"; +description(); + +var wtu = WebGLTestUtils; + +// ESSL 1.00 section 4.1.9 Arrays +// It is illegal to index an array with an integral constant expression greater than or equal to its +// declared size. It is also illegal to index an array with a negative constant expression. + +// ESSL 1.00 section 5.5 Vector Components +// Reading from or writing to a vector using a constant integral expression with a value that is negative +// or greater than or equal to the size of the vector is illegal. + +// ESSL 1.00 section 5.6 Matrix components +// The behavior when accessing a component outside the bounds of a matrix are the same as those for +// vectors and arrays. The compiler must generate an error if the index expression is a constant expression. + +// ESSL 1.00 spec section 5.10. +// A constant expression is one of +// * a literal value (e.g., 5 or true) +// * a global or local variable qualified as const excluding function parameters +// * an expression formed by an operator on operands that are constant expressions, including getting +// an element of a constant vector or a constant matrix, or a field of a constant structure +// * a constructor whose arguments are all constant expressions +// * a built-in function call whose arguments are all constant expressions, with the exception of the +// texture lookup functions. + +var runTest = function() { + var vsArrayTemplate = document.getElementById('VertexArrayTemplate').text; + var fsArrayTemplate = document.getElementById('FragmentArrayTemplate').text; + var vsVectorTemplate = document.getElementById('VertexVectorTemplate').text; + var fsVectorTemplate = document.getElementById('FragmentVectorTemplate').text; + var vsMatrixTemplate = document.getElementById('VertexMatrixTemplate').text; + var fsMatrixTemplate = document.getElementById('FragmentMatrixTemplate').text; + + var tests = []; + + var pushTest = function(constantExpression, expectSuccess, opt_init) { + if (opt_init === undefined) { + opt_init = ''; + } + tests.push({ + vShaderSource: wtu.replaceParams(vsArrayTemplate, {constantExpression: constantExpression, init: opt_init}), + vShaderSuccess: expectSuccess, + linkSuccess: expectSuccess, + passMsg: "Using " + constantExpression + " as an index for an array with size 4 in a vertex shader should " + (expectSuccess ? "compile." : "fail compilation.") + }); + tests.push({ + fShaderSource: wtu.replaceParams(fsArrayTemplate, {constantExpression: constantExpression, init: opt_init}), + fShaderSuccess: expectSuccess, + linkSuccess: expectSuccess, + passMsg: "Using " + constantExpression + " as an index for an array with size 4 in a fragment shader should " + (expectSuccess ? "compile." : "fail compilation.") + }); + tests.push({ + vShaderSource: wtu.replaceParams(vsVectorTemplate, {constantExpression: constantExpression, init: opt_init}), + vShaderSuccess: expectSuccess, + linkSuccess: expectSuccess, + passMsg: "Using " + constantExpression + " as a vec4 index in a vertex shader should " + (expectSuccess ? "compile." : "fail compilation.") + }); + tests.push({ + fShaderSource: wtu.replaceParams(fsVectorTemplate, {constantExpression: constantExpression, init: opt_init}), + fShaderSuccess: expectSuccess, + linkSuccess: expectSuccess, + passMsg: "Using " + constantExpression + " as a vec4 index in a fragment shader should " + (expectSuccess ? "compile." : "fail compilation.") + }); + tests.push({ + vShaderSource: wtu.replaceParams(vsMatrixTemplate, {constantExpression: constantExpression, init: opt_init}), + vShaderSuccess: expectSuccess, + linkSuccess: expectSuccess, + passMsg: "Using " + constantExpression + " as a mat4 index in a vertex shader should " + (expectSuccess ? "compile." : "fail compilation.") + }); + tests.push({ + fShaderSource: wtu.replaceParams(fsMatrixTemplate, {constantExpression: constantExpression, init: opt_init}), + fShaderSuccess: expectSuccess, + linkSuccess: expectSuccess, + passMsg: "Using " + constantExpression + " as a mat4 index in a fragment shader should " + (expectSuccess ? "compile." : "fail compilation.") + }); + } + + pushTest('0', true); + pushTest('3', true); + pushTest('-1', false); + pushTest('4', false); + pushTest('2 + 2', false); + pushTest('6 - 2', false); + pushTest('2 * 2', false); + pushTest('8 / 2', false); + pushTest('int(true) * 4', false); + pushTest('ivec4(4).x', false); + pushTest('ivec4(4)[0]', false); + pushTest('int(vec4(5.0).x)', false); + pushTest('int(mat4(5.0)[0].x)', false); + + pushTest('int(radians(360.0))', false); + pushTest('int(degrees(1.0))', false); + pushTest('int(5.0 + sin(0.0))', false); + pushTest('int(5.0 + asin(0.0))', false); + pushTest('int(pow(2.0, 3.0))', false); + pushTest('int(exp(3.0))', false); + pushTest('int(exp2(4.0))', false); + pushTest('int(floor(-0.5))', false); // floor(-0.5) = -1.0 + pushTest('int(5.0 + fract(-3.5))', false); + pushTest('int(mod(2.0, -4.0))', false); // mod(2.0, -4.0) = 2.0 - (-4.0) * floor(2.0 / -4.0) = 2.0 + 4.0 * (-1.0) = -2.0 + pushTest('int(mix(2.0, 8.0, 0.9))', false); + pushTest('int(length(vec4(3.0)))', false); + pushTest('int(lessThan(vec4(2.0), vec4(3.0)).x) * 4', false); + + pushTest('true ? 5 : 0', false); + pushTest('int(false ? 0.0 : 5.0)', false); + pushTest('my_struct(5, 1).field', false, 'struct my_struct { int field; int field2; };'); + + pushTest('int(-0.9)', true); // conversion to int drops the fractional part + + // Sequence operator returns the value of the right-most expression. + // Note that the sequence operator is allowed in constant expressions in ESSL 1.00, + // but not in ESSL 3.00, so with ESSL 3.00 failing compilation would not be required. + pushTest('5, 1', true); + pushTest('1, 5', false); + + GLSLConformanceTester.runTests(tests); +} + +var successfullyParsed = true; +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/context-creation-and-destruction-stress.html b/dom/canvas/test/webgl-conf/checkout/extra/context-creation-and-destruction-stress.html new file mode 100644 index 0000000000..7f316da3a0 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/context-creation-and-destruction-stress.html @@ -0,0 +1,35 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test that contexts are freed and garbage collected reasonably</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +<script src="../js/tests/iterable-test.js"> </script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +description(); + +var wtu = WebGLTestUtils; + +var test = IterableTest.createContextCreationAndDestructionTest(); +var iterations = parseInt(wtu.getUrlOptions().iterations, 10) || 500; +IterableTest.run(test, iterations); + +var successfullyParsed = true; +</script> + +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/cube-map-uploads-out-of-order.html b/dom/canvas/test/webgl-conf/checkout/extra/cube-map-uploads-out-of-order.html new file mode 100644 index 0000000000..abf9d1dd7d --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/cube-map-uploads-out-of-order.html @@ -0,0 +1,91 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL cube map out of order upload test.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +<script src="../js/glsl-conformance-test.js"></script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<canvas id="example" width="64" height="64"> +</canvas> +<script> +"use strict"; +description("Test out of order cube map uploads."); +debug("Regression test for crbug.com/473739 / Apple Radar 20444072."); + +<!-- Thanks to Gregg Tavares for the original report and test case. --> + +var wtu = WebGLTestUtils; + +var canvas = document.getElementById("example"); +canvas.addEventListener('webglcontextlost', contextLost, false); + +var contextWasLost = false; + +function contextLost(e) { + e.preventDefault(); + contextWasLost = true; + debug("***context lost -- should not happen***"); +} + +var dataWidth = 256; +var dataHeight = 256; +var gl = wtu.create3DContext(canvas); +var tex = gl.createTexture(); +// start with 1x1 pixel cubemap +gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); +var color = new Uint8Array([128, 192, 255, 255]); +for (var ii = 0; ii < 6; ++ii) { + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, color); +} +gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); +gl.generateMipmap(gl.TEXTURE_CUBE_MAP); // there's no need to call this but the code doesn't check the size. + +var textureData = new Uint8Array(dataWidth * dataHeight * 4); + +// The first texture has downlaoded +var first = 1; +gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); +gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + first, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); + +// Now because the first face downloaded doesn't match the other 5 faces upload the same image to the other 5 +// 1x1 faces +for (var ii = 0; ii < 6; ++ii) { + if (ii !== first) { + gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); + } +} +gl.generateMipmap(gl.TEXTURE_CUBE_MAP); + +// Now as each new face comes in add it +for (var ii = 0; ii < 6; ++ii) { + if (ii !== first) { + gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); + gl.generateMipmap(gl.TEXTURE_CUBE_MAP); + } +} + +gl.flush(); + +setTimeout(function() { + shouldBe("contextWasLost", "false"); + finishTest(); +}, 1000); + +var successfullyParsed = true; +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/fbo-lost-context.html b/dom/canvas/test/webgl-conf/checkout/extra/fbo-lost-context.html new file mode 100644 index 0000000000..b23113d909 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/fbo-lost-context.html @@ -0,0 +1,202 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL FBO Lost Context Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../../devtools/src/debug/webgl-debug.js"></script> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec4 vPosition; +attribute vec2 texCoord0; +uniform mat4 world; +varying vec2 texCoord; +void main() +{ + gl_Position = vPosition * world; + texCoord = texCoord0; +} +</script> + +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; +uniform sampler2D tex; +varying vec2 texCoord; +void main() +{ + gl_FragColor = texture2D(tex, texCoord); +} +</script> +<canvas id="canvas" width="1024" height="1024"> </canvas> +<script> +"use strict"; +description("This test is to help see if an WebGL app *can* get lost context."); + +debug(""); +debug("Canvas.getContext"); +var wtu = WebGLTestUtils; +var g_worldLoc; +var g_texLoc; +var g_textures = []; +var gl = wtu.create3DContext("canvas"); +if (!gl) { + testFailed("context does not exist"); +} else { + testPassed("context exists"); + + debug(""); + debug("Checking for out of memory handling."); + + var program = wtu.setupProgram(["vshader", "fshader"], ["vPosition", "texCoord0"]); + var size = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE); + debug("max render buffer size: " + size); + size = size / 2; + debug("size used: " + size); + + var allocateFramebuffers = true; + var itervalId; + var count = 0; + + gl = WebGLDebugUtils.makeDebugContext(gl, function(err, functionName, args) { + window.clearInterval(intervalId); + assertMsg(err == gl.OUT_OF_MEMORY, + "correctly returns gl.OUT_OF_MEMORY when out of memory"); + finish(); + }); + + function createFBO() { + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texImage2D(gl.TEXTURE_2D, + 0, // level + gl.RGBA, // internalFormat + size, // width + size, // height + 0, // border + gl.RGBA, // format + gl.UNSIGNED_BYTE, // type + null); // data + var fb = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, fb); + gl.framebufferTexture2D( + gl.FRAMEBUFFER, + gl.COLOR_ATTACHMENT0, + gl.TEXTURE_2D, + tex, + 0); + var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); + if (status != gl.FRAMEBUFFER_COMPLETE) { + testFailed("gl.checkFramebufferStatus() returned " + WebGLTestUtils.glEnumToString(gl, status)); + } + return { fb: fb, tex: tex }; + } + + gl.disable(gl.DEPTH_TEST); + + var numFBOs = 32; + for (var ii = 0; ii < numFBOs; ++ii) { + createFBO(); + var t = createFBO(); + tex = t.tex; + fb = t.fb; + + gl.bindFramebuffer(gl.FRAMEBUFFER, fb); + gl.scissor(0, 0, size, size); + gl.clearColor(0, ii / numFBOs, 1 - ii / numFBOs, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + g_textures.push(tex); + } + + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + var vertexObject = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ + -1,1,0, 1,1,0, -1,-1,0, + -1,-1,0, 1,1,0, 1,-1,0 + ]), gl.STATIC_DRAW); + gl.enableVertexAttribArray(0); + gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); + + var vertexObject = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ + 0,0, 1,0, 0,1, + 0,1, 1,0, 1,1 + ]), gl.STATIC_DRAW); + gl.enableVertexAttribArray(1); + gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0); + + gl.bindTexture(gl.TEXTURE_2D, tex); + g_texLoc = gl.getUniformLocation(gl.program, "tex"); + gl.uniform1i(g_texLoc, 0); + g_worldLoc = gl.getUniformLocation(gl.program, "world"); + gl.uniformMatrix4fv(g_worldLoc, false, [ + 0, 0, 0, 0, + 0, 0, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + + setInterval(render, 1000/60); +} + +var g_angle = 0; +var g_texIndex = 0; +function render() { + g_angle += 0.1; + g_texIndex++; + if (g_texIndex >= g_textures.length) { + g_texIndex = 0; + } + gl.bindTexture(gl.TEXTURE_2D, g_textures[g_texIndex]); + gl.uniformMatrix4fv(g_worldLoc, false, rotationZ(g_angle)); + gl.clearColor(1,0,0,1); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.drawArrays(gl.TRIANGLES, 0, 6); +} + +/** + * Creates a 4-by-4 matrix which rotates around the z-axis by the given angle. + * @param {number} angle The angle by which to rotate (in radians). + * @return {!o3djs.math.Matrix4} The rotation matrix. + */ +function rotationZ(angle) { + var c = Math.cos(angle); + var s = Math.sin(angle); + + return [ + c, s, 0, 0, + -s, c, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1 + ]; +}; + +debug(""); +var successfullyParsed = true; +</script> +<script> +"use strict"; +</script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/getbuffersubdata-nonblocking-benchmark.html b/dom/canvas/test/webgl-conf/checkout/extra/getbuffersubdata-nonblocking-benchmark.html new file mode 100644 index 0000000000..e6233ea83f --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/getbuffersubdata-nonblocking-benchmark.html @@ -0,0 +1,223 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>getBufferSubData non-blocking test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +description("Test that getBufferSubData is non-blocking when used with fenceSync"); + +var wtu = WebGLTestUtils; + +var gl = wtu.create3DContext(undefined, undefined, 2); + +const srcData = new Uint8Array([ 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0 ]); +const zeroData = new Uint8Array(8); + +const srcBuffer = gl.createBuffer(); +gl.bindBuffer(gl.COPY_READ_BUFFER, srcBuffer); +gl.bufferData(gl.COPY_READ_BUFFER, srcData, gl.STATIC_DRAW); + +const readbackBuffer = gl.createBuffer(); +gl.bindBuffer(gl.COPY_WRITE_BUFFER, readbackBuffer); +gl.bufferData(gl.COPY_WRITE_BUFFER, 8, gl.STREAM_READ); + +// unrelated buffers for tests +gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); // used as copy dst +gl.bufferData(gl.ARRAY_BUFFER, 8, gl.STATIC_DRAW); +gl.bindBuffer(gl.UNIFORM_BUFFER, gl.createBuffer()); // used as copy src +gl.bufferData(gl.UNIFORM_BUFFER, 8, gl.STATIC_DRAW); + +const dest = new Uint8Array(8); + +// Makes a new "resolvable" Promise +function resolvable() { + let resolve; + const promise = new Promise(res => { resolve = res; }); + promise.resolve = resolve; + return promise; +} + +function fence() { + const promise = resolvable(); + + const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0); + gl.flush(); + function check() { + const status = gl.clientWaitSync(sync, 0, 0); + if (status == gl.ALREADY_SIGNALED || status == gl.CONDITION_SATISFIED) { + gl.deleteSync(sync); + promise.resolve(); + } else { + setTimeout(check, 0); + } + } + setTimeout(check, 0); + + return promise; +} + +function writeToReadbackBuffer() { + gl.copyBufferSubData(gl.COPY_READ_BUFFER, gl.COPY_WRITE_BUFFER, 0, 0, 8); +} + +function timedGetBufferSubData() { + dest.fill(0); + const t0 = performance.now(); + gl.getBufferSubData(gl.COPY_WRITE_BUFFER, 0, dest); + return (performance.now() - t0); +} + +function timeBlockingReadback() { + const promise = resolvable(); + setTimeout(() => { + writeToReadbackBuffer(); + const tBlocking = timedGetBufferSubData(); + const tLatency = tBlocking; + promise.resolve({latency: tLatency, blocking: tBlocking}); + }, 0); + return promise; +} + +function timeNonblockingReadback() { + writeToReadbackBuffer(); + const tLatency0 = performance.now(); + return fence().then(() => { + const tBlocking = timedGetBufferSubData(); + const tLatency = performance.now() - tLatency0; + return {latency: tLatency, blocking: tBlocking}; + }); +} + +function timeReadbackWithUnrelatedCopy() { + writeToReadbackBuffer(); + const tLatency0 = performance.now(); + const f = fence(); + // copy to a buffer unrelated to the readback + gl.copyBufferSubData(gl.COPY_READ_BUFFER, gl.ARRAY_BUFFER, 0, 0, 8); + return f.then(() => { + const tBlocking = timedGetBufferSubData(); + const tLatency = performance.now() - tLatency0; + return {latency: tLatency, blocking: tBlocking}; + }); +} + +function timeReadbackInterrupted() { + writeToReadbackBuffer(); + const tLatency0 = performance.now(); + const f = fence(); + // interrupt the readback by inserting another write + gl.copyBufferSubData(gl.UNIFORM_BUFFER, gl.COPY_WRITE_BUFFER, 0, 0, 8); + return f.then(() => { + const tBlocking = timedGetBufferSubData(); + const tLatency = performance.now() - tLatency0; + return {latency: tLatency, blocking: tBlocking}; + }); +} + +function computeMean(timings) { + let total = 0; + for (let i = 0; i < timings.length; ++i) { + total += timings[i]; + } + return total / timings.length; +} + +function measureMean(fn, iterations) { + const timingsLatency = Array(iterations); + const timingsBlocking = Array(iterations); + + // Chain together `iterations` promises to call `fn` sequentially. + let promise = Promise.resolve(); + for (let i = 0; i < iterations; ++i) { + promise = promise + .then(fn) + .then(t => { + timingsLatency[i] = t.latency; + timingsBlocking[i] = t.blocking; + }); + } + + return promise.then(() => { + const meanLatency = computeMean(timingsLatency); + const meanBlocking = computeMean(timingsBlocking); + return { latency: meanLatency, blocking: meanBlocking }; + }); +} + +let t_blocking, t_nonblocking; +let t_unrelated; +let t_interrupted; +Promise.resolve() + .then(() => { + let iterations = 500; + debug(`blocking readback: mean over ${iterations} iterations...`); + return measureMean(timeBlockingReadback, iterations); + }) + .then(t => { + t_blocking = t; + debug(`... latency = ${t.latency}ms, blocking = ${t.blocking}ms`); + }) + .then(() => shouldBeTrue("areArraysEqual(dest, srcData)")) + + .then(() => debug("")) + .then(() => { + let iterations = 500; + debug(`nonblocking readback: mean over ${iterations} iterations...`); + return measureMean(timeNonblockingReadback, iterations); + }) + .then(t => { + t_nonblocking = t; + debug(`... latency = ${t.latency}ms, blocking = ${t.blocking}ms`); + }) + .then(() => shouldBeTrue("areArraysEqual(dest, srcData)")) + + .then(() => debug("")) + .then(() => { + let iterations = 500; + debug(`readback interrupted by unrelated read from copy source: mean over ${iterations} iterations...`); + return measureMean(timeReadbackWithUnrelatedCopy, iterations); + }) + .then(t => { + t_unrelated = t; + debug(`... latency = ${t.latency}ms, blocking = ${t.blocking}ms`); + }) + .then(() => shouldBeTrue("areArraysEqual(dest, srcData)")) + + .then(() => debug("")) + .then(() => { + let iterations = 500; + debug(`readback interrupted by write to readback source: mean over ${iterations} iterations...`); + return measureMean(timeReadbackInterrupted, iterations); + }) + .then(t => { + t_interrupted = t; + debug(`... latency = ${t.latency}ms, blocking = ${t.blocking}ms`); + }) + .then(() => shouldBeTrue("areArraysEqual(dest, zeroData)")) + + .then(() => { + debug(""); + shouldBeTrue("t_nonblocking.blocking < t_blocking.blocking"); + shouldBeTrue("t_unrelated.blocking < t_blocking.blocking"); + shouldBeTrue("t_nonblocking.blocking < t_interrupted.blocking"); + }) + .then(finishTest); + +var successfullyParsed = true; +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/logo-256x256.png b/dom/canvas/test/webgl-conf/checkout/extra/logo-256x256.png Binary files differnew file mode 100644 index 0000000000..b6a9ef1acd --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/logo-256x256.png diff --git a/dom/canvas/test/webgl-conf/checkout/extra/lots-of-polys-example.html b/dom/canvas/test/webgl-conf/checkout/extra/lots-of-polys-example.html new file mode 100644 index 0000000000..1c4fe866f6 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/lots-of-polys-example.html @@ -0,0 +1,89 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Lots of polygons example.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<canvas id="example" width="1024" height="1024" style="width: 40px; height: 40px;"> +</canvas> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +window.onload = init; +debug("Tests a WebGL program that draws a bunch of large polygons"); + +function init() { + if (confirm( + "After clicking OK your machine may become unresponsive or crash.")) { + main(); + } else { + debug("cancelled"); + } +} + +function main() { + var wtu = WebGLTestUtils; + var canvas = document.getElementById("example"); + canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false); + canvas.addEventListener("webglcontextrestored", function(e) { }, false); + + var gl = wtu.create3DContext(canvas); + var program = wtu.setupTexturedQuad(gl); + + assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup."); + + var tex = gl.createTexture(); + gl.enable(gl.BLEND); + gl.disable(gl.DEPTH_TEST); + + wtu.fillTexture(gl, tex, 4096, 4096, [0, 192, 128, 255], 0); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating texture"); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting texture params"); + + var loc = gl.getUniformLocation(program, "tex"); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after getting tex locations"); + gl.uniform1i(loc, 0); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting tex uniform"); + + var numQuads = 100000; + var indexBuf = new ArrayBuffer(numQuads * 6); + var indices = new Uint8Array(indexBuf); + for (var ii = 0; ii < numQuads; ++ii) { + var offset = ii * 6; + indices[offset + 0] = 0; + indices[offset + 1] = 1; + indices[offset + 2] = 2; + indices[offset + 3] = 3; + indices[offset + 4] = 4; + indices[offset + 5] = 5; + } + var indexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating index buffer"); + gl.drawElements(gl.TRIANGLES, numQuads * 6, gl.UNSIGNED_BYTE, 0); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing"); + + var successfullyParsed = true; +} +</script> +</body> +</html> + + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/lots-of-polys-shader-example.html b/dom/canvas/test/webgl-conf/checkout/extra/lots-of-polys-shader-example.html new file mode 100644 index 0000000000..2c57fbe1c3 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/lots-of-polys-shader-example.html @@ -0,0 +1,155 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Lots of polygons example.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +<style> +html, body { + width: 100%; + height: 100%; +} +canvas { + border: 1px solid black; + width: 95%; + height: 80%; +} +</style +</head> +<body> +<canvas id="example"></canvas> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +window.onload = init; +debug("Tests a WebGL program that draws a bunch of large polygons from a quad mesh"); + +function init() { + if (confirm( + "After clicking OK your machine may become unresponsive or crash.")) { + main(); + } else { + debug("cancelled"); + } +} + +function main() { + var wtu = WebGLTestUtils; + var canvas = document.getElementById("example"); + var gridRes = 1000; + canvas.width = canvas.clientWidth; + canvas.heigt = canvas.clientHeight; + canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false); + canvas.addEventListener("webglcontextrestored", function(e) { }, false); + + var gl = wtu.create3DContext(canvas); + var program = wtu.setupProgram( + gl, ['vshader', 'fshader'], ['vPosition'], [0]); + + wtu.setupIndexedQuad(gl, gridRes, 0, true); + + // make 1 texture since we'd have at least that in CSS shaders + var size = 256; + var pixels = new Uint8Array(size * size * 4); + for (var y = 0; y < size; ++y) { + for (var x = 0; x < size; ++x) { + var offset = (y * size + x) * 4; + pixels[offset + 0] = x * 255 / size; + pixels[offset + 1] = y * 255 / size; + pixels[offset + 2] = x * y * 255 / (size * size); + pixels[offset + 3] = 255; + } + } + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + + // add test colors. + if (false) { + var vertsAcross = gridRes + 1; + var numQuads = vertsAcross * vertsAcross; + var colors = new Float32Array(numQuads * 4); + for (var ii = 0; ii < numQuads; ++ii) { + var offset = ii * 4; + colors[offset + 0] = Math.random(); + colors[offset + 1] = Math.random(); + colors[offset + 2] = Math.random(); + colors[offset + 3] = 1; + } + var colorLocation = gl.getAttribLocation(program, "color") + var buf = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buf); + gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); + gl.enableVertexAttribArray(colorLocation); + gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); + } + + var gridResLoc = gl.getUniformLocation(program, "gridRes"); + gl.uniform1f(gridResLoc, gridRes); + + assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup."); + + gl.enable(gl.BLEND); + //gl.enable(gl.CULL_FACE); + //gl.cullFace(gl.FRONT); + + gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing"); + + var successfullyParsed = true; +} +</script> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec4 vPosition; +varying vec2 v_texCoord; +uniform float gridRes; + +#ifdef ADD_TEST_COLORS + attribute vec4 color; + varying vec4 v_color; +#endif + +void main() +{ + // expand each quad to cover the entire element. + vec2 p = mod((vPosition.xy * 0.5 + 0.5) * gridRes, 2.0) * 2.0 - 1.0; + gl_Position = vec4(p, 0, 1); + v_texCoord = vPosition.xy; + +#ifdef ADD_TEST_COLORS + v_color = color; +#endif +} +</script> + +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; +varying vec4 v_color; +varying vec2 v_texCoord; +uniform sampler2D tex; +void main() +{ +#ifdef ADD_TEST_COLORS + gl_FragColor = v_color; +#else + gl_FragColor = texture2D(tex, v_texCoord); +#endif +} +</script> +</body> +</html> + + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/multisample-corruption-stress.html b/dom/canvas/test/webgl-conf/checkout/extra/multisample-corruption-stress.html new file mode 100644 index 0000000000..a24db37681 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/multisample-corruption-stress.html @@ -0,0 +1,37 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Multisample Renderbuffer Corruption Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../jss/webgl-test-utils.js"> </script> +<script src="../js/tests/iterable-test.js"> </script> +</head> +<body> +<canvas id="example" width="2048" height="2048" style="width: 128px; height: 128px;"></canvas> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; + +description(document.title); + +var wtu = WebGLTestUtils; + +var gl = wtu.create3DContext("example", {antialias: true, preserveDrawingBuffer: true}); +var test = IterableTest.createMultisampleCorruptionTest(gl); +var iterations = parseInt(wtu.getUrlOptions().iterations, 10) || 100; +IterableTest.run(test, iterations); + +var successfullyParsed = true; +</script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/offscreen-issue.html b/dom/canvas/test/webgl-conf/checkout/extra/offscreen-issue.html new file mode 100644 index 0000000000..b35eefbf38 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/offscreen-issue.html @@ -0,0 +1,43 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<script type="application/javascript"> + +window.onload = function() { + setup("1"); + setup("2"); +} + +function setup(id) { + var c = document.getElementById(id); + var names = ["webgl", "experimental-webgl"]; + for (var i = 0; i < names.length; ++i) { + gl = canvas.getContext(names[i]); + if (gl) { + break; + } + } + gl.clearColor(1,0,0,1); + gl.clear(gl.COLOR_BUFFER_BIT); + setTimeout(function() { + gl.enable(gl.SCISSOR_TEST); + gl.scissor(0,0,50,50); + gl.clearColor(0,1,0,1); + gl.clear(gl.COLOR_BUFFER_BIT); + }, 500); +} +</script> +</head> +<body> +<canvas id="1"></canvas> +<div style="height:4000px;">content that is tall like several articles</div> +<canvas id="2"></canvas> +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/out-of-bounds-uniform-array-access.html b/dom/canvas/test/webgl-conf/checkout/extra/out-of-bounds-uniform-array-access.html new file mode 100644 index 0000000000..917361e986 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/out-of-bounds-uniform-array-access.html @@ -0,0 +1,105 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL out of bounds uniform array access.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body style="background: #666;"> +<div id="description"></div> +<div id="console"></div> +<div>elem mult: <span id="elemMultDisplay"></span></div> +<input type="range" id="elemMult" value="4" min="0" max="2048" style="width: 100%;"/> +<div>line width: <span id="lineWidthDisplay"></span></div> +<input type="range" id="lineWidth" value="512" min="0" max="2540" style="width: 100%;"/> +<canvas id="example" width="256" height="256" style="background: black;"> +</canvas> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec4 vPosition; +varying vec4 v_color; +uniform float lineWidth; +uniform int elemMult; +uniform vec4 someArray[2]; +void main() +{ + vec2 texcoord = vec2(vPosition.xy * 0.5 + vec2(0.5, 0.5)); + int index = int(texcoord.x + texcoord.y * lineWidth) * elemMult; + v_color = someArray[index]; + gl_Position = vPosition; +} +</script> + +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; +varying vec4 v_color; +void main() +{ + gl_FragColor = v_color * vec4(1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0) + vec4(0,0,0,0.5); +} +</script> +<script> +"use strict"; +window.onload = main; +debug("Tests a WebGL program that accesses out of bounds uniform array elements"); + +function main() { + var wtu = WebGLTestUtils; + var gl = wtu.create3DContext("example"); + var program = wtu.setupProgram( + gl, + ['vshader', 'fshader'], + ['vPosition'], [0]); + var gridRes = 255; + wtu.setupIndexedQuad(gl, gridRes, 0); + var lineWidthLoc = gl.getUniformLocation(program, "lineWidth"); + var elemMultLoc = gl.getUniformLocation(program, "elemMult"); + assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup."); + + var lineWidth = 512; + var lineWidthElem = document.getElementById("lineWidth"); + var lineWidthDisplayElem = document.getElementById("lineWidthDisplay"); + + lineWidthElem.value = lineWidth; + + lineWidthElem.addEventListener('change', function(event) { + //console.log(event.target.value); + lineWidth = event.target.value; + draw(); + }, false); + + var elemMult = 4; + var elemMultElem = document.getElementById("elemMult"); + var elemMultDisplayElem = document.getElementById("elemMultDisplay"); + + elemMultElem.value = elemMult; + + elemMultElem.addEventListener('change', function(event) { + //console.log(event.target.value); + elemMult = event.target.value; + draw(); + }, false); + + draw(); + + function draw() { + lineWidthDisplayElem.innerText = lineWidth; + elemMultDisplayElem.innerText = elemMult; + gl.uniform1f(lineWidthLoc, lineWidth); + gl.uniform1i(elemMultLoc, elemMult); + gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0); + } + + var successfullyParsed = true; +} + +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/out-of-memory.html b/dom/canvas/test/webgl-conf/checkout/extra/out-of-memory.html new file mode 100644 index 0000000000..e02984d44c --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/out-of-memory.html @@ -0,0 +1,84 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Out Of Memory Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<canvas id="canvas" width="2" height="2"> </canvas> +<script> +"use strict"; +debug("This tests WebGL running out of memory."); + +debug(""); +debug("Canvas.getContext"); + +var wtu = WebGLTestUtils; +var gl = wtu.create3DContext("canvas"); +if (!gl) { + testFailed("context does not exist"); +} else { + testPassed("context exists"); + + debug(""); + debug("Allocating shaders."); + + function makeBigShader() { + var lines = []; + var line = "// "; + for (var ii = 0; ii < 1024; ++ii) { + line += String.fromCharCode(48 + ii % 10); + } + for (var ii = 0; ii < 1024; ++ii) { + lines[ii] = line; + } + var oneMB = lines.join(); + for (var ii = 0; ii < 64; ++ii) { + lines[ii] = oneMB; + } + return lines.join("\n"); + } + + var shaderSource = makeBigShader(); + debug("created " + Math.floor(shaderSource.length / 1024 / 1024) + "MB shader"); + + var intervalId; + var count = 0; + + function makeShader() { + ++count; + debug ("creating shader #" + count + " mem = " + Math.floor(shaderSource.length * count / 1024 / 1024) + "MB"); + var shader = gl.createShader(gl.VERTEX_SHADER); + if (shader == null) { + window.clearInterval(intervalId); + testPassed("createShader returns null"); // not sure this is a passing + finishTest(); + } else { + gl.shaderSource(shader, shaderSource); + var err = gl.getError(); + if (err != gl.NO_ERROR) { + window.clearInterval(intervalId); + assertMsg(err == gl.OUT_OF_MEMORY, "shaderSource returns OUT_OF_MEMORY"); + finishTest(); + } + } + } + + intervalId = window.setInterval(makeShader, 1000/15); +} +</script> +<script src="../js/js-test-post.js"></script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/out-of-resources.html b/dom/canvas/test/webgl-conf/checkout/extra/out-of-resources.html new file mode 100644 index 0000000000..8e88c1ebfd --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/out-of-resources.html @@ -0,0 +1,120 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Out Of Resources Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../../devtools/src/debug/webgl-debug.js"></script> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<canvas id="canvas" width="2" height="2"> </canvas> +<canvas id="canvas2" width="2" height="2"> </canvas> +<script> +"use strict"; +wtu = WebGLTestUtils; +window.onload = init; +debug("Tests a WebGL program that tries to use all of vram."); + +function init() { + if (confirm( + "After clicking OK your machine may become unresponsive or crash.")) { + main(); + } else { + debug("cancelled"); + } +} + +function main() { + debug(""); + debug("Canvas.getContext"); + + var gl = wtu.create3DContext("canvas"); + if (!gl) { + testFailed("context does not exist"); + } else { + testPassed("context exists"); + + var program = wtu.setupColorQuad(gl); + gl.useProgram(program); + + debug(""); + debug("Checking for out of memory handling."); + + var size = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE); + debug("max render buffer size: " + size); + + var allocateFramebuffers = true; + var itervalId; + var count = 0; + + gl = WebGLDebugUtils.makeDebugContext(gl, function(err, functionName, args) { + assertMsg(err == gl.OUT_OF_MEMORY, + "correctly returns gl.OUT_OF_MEMORY when out of memory"); + stop("got: " + wtu.glEnumToString(gl, err)); + }); + + var fbos = []; + + intervalId = window.setInterval(function() { + ++count; + var mem = count * size * size * 4; + debug("#" + count + " : memory allocated so far " + (mem / 1024 / 1024) + "MB"); + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texImage2D(gl.TEXTURE_2D, + 0, // level + gl.RGBA, // internalFormat + size, // width + size, // height + 0, // border + gl.RGBA, // format + gl.UNSIGNED_BYTE, // type + null); // data + var err = gl.getError(); + if (err != gl.NO_ERROR) { + stop("got error: " + wtu.glEnumToString(gl, err)); + return; + } + if (allocateFramebuffers) { + var fb = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, fb); + gl.framebufferTexture2D( + gl.FRAMEBUFFER, + gl.COLOR_ATTACHMENT0, + gl.TEXTURE_2D, + tex, + 0); + var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); + if (status != gl.FRAMEBUFFER_COMPLETE) { + stop("got: " + wtu.glEnumToString(gl, status)); + return; + } + // use the framebuffer + wtu.drawFloatColorQuad(gl, [1, Math.random(), 1, 1]); + } + }, 200); + + function stop(msg) { + debug(msg); + window.clearInterval(intervalId); + finishTest(); + } + } +} +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/out-of-vram.html b/dom/canvas/test/webgl-conf/checkout/extra/out-of-vram.html new file mode 100644 index 0000000000..02f82949f7 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/out-of-vram.html @@ -0,0 +1,114 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Out Of VRAM Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<canvas id="canvas" width="2" height="2"> </canvas> +<script> +"use strict"; +debug("This tests WebGL running out of vram."); + +debug(""); +debug("Canvas.getContext"); + +var wtu = WebGLTestUtils; +var canvas = document.getElementById("canvas"); +try { + var gl = wtu.create3DContext(canvas); +} catch(e) { +} +if (!gl) { + testFailed("could not create context"); +} else { + testPassed("context exists"); + + var args = wtu.getUrlArguments(); + + canvas.addEventListener('webglcontextlost', contextLost, false); + + function contextLost(e) { + e.preventDefault(); + debug("***context lost***"); + } + + function contextRestored(e) { + debug("***context restored***"); + } + + var program = wtu.setupTexturedQuad(gl); + gl.useProgram(program); + + debug(""); + debug("Allocating textures."); + + var intervalId; + var count = 0; + var textureMem = 0; + var textures = []; + var size = 2048; + var limit = (args.limit ? args.limit : 8192) * 1024 * 1024; + + debug("limit: " + InMB(limit)) + + function InMB(v) { + return "" + Math.floor(v / 1024 / 1024) + "MB"; + } + + function makeTexture() { + if (gl.isContextLost()) { + stop("out of memory"); + return; + } + ++count; + textureMem += size * size * 4; + if (textureMem > limit) { + stop("reached limit"); + return; + } + debug ("creating texture #" + count + " mem = " + InMB(textureMem)); + var texture = gl.createTexture(); + textures.push(texture); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, + 0, // level + gl.RGBA, // internalFormat + size, // width + size, // height + 0, // border + gl.RGBA, // format + gl.UNSIGNED_BYTE, // type + null); // data + var err = gl.getError(); + if (err != gl.NO_ERROR) { + stop("got error: " + wtu.glEnumToString(gl, err)); + return; + } + // use the texture + wtu.clearAndDrawUnitQuad(gl); + } + + intervalId = window.setInterval(makeTexture, 1000 / 15); + +} + +function stop(msg) { + window.clearInterval(intervalId); + testPassed(msg); + finishTest(); +} +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/point-no-attributes-stress.html b/dom/canvas/test/webgl-conf/checkout/extra/point-no-attributes-stress.html new file mode 100644 index 0000000000..f567264907 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/point-no-attributes-stress.html @@ -0,0 +1,61 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +<script id="vshader" type="x-shader/x-vertex"> +void main() +{ + gl_PointSize = 1.0; + gl_Position = vec4(0.0, 0.0, 0.0, 1.0); +} +</script> + +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; + +void main() +{ + gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); +} +</script> +</head> +<body> +<canvas id="testbed" width="1" height="1" style="width: 100px; height: 100px;"></canvas> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +description('Stress test drawing a huge number of points without enabling any attributes'); + +debug('This test stresses drawing a large number of points and workarounds created to run WebGL with simulated attrib 0'); + +if (confirm('After clicking OK your machine may become unresponsive or crash.')) { + var wtu = WebGLTestUtils; + var gl = wtu.create3DContext('testbed'); + + var program1 = wtu.setupProgram(gl, ['vshader', 'fshader']); + + gl.enable(gl.BLEND); + + debug('Draw 2^31 points with a shader that takes no attributes and verify it fills the whole canvas.'); + + gl.drawArrays(gl.POINTS, 0, Math.pow(2, 31) - 1); + wtu.glErrorShouldBe(gl, gl.NO_ERROR); + wtu.checkCanvas(gl, [0, 255, 0, 255]); +} + +var successfullyParsed = true; +</script> +<script src="../js/js-test-post.js"></script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/program-test-1.html b/dom/canvas/test/webgl-conf/checkout/extra/program-test-1.html new file mode 100644 index 0000000000..e7cee66c9a --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/program-test-1.html @@ -0,0 +1,80 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<!-- This is a visual test that programs must have both a vertex and + fragment shader attached; the fixed function pipeline on the + desktop must remain disabled. --> +<script type="application/javascript"> +function log() { + var s = ""; + for (var i = 0; i < arguments.length; ++i) { + s += arguments[i] + " "; + } + document.getElementById("log").innerHTML += s + "<br>"; +} + +function go() { + var gl = document.getElementById("c").getContext("experimental-webgl"); + + gl.clearColor(0.0, 0.0, 0.0, 0.0); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + var vs = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vs, "attribute vec4 aVertex; attribute vec4 aColor; varying vec4 vColor; void main() { vColor = aColor; gl_Position = aVertex; }"); + gl.compileShader(vs); + + var fs = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fs, "precision mediump float; varying vec4 vColor; void main() { gl_FragColor = vColor; }"); + gl.compileShader(fs); + + var prog = gl.createProgram(); + gl.attachShader(prog, vs); + // don't attach a fragment shader -- may use fixed pipeline on desktop if the implementation doesn't check! + //gl.attachShader(prog, fs); + + gl.bindAttribLocation(prog, 0, "aVertex"); + gl.bindAttribLocation(prog, 1, "aColor"); + + gl.linkProgram(prog); + + var vbuf = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vbuf); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ + -1.0, -1.0, 0.0, 1.0, + -1.0, 1.0, 0.0, 1.0, + 1.0, -1.0, 0.0, 1.0, + 1.0, 1.0, 0.0, 1.0]), gl.STATIC_DRAW); + gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); + + var cbuf = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, cbuf); + gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array([255, 0, 0, + 0, 255, 0, + 0, 0, 255, + 255, 255, 0]), gl.STATIC_DRAW); + gl.vertexAttribPointer(1, 3, gl.UNSIGNED_BYTE, false, 0, 0); + + gl.enableVertexAttribArray(0); + gl.enableVertexAttribArray(1); + + gl.useProgram(prog); + + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); + + log("glError", "0x" + gl.getError().toString(16)); +} +</script> +</head> + +<body onload="go()"> +<p>Should be green in the rectangle below:</p> +<canvas style="background: green;" id="c"></canvas> +<div id="log"></div> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/readpixels-after-alert.html b/dom/canvas/test/webgl-conf/checkout/extra/readpixels-after-alert.html new file mode 100644 index 0000000000..0fbb9cb159 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/readpixels-after-alert.html @@ -0,0 +1,65 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Behavior After Alert and Read Pixels Test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../../devtools/src/debug/webgl-debug.js"></script> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<canvas id="canvas" width="100" height="100"> </canvas> +<div id="description">Verify WebGL behavior after an alert and then a readPixels()</div> +<div id="console"></div> +<script> +"use strict"; + +function checkPixels(buf, width, height, thresh) { + for (var yy = 0; yy < height; ++yy) { + for (var xx = 0; xx < width; ++xx) { + var offset = (yy * width + xx) * 4; + if (Math.abs(buf[offset] - 255) > thresh || + Math.abs(buf[offset + 1] - 0) > thresh || + Math.abs(buf[offset + 2] - 0) > thresh) { + testFailed("Checking pixels"); + return false; + } + } + } + testPassed("Checking pixels"); + return true; +} + +var wtu = WebGLTestUtils; +var gl = wtu.create3DContext("canvas"); +gl.clearColor(1, 0, 0, 1); +gl.clear(gl.COLOR_BUFFER_BIT); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "setup should succeed"); + +wtu.checkCanvas(gl, [255, 0, 0, 255], undefined, 3); + +alert("Click me to continue"); + +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "setup should succeed"); +wtu.checkCanvas(gl, [255, 0, 0, 255], undefined, 3); + +alert("Click me to continue"); + +gl.clearColor(1, 0, 0, 1); +gl.clear(gl.COLOR_BUFFER_BIT); +wtu.checkCanvas(gl, [255, 0, 0, 255], undefined, 3); + +debug(""); +var successfullyParsed = true; +</script> +<script src="../js/js-test-post.js"></script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/sample-100.png b/dom/canvas/test/webgl-conf/checkout/extra/sample-100.png Binary files differnew file mode 100644 index 0000000000..197c869b6d --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/sample-100.png diff --git a/dom/canvas/test/webgl-conf/checkout/extra/sample-200.png b/dom/canvas/test/webgl-conf/checkout/extra/sample-200.png Binary files differnew file mode 100644 index 0000000000..89f2b782a5 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/sample-200.png diff --git a/dom/canvas/test/webgl-conf/checkout/extra/sample-400.png b/dom/canvas/test/webgl-conf/checkout/extra/sample-400.png Binary files differnew file mode 100644 index 0000000000..aaee3ce0dc --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/sample-400.png diff --git a/dom/canvas/test/webgl-conf/checkout/extra/sample.svg b/dom/canvas/test/webgl-conf/checkout/extra/sample.svg new file mode 100644 index 0000000000..dfca524023 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/sample.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> + <rect width="100" height="100" fill="red"/> + <circle cx="50" cy="50" r="50" fill="blue"/> +</svg> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/simulated-attrib-0-bug-test.html b/dom/canvas/test/webgl-conf/checkout/extra/simulated-attrib-0-bug-test.html new file mode 100644 index 0000000000..83564e824a --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/simulated-attrib-0-bug-test.html @@ -0,0 +1,36 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Simulated Attrib 0 Bug Test</title> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +</head> +<body> +<div>Simulated Attrib 0 Bug Test</div> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +var wtu = WebGLTestUtils; +var context = wtu.create3DContext(); +var program = wtu.loadStandardProgram(context); + +context.useProgram(program); +debug("This line attempts to draw with 0x7FFFFFFF triangles with attrib 0 off"); +debug("A buggy simulated attrib 0 impl will probably mult 0x7FFFFFFF * sizeof(vec4)"); +shouldBe("context.drawArrays(context.TRIANGLES, 0, 0x7fffffff);", "undefined"); +debug("This line attempts to draw with 0x7ffffff triangles."); +debug("A buggy simulated attrib 0 impl will probably pass 0x7FFFFFF0 to glBufferData and then not check that it failed"); +shouldBe("context.drawArrays(context.TRIANGLES, 0, 0x7ffffff);", "undefined"); +debug("") +debug("NOTE!: You may not see any manifestation here. Check your impl for these issues"); +</script> +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/slow-shader-example.html b/dom/canvas/test/webgl-conf/checkout/extra/slow-shader-example.html new file mode 100644 index 0000000000..2397bbbec8 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/slow-shader-example.html @@ -0,0 +1,112 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Slow Shader example.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<canvas id="example" width="1024" height="1024" style="width: 40px; height: 40px;"> +</canvas> +<div id="description"></div> +<div id="console"></div> +<script id="slow" type="text/something-not-javascript"> +precision mediump float; +uniform sampler2D tex; +varying vec2 texCoord; +void main() { + gl_FragColor = texture2D(tex, texture2D(tex, texture2D(tex, texCoord).xy).xy); +} +</script> +<script> +"use strict"; +window.onload = main; + +debug("Tests drawing a very slow shader."); +var wtu = WebGLTestUtils; +var canvas = document.getElementById("example"); +canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false); +canvas.addEventListener("webglcontextrestored", function(e) { }, false); +var gl = wtu.create3DContext(canvas); +var maxTexSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); +var texSize = Math.min(maxTexSize, 4096); +debug("Max Texture size: " + maxTexSize); +debug("Texture size: " + texSize); +var shaderSource = + document.getElementById("slow").text.replace(/\$size/g, texSize + ".0"); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after getting a context"); +var program = wtu.setupProgram( + gl, + [wtu.simpleTextureVertexShader, shaderSource], + ['vPosition', 'texCoord0'], + [0, 1]); +wtu.setupUnitQuad(gl, 0, 1); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after program setup"); +var tex = gl.createTexture(); +gl.enable(gl.BLEND); +gl.disable(gl.DEPTH_TEST); + +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating texture"); +debug("preparing..."); +var numBytes = texSize * texSize * 4; +var pixelBuf = new ArrayBuffer(numBytes); +var pixels = new Uint8Array(pixelBuf); +for (var ii = 0; ii < numBytes; ++ii) { + pixels[ii] = Math.random() * 255; +} +gl.bindTexture(gl.TEXTURE_2D, tex); +gl.texImage2D( + gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, + gl.RGBA, gl.UNSIGNED_BYTE, pixels); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after texture setup"); + +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after texture param setting"); + +var loc = gl.getUniformLocation(program, "tex"); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after getting tex location"); +gl.uniform1i(loc, 0); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting tex uniform"); + +var numQuads = 1000; +var indexBuf = new ArrayBuffer(numQuads * 6); +var indices = new Uint8Array(indexBuf); +for (var ii = 0; ii < numQuads; ++ii) { + var offset = ii * 6; + indices[offset + 0] = 0; + indices[offset + 1] = 1; + indices[offset + 2] = 2; + indices[offset + 3] = 3; + indices[offset + 4] = 4; + indices[offset + 5] = 5; +} +var indexBuffer = gl.createBuffer(); +gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); +gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting up indices"); + +function main () { + if (confirm( + "After clicking OK your machine may become unresponsive or crash.")) { + gl.drawElements(gl.TRIANGLES, numQuads * 6, gl.UNSIGNED_BYTE, 0); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing"); + } else { + debug("cancelled"); + } +} + +var successfullyParsed = true; +</script> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.html b/dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.html new file mode 100644 index 0000000000..3c25b7c985 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.html @@ -0,0 +1,27 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +<script src="tex-image-with-video-test.js"></script> +<script> +"use strict"; +function testPrologue(gl) { + return true; +} +</script> +</head> +<body onload='generateTest("RGBA", "UNSIGNED_BYTE", testPrologue)()'> +<canvas id="example" width="32" height="32"></canvas> +<div id="description"></div> +<div id="console"></div> +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.js b/dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.js new file mode 100644 index 0000000000..01f56b56c3 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/tex-image-with-video-test.js @@ -0,0 +1,158 @@ +/* +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +*/ + +// This block needs to be outside the onload handler in order for this +// test to run reliably in WebKit's test harness (at least the +// Chromium port). https://bugs.webkit.org/show_bug.cgi?id=87448 +initTestingHarness(); + +var old = debug; +var debug = function(msg) { + console.log(msg); + old(msg); +}; + +function generateTest(pixelFormat, pixelType, prologue) { + var wtu = WebGLTestUtils; + var gl = null; + var textureLoc = null; + var successfullyParsed = false; + + // Test each format separately because many browsers implement each + // differently. Some might be GPU accelerated, some might not. Etc... + var videos = [ + { src: "../resources/red-green.mp4" , type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', }, + { src: "../resources/red-green.webmvp8.webm", type: 'video/webm; codecs="vp8, vorbis"', }, + { src: "../resources/red-green.webmvp9.webm", type: 'video/webm; codecs="vp9"', }, + { src: "../resources/red-green.theora.ogv", type: 'video/ogg; codecs="theora, vorbis"', }, + ]; + + var videoNdx = 0; + var video; + + function runNextVideo() { + if (video) { + video.pause(); + } + + if (videoNdx == videos.length) { + finishTest(); + return; + } + + var info = videos[videoNdx++]; + debug(""); + debug("testing: " + info.type); + video = document.createElement("video"); + video.muted = true; + var canPlay = true; + if (!video.canPlayType) { + testFailed("video.canPlayType required method missing"); + runNextVideo(); + return; + } + + if(!video.canPlayType(info.type).replace(/no/, '')) { + debug(info.type + " unsupported"); + runNextVideo(); + return; + }; + + document.body.appendChild(video); + video.type = info.type; + video.crossOrigin = 'anonymous'; + video.src = info.src; + wtu.startPlayingAndWaitForVideo(video, runTest); + } + + var init = function() + { + description('Verify texImage2D and texSubImage2D code paths taking video elements (' + pixelFormat + '/' + pixelType + ')'); + + gl = wtu.create3DContext("example"); + + if (!prologue(gl)) { + finishTest(); + return; + } + + var program = wtu.setupTexturedQuad(gl); + + gl.clearColor(0,0,0,1); + gl.clearDepth(1); + + textureLoc = gl.getUniformLocation(program, "tex"); + runNextVideo(); + } + + function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor) + { + debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') + + ' with flipY=' + flipY); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + // Disable any writes to the alpha channel + gl.colorMask(1, 1, 1, 0); + var texture = gl.createTexture(); + // Bind the texture to texture unit 0 + gl.bindTexture(gl.TEXTURE_2D, texture); + // Set up texture parameters + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + // Set up pixel store parameters + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); + // Upload the videoElement into the texture + if (useTexSubImage2D) { + // Initialize the texture to black first + gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], + videoElement.videoWidth, videoElement.videoHeight, 0, + gl[pixelFormat], gl[pixelType], null); + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl[pixelFormat], gl[pixelType], videoElement); + } else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], gl[pixelFormat], gl[pixelType], videoElement); + } + + var c = document.createElement("canvas"); + c.width = 16; + c.height = 16; + c.style.border = "1px solid black"; + var ctx = c.getContext("2d"); + ctx.drawImage(videoElement, 0, 0, 16, 16); + document.body.appendChild(c); + + // Point the uniform sampler to texture unit 0 + gl.uniform1i(textureLoc, 0); + // Draw the triangles + wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); + // Check a few pixels near the top and bottom and make sure they have + // the right color. + var tolerance = 5; + debug("Checking lower left corner"); + wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor, + "shouldBe " + bottomColor, tolerance); + debug("Checking upper left corner"); + wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor, + "shouldBe " + topColor, tolerance); + } + + function runTest(videoElement) + { + var red = [255, 0, 0]; + var green = [0, 255, 0]; + runOneIteration(videoElement, false, true, red, green); + runOneIteration(videoElement, false, false, green, red); + runOneIteration(videoElement, true, true, red, green); + runOneIteration(videoElement, true, false, green, red); + + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); + + runNextVideo(); + } + + return init; +} diff --git a/dom/canvas/test/webgl-conf/checkout/extra/texture-allocation-stress-test.html b/dom/canvas/test/webgl-conf/checkout/extra/texture-allocation-stress-test.html new file mode 100644 index 0000000000..e27628b621 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/texture-allocation-stress-test.html @@ -0,0 +1,47 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Tests that resources allocated by a WebGL context are freed in a reasonable timeframe.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<canvas id="canvas" width="32" height="32"> +</canvas> +<script> +"use strict"; +description(); + +debug("Creates a WebGL context and textures consuming ~80 MB of video memory, then reloads the page and does it over again.") +debug("GPU memory usage should be capped. It should not grow unboundedly.") + +var wtu = WebGLTestUtils; + +var gl = wtu.create3DContext(document.getElementById("canvas")); +var textures = []; + +for (var ii = 0; ii < 20; ++ii) { + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1024, 1024, 0, gl.RGBA, gl.UNSIGNED_BYTE, + null); + textures.push(tex); +} + +setTimeout(function() { debug("Reloading..."); window.location.reload(); }, 500); + +var successfullyParsed = true; +</script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/texture-from-camera-stress.html b/dom/canvas/test/webgl-conf/checkout/extra/texture-from-camera-stress.html new file mode 100644 index 0000000000..0a9816ae07 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/texture-from-camera-stress.html @@ -0,0 +1,79 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Stresses the camera-to-texture upload path.</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"> </script> +</head> +<body> +<div id="description"></div> +<div id="console"></div> +<canvas id="canvas" width="640" height="360"> +</canvas> +<script> +"use strict"; +description(); + +debug("Repeatedly uploads from a camera video element to a texture, many times per frame.") + +const wtu = WebGLTestUtils; +const gl = wtu.create3DContext(document.getElementById('canvas')); +const video = document.createElement('video'); +video.src = ''; +video.loop = false; +video.muted = true; +video.setAttribute('playsinline', ''); + +const program = wtu.setupTexturedQuad(gl); +const textureLoc = gl.getUniformLocation(program, "tex"); +gl.uniform1i(textureLoc, 0); + +const texture = gl.createTexture(); +gl.bindTexture(gl.TEXTURE_2D, texture); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); +gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); + +navigator.mediaDevices.getUserMedia({ + audio: false, + video: { + facingMode: 'environment', + width: 1280, + height: 720, + } + }) + .then(mediaStream => { + video.srcObject = mediaStream; + video.onloadedmetadata = () => { + wtu.startPlayingAndWaitForVideo(video, startTestLoop); + }; + }); + +const urlOptions = wtu.getUrlOptions(); +const uploadsPerFrame = urlOptions.uploadsPerFrame ? urlOptions.uploadsPerFrame : 400; +debug(''); +debug(`Testing with ${uploadsPerFrame} uploads per frame`); + +function startTestLoop() { + requestAnimationFrame(startTestLoop); + for (let i = 0; i < uploadsPerFrame; ++i) { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video); + } + wtu.clearAndDrawUnitQuad(gl); +} + +var successfullyParsed = true; +</script> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html b/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html new file mode 100644 index 0000000000..efbb65fea7 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/texture-sizing.html @@ -0,0 +1,229 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> +<!DOCTYPE html> +<html> +<head> +<title>Testing resolution of texture uploads</title> +<style> + +.result { + margin-bottom: 20px; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; +} + +.description, .element, .render, .log { + border: 1px solid black; + margin: 5px; + width: 200px; + height: 200px; + max-width: 200px; + max-height: 200px; +} + +.render canvas { + width: 200px; + height: 200px; +} + +p { + margin: 0; + padding: 5px 10px; +} +.viacss { + width: 200px; + height: 200px; +} +</style> +<script src="../js/webgl-test-utils.js"> </script> +<script> + +var outOfPageSVG = new Image(); +outOfPageSVG.src = "sample.svg"; + +function runTest() { + var wtu = WebGLTestUtils; + var results = document.querySelectorAll(".result"); + for (var i = 0; i < results.length; i++) { + var result = results[i]; + var img = result.querySelector("img"); + if (result.classList.contains("out-of-page")) { + img = outOfPageSVG; + } + if (result.classList.contains("set-dimensions")) { + img.width = 200; + img.height = 200; + } + var out = result.querySelector(".output"); + out.innerHTML = "img.width = " + img.width + "<br>img.height = " + img.height + "<br>img.naturalWidth = " + img.naturalWidth + "<br>img.naturalHeight = " + img.naturalHeight; + + var canvas = document.createElement("canvas"); + canvas.width = 200 * window.devicePixelRatio; + canvas.height = 200 * window.devicePixelRatio; + result.querySelector(".render").appendChild(canvas); + var gl = wtu.create3DContext(canvas); + gl.enable(gl.BLEND); + gl.disable(gl.DEPTH_TEST); + + var program = wtu.setupSimpleTextureProgram(gl, 0, 1); + var buffers = wtu.setupUnitQuad(gl, 0, 1); + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); + var loc = gl.getUniformLocation(program, "tex"); + gl.uniform1i(loc, 0); + + wtu.clearAndDrawUnitQuad(gl, [0, 255, 0, 255]); + } +} + +window.addEventListener("load", function () { + runTest(); +}, false); +</script> +</head> +<body> +<div class="result"> + <div class="description"> + <p>IMG to SVG with 200x200 attributes</p> + </div> + <div class="element"> + <img src="sample.svg" width="200" height="200"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p>IMG to 100x100 PNG with 200x200 attributes</p> + </div> + <div class="element"> + <img src="sample-100.png" width="200" height="200"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p>IMG to 200x200 PNG with 200x200 attributes</p> + </div> + <div class="element"> + <img src="sample-200.png" width="200" height="200"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p>IMG to 400x400 PNG with 200x200 attributes</p> + </div> + <div class="element"> + <img src="sample-400.png" width="200" height="200"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p>IMG SRCSET to multiple PNGs with 200x200 attributes</p> + </div> + <div class="element"> + <img src="sample-100.png" srcset="sample-200.png 1x, sample-400.png 2x" width="200" height="200"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p>IMG to SVG with no attributes - 200x200 sizing via CSS</p> + </div> + <div class="element"> + <img src="sample.svg" class="viacss"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p>IMG to 400x400 PNG with no attributes - 200x200 sizing via CSS</p> + </div> + <div class="element"> + <img src="sample-400.png" class="viacss"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result"> + <div class="description"> + <p> + IMG to SVG with no attributes and no sizing via CSS<br> + (although the width and height of the container set a size) + </p> + </div> + <div class="element"> + <img src="sample.svg"> + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result out-of-page"> + <div class="description"> + <p>Out of page SVG with no dimensions</p> + </div> + <div class="element"> + Not a child of document + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> +<div class="result out-of-page set-dimensions"> + <div class="description"> + <p>Out of page SVG with 200x200 specified</p> + </div> + <div class="element"> + Not a child of document + </div> + <div class="render"> + </div> + <div class="log"> + <p class="output"></p> + </div> +</div> + +</body> +</html> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/webgl-compressed-texture-size-limit-stress.html b/dom/canvas/test/webgl-conf/checkout/extra/webgl-compressed-texture-size-limit-stress.html new file mode 100644 index 0000000000..9f515be7ac --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/webgl-compressed-texture-size-limit-stress.html @@ -0,0 +1,33 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL compressed texture size limit stress test</title> +<link rel="stylesheet" href="../resources/js-test-style.css"/> +<script src="../js/js-test-pre.js"></script> +<script src="../js/webgl-test-utils.js"></script> +<script src="../js/tests/webgl-compressed-texture-size-limit.js"></script> +</head> +<body> +<canvas id="example" width="32" height="32" style="width: 40px; height: 40px;"></canvas> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +enableJSTestPreVerboseLogging(); +description("Checks size limit of the webgl compressed textures. Variation on the corresponding conformance test that stresses the browser with large ArrayBuffer allocations, and both valid and invalid large texture uploads.") + +// Use the theoretical 4 GB - 1 byte limit for ArrayBuffer allocations. +// The maximum texture size is often so large that it will certainly cause OOM with a cube map, so limit the positive test to a somewhat smaller size, even though this is a stress test. +runCompressedTextureSizeLimitTest(Math.pow(2, 32) - 1, 8192); + +var successfullyParsed = true; +</script> +</body> +</html>
\ No newline at end of file diff --git a/dom/canvas/test/webgl-conf/checkout/extra/webgl-drawelements-validation.html b/dom/canvas/test/webgl-conf/checkout/extra/webgl-drawelements-validation.html new file mode 100644 index 0000000000..c7e11b8cec --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/webgl-drawelements-validation.html @@ -0,0 +1,142 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<title>Micro-benchmark for WebGL drawElements index validation</title> +<style> +canvas { + border: 1px solid #000; +} +</style> +<script src="../js/webgl-test-utils.js"></script> +<script type="application/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> diff --git a/dom/canvas/test/webgl-conf/checkout/extra/webgl-info.html b/dom/canvas/test/webgl-conf/checkout/extra/webgl-info.html new file mode 100644 index 0000000000..9929edb178 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/webgl-info.html @@ -0,0 +1,275 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Information</title> +<style type="text/css"> +th, td { + padding: 4pt; +} +th { + text-align: right; + min-width: 22em; +} +</style> +<script src="../js/webgl-test-utils.js"> </script> +<script> +"use strict"; +window.onload = main; + +function createCell(txt, isTh) { + var str = txt.toString(); + if (typeof txt != 'string') { + if (txt.length !== undefined) { + str = ""; + for (var ii = 0; ii < txt.length; ++ii) { + str += (ii == 0 ? "" : ", ") + txt[ii]; + } + } + } + var t = document.createTextNode(str); + var d = document.createElement("div"); + var td; + if (isTh) { + td = document.createElement("th"); + } else { + td = document.createElement("td"); + } + d.appendChild(t); + td.appendChild(d); + return td; +} + +function createRow(values) { + var tr = document.createElement("tr"); + for (var i = 0; i < values.length; ++i) { + var td = createCell(values[i], i == 0); + tr.appendChild(td); + } + return tr; +} + +function main() { + var wtu = WebGLTestUtils; + + var canvas = document.getElementById("example"); + var gl = wtu.create3DContext(canvas); + if (!gl) { + return; + } + + var debugRendererInfoRows = function() { + var rows = []; + var debugExt = wtu.getExtensionWithKnownPrefixes(gl, 'WEBGL_debug_renderer_info'); + if (debugExt) { + var extPnames = [ + 'UNMASKED_VENDOR_WEBGL', + 'UNMASKED_RENDERER_WEBGL' + ]; + for (var ii = 0; ii < extPnames.length; ++ii) { + var pname = extPnames[ii]; + var value = gl.getParameter(debugExt[pname]); + rows.push([pname, value]); + } + } + return rows; + }; + + var precisionRows = function() { + var rows = []; + + var addPrecisionRow = function(shaderType, precision) { + var typeStr = shaderType === gl.FRAGMENT_SHADER ? 'fragment' : 'vertex'; + var precisionStr = 'highp'; + if (precision == gl.MEDIUM_FLOAT) { + precisionStr = 'mediump'; + } else if (precision == gl.LOW_FLOAT) { + precisionStr = 'lowp'; + } + rows.push([typeStr + ' shader ' + precisionStr + ' float', gl.getShaderPrecisionFormat(shaderType, precision).precision + ' mantissa bits']); + }; + + var fSource = 'precision highp float; uniform float r; void main() { gl_FragColor = vec4(r, 0.0, 0.0, 1.0); }' + var f = wtu.loadShader(gl, fSource, gl.FRAGMENT_SHADER); + if (!f) { + rows.push(['fragment shader highp float', 'not supported']); + } else { + addPrecisionRow(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT); + } + addPrecisionRow(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT); + addPrecisionRow(gl.FRAGMENT_SHADER, gl.LOW_FLOAT); + addPrecisionRow(gl.VERTEX_SHADER, gl.HIGH_FLOAT); + addPrecisionRow(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT); + addPrecisionRow(gl.VERTEX_SHADER, gl.LOW_FLOAT); + return rows; + }; + + var renderTargetRows = function() { + var rows = []; + var oesTextureFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_float'); + var oesTextureHalfFloat = wtu.getExtensionWithKnownPrefixes(gl, 'OES_texture_half_float'); + var formatsToTest = [ + { + description: 'RGBA UNSIGNED_BYTE', + format: gl.RGBA, + type: gl.UNSIGNED_BYTE + }, + { + description: 'RGB UNSIGNED_BYTE', + format: gl.RGB, + type: gl.UNSIGNED_BYTE + } + ]; + if (oesTextureFloat) { + formatsToTest.push({ + description: 'RGBA FLOAT', + format: gl.RGBA, + type: gl.FLOAT + }); + formatsToTest.push({ + description: 'RGB FLOAT (deprecated)', + format: gl.RGB, + type: gl.FLOAT + }); + } + if (oesTextureHalfFloat) { + formatsToTest.push({ + description: 'RGBA HALF_FLOAT_OES', + format: gl.RGBA, + type: oesTextureHalfFloat.HALF_FLOAT_OES + }); + formatsToTest.push({ + description: 'RGB HALF_FLOAT_OES', + format: gl.RGB, + type: oesTextureHalfFloat.HALF_FLOAT_OES + }); + } + for (var ii = 0; ii < formatsToTest.length; ++ii) { + var fb = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, fb); + var format = formatsToTest[ii]; + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texImage2D(gl.TEXTURE_2D, 0, format.format, 256, 256, 0, format.format, format.type, null); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); + if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) { + rows.push([format.description, 'supported']); + } else { + rows.push([format.description, 'not supported']); + } + gl.deleteFramebuffer(fb); + gl.deleteTexture(tex); + } + return rows; + }; + + var info = [ + { + title: 'Renderer', + pnames: [ + 'VERSION', + 'VENDOR', + 'RENDERER' + ], + genRows: debugRendererInfoRows + }, + { + title: 'Textures and Viewport', + pnames: [ + 'MAX_TEXTURE_SIZE', + 'MAX_CUBE_MAP_TEXTURE_SIZE', + 'MAX_RENDERBUFFER_SIZE', + 'MAX_VIEWPORT_DIMS' + ] + }, + { + title: 'Shader Variables', + pnames: [ + 'MAX_VARYING_VECTORS', + 'MAX_VERTEX_ATTRIBS', + 'MAX_VERTEX_UNIFORM_VECTORS', + 'MAX_FRAGMENT_UNIFORM_VECTORS', + 'MAX_VERTEX_TEXTURE_IMAGE_UNITS', + 'MAX_TEXTURE_IMAGE_UNITS', + 'MAX_COMBINED_TEXTURE_IMAGE_UNITS' + ] + }, + { + title: 'Shader Precision', + genRows: precisionRows + }, + { + title: 'Framebuffer Texture Attachment Support', + genRows: renderTargetRows + } + ]; + + // TODO: max anisotropy, framebuffer depth bits, MSAA samples, max multiple render targets buffers, point size, line width + + for (var jj = 0; jj < info.length; ++jj) { + var table = document.createElement("table"); + var tb = document.createElement("tbody"); + if (info[jj].pnames) { + var pnames = info[jj].pnames; + for (var ii = 0; ii < pnames.length; ++ii) { + var pname = pnames[ii]; + var value = gl.getParameter(gl[pname]); + tb.appendChild(createRow([pname, value])); + } + } + if (info[jj].genRows) { + var genRows = info[jj].genRows(); + for (var ii = 0; ii < genRows.length; ++ii) { + tb.appendChild(createRow(genRows[ii])); + } + } + table.appendChild(tb); + var header = document.createElement("h2"); + header.textContent = info[jj].title; + document.getElementById("info").appendChild(header); + document.getElementById("info").appendChild(table); + } + var extensionList = document.createElement('ul'); + var exts = gl.getSupportedExtensions(); + var extsWithPrefixes = []; + while (exts.length > 0) { + var prefixedNames = wtu.getExtensionPrefixedNames(exts[0]); + var supportedPrefixedNames = []; + for (var ii = 0; ii < prefixedNames.length; ++ii) { + var index = exts.indexOf(prefixedNames[ii]); + if (index >= 0) { + supportedPrefixedNames.push(exts[index]); + exts.splice(index, 1); + } + } + extsWithPrefixes.push(supportedPrefixedNames.join(" / ")); + } + extsWithPrefixes.sort(); + for (var ii = 0; ii < extsWithPrefixes.length; ++ii) { + var li = document.createElement('li'); + li.appendChild(document.createTextNode(extsWithPrefixes[ii])); + extensionList.appendChild(li); + } + document.getElementById('extensions').appendChild(extensionList); +} +</script> +</head> +<body> +<h1>WebGL Info</h1> +<div id="info"></div> +<h2>WebGL Extensions</h2> +<div id="extensions"></div> +<canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"></canvas> +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/webgl-translate-shader.html b/dom/canvas/test/webgl-conf/checkout/extra/webgl-translate-shader.html new file mode 100644 index 0000000000..55176b6ffd --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/webgl-translate-shader.html @@ -0,0 +1,153 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL Shader Translator</title> +<style> +textarea { + min-width: 70%; + min-height: 200px; + font-family: monospace; + background: #def; +} +#disabled { + color: red; + font-weight: bold; +} +</style> +<script> +// Needed by wtu.create3DContext(): +var testFailed = function() {}; +</script> +<script src="../js/webgl-test-utils.js"> </script> +<script> +"use strict"; +window.onload = main; + +var gl; +var debugShaders; +var enabledExtensions = []; + +var translateButton; +var extButton; + +function main() { + translateButton = document.getElementById('translate'); + extButton = document.getElementById('getExts'); + + var wtu = WebGLTestUtils; + // Prioritize creating a WebGL 2 context if possible - if not, fall back to WebGL 1. + gl = wtu.create3DContext(undefined, undefined, 2); + if (!gl || !gl.getExtension('WEBGL_debug_shaders')) + { + gl = wtu.create3DContext(); + } + if (!gl) { + disable(); + return; + } + + debugShaders = gl.getExtension('WEBGL_debug_shaders'); + if (!debugShaders) { + disable(); + } +} + +function disable() { + translateButton.disabled = true; + extButton.disabled = true; + document.getElementById('disabled').style.display = 'block'; +} + +function getExtensions() { + getExtensionSet([ + 'EXT_frag_depth', + 'EXT_shader_texture_lod', + 'OES_standard_derivatives', + 'WEBGL_draw_buffers' + ]); +} + +function getExtensionSet(shaderExtensions) { + for (var i = 0; i < shaderExtensions.length; ++i) { + if (enabledExtensions.indexOf(shaderExtensions[i]) < 0) { + var ext = gl.getExtension(shaderExtensions[i]); + if (ext) { + enabledExtensions.push(shaderExtensions[i]); + } + } + } + if (enabledExtensions.length > 0) { + document.getElementById('enabled-extensions').textContent = enabledExtensions.join(', '); + } +} + +function translateShader() { + var sourceElement = document.getElementById('original-shader'); + var source = sourceElement.value; + + var output = document.getElementById('translated-shader'); + var infoLog = document.getElementById('info-log'); + var shaderType = document.getElementById('shader-type'); + infoLog.value = ''; + + // Try compiling the source as both vertex and fragment shader and see if either one works + var tryCompile = function(type) { + var shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + var shaderTypeStr; + if (type == gl.FRAGMENT_SHADER) { + shaderTypeStr = 'Fragment shader'; + } else { + shaderTypeStr = 'Vertex shader'; + } + if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + shaderType.textContent = shaderTypeStr; + var translatedSource = debugShaders.getTranslatedShaderSource(shader); + output.value = translatedSource; + infoLog.value = gl.getShaderInfoLog(shader); + return true; + } else { + infoLog.value += 'Info log when compiling as ' + shaderTypeStr + ':\n' + gl.getShaderInfoLog(shader) + '\n'; + return false; + } + } + + if (!tryCompile(gl.FRAGMENT_SHADER) && !tryCompile(gl.VERTEX_SHADER)) { + output.value = 'Invalid shader, compilation failed as both fragment and vertex shader.'; + shaderType.textContent = 'Shader not'; + } +} +</script> +</head> +<body> +<h1>WebGL Shader Translator</h1> +<p>This page uses the browser's built-in shader translation facilities to show how a shader +is changed before being passed on to the underlying platform's graphics driver.</p> +<p id="disabled" style="display: none;"> + WebGL or WEBGL_debug_shaders extension is not available on this browser configuration. + Use a different browser or look for other alternatives to enable the extension to be able to use this page. + The extension might be behind a runtime flag for privacy considerations. +</p> +<h2>WebGL GLSL shader</h2> +<textarea id="original-shader"></textarea> +<p> +<input type="button" id="translate" value="Translate" onclick="translateShader()"></input> +<input type="button" id="getExts" value="Enable supported GLSL extensions" onclick="getExtensions()"></input> +</p> +<h2><span id="shader-type">Shader</span> translated for graphics driver</h2> +<textarea id="translated-shader"></textarea> +<h2>Enabled shader extensions</h2> +<p id="enabled-extensions">None</p> +<h2>Shader info log</h2> +<textarea id="info-log"></textarea> +</body> +</html> + diff --git a/dom/canvas/test/webgl-conf/checkout/extra/workload-simulator.html b/dom/canvas/test/webgl-conf/checkout/extra/workload-simulator.html new file mode 100644 index 0000000000..fa01977321 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/extra/workload-simulator.html @@ -0,0 +1,851 @@ +<!DOCTYPE html><meta charset="utf-8"> +<meta name=viewport content="width=900"> +<title>WebGL workload simulator</title> +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> +<style> +body { + margin: 0; + font-family: monospace; + user-select: none; + -moz-user-select: -moz-none; + -webkit-user-select: none; + font-size: 22px; + text-size-adjust: none; +} +pre { margin: 0; } +.square img { position: relative; } +.square { + overflow: hidden; + border-bottom: 20px solid black; + border-right: 20px solid black; + display: block; +} + +#fpsSpan { font-size: 30px; } +#fpsPanel { + position: fixed; + text-align: right; + left: 550px; + top: 0px; + width: 300px; + font-size: 12px; + margin: 10px; + pointer-events: none; +} + +input, label { white-space: pre; pointer-events: auto; } +input { margin: 15px 15px; transform: scale(2); } +input[type="number"] { width: 50px; } +input[type="range"] { + width: 100px; + margin: 30px 200px; + padding: 0px; + transform: scale(4); +} + +.rotate { animation: rotating 2s linear infinite; } +@keyframes rotating { + from { transform: scale(2) rotate(0deg); } + to { transform: scale(2) rotate(360deg); } +} + +.bad { color: red; } +.light { color: #CCCCCC; } +#warning { + color: #FF0000; +} +</style> + +<canvas id=webglCanvas class=square></canvas> +<canvas id=canvas class=square style=display:none;></canvas> +<div id=dom class=square style=display:none;background:white> + <img id=img style=width:256px;height:256px;background:black></img> +</div> +<div style=margin:2em;margin-top:0> +<div id=warning></div> +Drag the WebGL logo.<br> +<label for=useGl>Renderer: <input type=radio name=renderer id=useGl checked>WebGL</label> +<label for=use2D><input type=radio name=renderer id=use2D>Canvas 2D</label> +<label for=useDom><input type=radio name=renderer id=useDom>DOM</label> +<br> +<label for=animate><input type=checkbox name=animate id=animate>Animate</label> +<span id=continuousOptions> + <label for=useRaf><input type=radio name=loop id=useRaf checked>requestAnimationFrame</label> + <label for=usePostMessage><input type=radio name=loop id=usePostMessage>postMessage</label> + <label for=useSetTimeout><input type=radio name=loop id=useSetTimeout>setTimeout</label> + <label for=useSetInterval><input type=radio name=loop id=useSetInterval>setInterval</label> + <br> + <div id=fpsOptions> + <input id=fpsSlider type=range min=10 max=240 step=10 value=60> + Target FPS: <span id=fpsLabel>60</span> + </div> +</span> +<details id=canvasOptions> + <summary>Canvas options</summary> + <div id=canvas2DOptions> + Canvas size <input type=number id=canvasSize value=512 min=1> pixels<sup>2</sup> + <label for=onscreen><input type=radio name=offscreen id=onscreen checked>Regular canvas</label> + <label for=offscreen><input type=radio name=offscreen id=offscreen>OffscreenCanvas (on main thread)</label> + <!-- <label for=offscreenWorker><input type=radio name=offscreen id=offscreenWorker>OffscreenCanvas on worker</label> --> + <br> + <label for=transferControlToOffscreen><input type=checkbox id=transferControlToOffscreen checked>Use transferControlToOffscreen</label> + </div> +</details> +<div id=glOptions> + <details id=glWork> + <summary>WebGL rendering work</summary> + <div id=pixelsWrapper> + <input type=range id=pixels min=65536 max=65536000 value=65536 step=65536> + draw <span id=pixelsLabel>64K</span> pixels per view + </div> + <input type=range id=drawCalls min=0 max=10000 value=0 step=10> + using <span id=drawCallsLabel>1</span> draw call(s) per view + <br> + Multiply the above slider values by: + <label for=x1><input type=radio name=multiplier id=x1 checked>1 </label> + <label for=x10><input type=radio name=multiplier id=x10>10 </label> + <label for=x100><input type=radio name=multiplier id=x100>100 </label> + <br> + <input type=range id=uploads min=0 max=256 value=0 step=0.25> + <span id=uploadLabel>0.00</span> MB glBufferData + <br> + <label for=finish><input type=checkbox id=finish>glFinish</label> + <br> + <label for=readPixels><input type=checkbox id=readPixels>glReadPixels</label> + </details> + <details id=contextCreation> + <summary>WebGL context creation options</summary> + <label for=useWebGL2><input type=checkbox id=useWebGL2 checked>Use WebGL 2 if available</label> + <label for=antialias><input type=checkbox id=antialias checked>Antialias</label> + <label for=alpha><input type=checkbox id=alpha checked>Alpha</label> + <label for=depth><input type=checkbox id=depth checked>Depth</label> + <label for=stencil><input type=checkbox id=stencil>Stencil</label> + <label for=premultipliedAlpha><input type=checkbox id=premultipliedAlpha checked>Premultiplied Alpha</label> + <label for=preserveDrawingBuffer><input type=checkbox id=preserveDrawingBuffer>Preserve Drawing Buffer</label> + <label for=desynchronized><input type=checkbox id=desynchronized>Desynchronized</label> + <br> + Power preference + <label for=ppDefault><input type=radio name=pp id=ppDefault checked>default</label> + <label for=lowPower><input type=radio name=pp id=lowPower>low-power</label> + <label for=highPerformance><input type=radio name=pp id=highPerformance>high-performance</label> + <br> + <label for=separateHighPowerContext><input type=checkbox id=separateHighPowerContext>Activate high power GPU (by creating a separate high power context)</label> + </details> + <div id=multiviewOptions> + <input type=range id=views min=1 max=4 value=0 step=1> + Draw <span id=viewsLabel>1</span> views(s) + <br> + <label for=multiview><input type=checkbox id=multiview>Use OVR_multiview2</label> + <label for=multiviewCopy><input type=checkbox id=multiviewCopy checked>Copy multiview draw results to main canvas</label> + </div> + <pre id=contextVersion> + </pre> + <details id=contextAttributes> + <summary>Context attributes</summary> + <pre></pre> + </details> + <details id=supportedExtensions> + <summary>Supported Extensions</summary> + </details> +</div> +<br> +<input type=range id=jsWork min=0 max=100 value=0> +<span id=jsWorkLabel>0</span> ms extra Javascript work per frame +<br> +<label for=animation><input type=checkbox id=animation>CSS animation</label> + +<div id=fpsPanel> + <label for=showFps><input type=checkbox id=showFps checked>Show FPS</label> + <div id=fps> + <span id=fpsSpan></span> + <p> + <label for=showStats><input type=checkbox id=showStats>More info</label> + <div id=stats></div> + </div> +</div> + +<iframe id=highPowerFrame style=display:none></iframe> + +<h2><center>WebGL workload simulator</center></h2> +</div> + +<script> +'use strict'; +// Add all elements with ids as global readonly variables. +for (let element of document.documentElement.querySelectorAll('[id]')) + Object.defineProperty(this, element.id, {value: element, writeable: false}); + + +/************\ +* Options UI * +\************/ + + +// Set all input elements with values from the query string. +const controls = document.querySelectorAll('input, details'); +const defaultChecked = {}; +const defaultValues = {}; +const defaultMaxes = {}; +for (const control of controls) { + if (!control.id) continue; + defaultChecked[control.id] = control.checked; + defaultValues[control.id] = control.value; + defaultMaxes[control.id] = control.max; + const param = window.location.search.match(control.id + '(?:=([^&]*))?'); + if (param) { + if (control.type == 'radio') + control.checked = true; + else if (control.type == 'checkbox') + control.checked = param[1] != 'false'; + else if (control instanceof HTMLDetailsElement) + control.open = true; + else + control.value = param[1]; + } + control.oninput = updateControls; + if (control instanceof HTMLDetailsElement) + control.onclick = ()=>setTimeout(updateControls, 0); +} +// Some controls require a page reload when changed. +const reloadControls = ['useWebGL2', 'antialias', 'alpha', 'depth', 'stencil', 'premultipliedAlpha', 'preserveDrawingBuffer', 'desynchronized', 'ppDefault', 'lowPower', 'highPerformance', 'canvasSize', 'onscreen', 'offscreen', 'transferControlToOffscreen'].map(x=>window[x]); +for (let control of reloadControls) { + control.onchange = ()=>{ + updateControls(); + callReplaceStateThrottled(); + location.reload(); + }; +} + +separateHighPowerContext.onchange = ()=>{ + if (!separateHighPowerContext.checked) + highPowerFrame.contentDocument.location.reload(); + else { + const doc = highPowerFrame.contentDocument; + const canvas = doc.createElement('canvas'); + doc.body.appendChild(canvas); + canvas.getContext('webgl', {powerPreference: 'high-performance'}); + } +} +separateHighPowerContext.onchange(); + +let queryString = window.location.search; +let previousQueryString = queryString; +let replaceStateScheduled = false; +function callReplaceStateThrottled() { + replaceStateScheduled = false; + if (queryString == previousQueryString) + return; + previousQueryString = queryString; + let path = window.location.pathname; + history.replaceState(null, null, queryString == '?' ? path : path + queryString); +} +const suffixes = ['', 'K', 'M', 'G', 'E'] +const divisors = []; +for (let i = 0; i < suffixes.length; i++) + divisors[i] = Math.pow(10, i * 3); +const formatSI = (x) => { + const order = Math.min(Math.log10(Math.abs(x)) / 3 | 0, suffixes.length); + return (x / divisors[order]).toFixed(1) + suffixes[order]; +} +var multiplier; +function updateControls() { + multiplier = x1.checked ? 1 : x10.checked ? 10 : 100; + webglCanvas.style.display = useGl.checked ? 'block' : 'none'; + canvas.style.display = use2D.checked ? 'block' : 'none'; + dom.style.display = useDom.checked ? 'block' : 'none'; + animation.className = animation.checked ? 'rotate' : null; + canvasOptions.style.display = useDom.checked ? 'none' : ''; + transferControlToOffscreen.parentElement.style.display = onscreen.checked ? 'none' : ''; + continuousOptions.style.display = animate.checked ? '' : 'none'; + glOptions.style.display = useGl.checked ? '' : 'none'; + multiviewOptions.style.display = (useGl.checked && multiviewAvailable) ? '' : 'none'; + fpsOptions.style.display = + animate.checked && (useSetTimeout.checked || useSetInterval.checked) ? + '' : 'none'; + fps.style.visibility = showFps.checked ? 'visible' : 'hidden'; + stats.style.visibility = showStats.checked ? 'visible' : 'hidden'; + drawCallsLabel.textContent = Math.max(1, drawCalls.value * multiplier); + pixelsLabel.textContent = formatSI(pixels.value * multiplier); + jsWorkLabel.textContent = jsWork.value; + fpsLabel.textContent = fpsSlider.value; + uploadLabel.textContent = + parseFloat(uploads.value).toFixed(2); + viewsLabel.textContent = views.value; + // Multiview is currently incompatible with multisampling. + if ((views.value > 1 || multiview.checked) && antialias.checked) + antialias.click(); + + const queryParams = []; + for (const control of controls) { + if (control.type == 'radio') { + if (!defaultChecked[control.id] && control.checked) + queryParams.push(control.id); + } else if (control.type == 'checkbox') { + if (control.checked != defaultChecked[control.id]) + queryParams.push(defaultChecked[control.id] ? control.id + '=' + control.checked : control.id); + } else if (control instanceof HTMLDetailsElement) { + if (control.open) + queryParams.push(control.id); + } else if (control.value != defaultValues[control.id]) { + queryParams.push(control.id + '=' + control.value); + } + } + queryString = '?' + queryParams.join('&'); + if (!replaceStateScheduled) { + replaceStateScheduled = true; + setTimeout(callReplaceStateThrottled, 200); + } + render(); +}; + + +/**********************\ +* Input event handling * +\**********************/ + + +const imgSize = 256; +const size = parseInt(canvasSize.value); +let multiviewAvailable = false; +let webglVersion; + +let mouseDown = false; +const lastPos = [0, 0]; +document.onmouseup = (e) => { mouseDown = false; } +document.onmousedown = (e) => { + mouseDown = true; + lastPos[0] = e.pageX; + lastPos[1] = e.pageY; +}; +document.ontouchstart = (e) => { + lastPos[0] = e.touches[0].pageX; + lastPos[1] = e.touches[0].pageY; +} +const position = [(size - imgSize) / 2, (size - imgSize) / 2]; +let continuousRunning = false; +let mouseUpdatesThisFrame = 0; +function mouseMove(e) { + mouseUpdatesThisFrame++; + countFps("mouse/touchmove event"); + const xy = [0, 0]; + if (e.touches) { + xy[0] = e.touches[0].pageX; + xy[1] = e.touches[0].pageY; + } else { + xy[0] = e.pageX; + xy[1] = e.pageY; + } + if (e.touches || mouseDown) { + for (let i = 0; i < 2; ++i) { + position[i] += xy[i] - lastPos[i]; + position[i] = Math.max(0, Math.min(size - imgSize, position[i])); + lastPos[i] = xy[i]; + } + if (!continuousRunning) { + render(); + } + } +} +document.addEventListener("mousemove", mouseMove, true); +document.body.addEventListener("touchmove", mouseMove, true); +for (const element of [dom, canvas, webglCanvas, img]) + element.onmousedown = element.ontouchstart = (e)=>e.preventDefault(); + + + +/***********\ +* Rendering * +\***********/ + + +webglCanvas.width = webglCanvas.height = canvas.width = canvas.height = size; +dom.style.width = dom.style.height = size + 'px'; + +window.onmessage = () => render(false, true); + +let ctx; +let bitmapRenderer; +let offscreenCanvas; +let gl; +let glBitmapRenderer; +let glOffscreenCanvas; +let program; +let buffer; +const borderSize = 10; +const vertices = [0, 0, 1, 0, 0, 1, 1, 1]; +const readPixelsArray = new Uint8Array(4); +let writeBufferArray = new Float32Array(0); +let interval; +let intervalFps; +let timeout = null; +let rafPending = 0; +let postMessagePending = 0; + +let maxViewsMultiview = 2; +let multiviewProgram = []; +let multiviewExt = null; +let multiviewTexture = null; +let multiviewFramebuffer = null; +let viewFramebuffer = []; +let lastNumViews = 0; + +let displayedWarningText = ''; +let warningText = ''; + +const animationDirection = [1, -1]; +function render(fromRaf, fromPostMessage) { + if (fromRaf) rafPending--; + if (fromPostMessage) postMessagePending--; + // Set up the appropriate render loop callback as specified by the UI, if + // continuous rendering is enabled. + continuousRunning = animate.checked; + if (continuousRunning) { + for (let i = 0; i < 2; ++i) { + position[i] += animationDirection[i] * 2; + if (position[i] > size - imgSize) { + position[i] = size - imgSize; + animationDirection[i] = -1; + } + if (position[i] < 0) { + position[i] = 0; + animationDirection[i] = 1; + } + } + if (useRaf.checked && rafPending == 0) { + (window.requestAnimationFrame || window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame)(function() { render(true); }); + rafPending++; + } + if (useSetTimeout.checked) { + clearTimeout(timeout); + timeout = setTimeout(render, 1 / fpsSlider.value * 1000); + } + if (useSetInterval.checked) { + if (!interval || intervalFps != fpsSlider.value) { + clearInterval(interval); + intervalFps = fpsSlider.value; + interval = setInterval(render, 1 / fpsSlider.value * 1000); + } + } else { + clearInterval(interval); + interval = null; + } + if (usePostMessage.checked) { + if (postMessagePending == 0) { + ++postMessagePending; + window.postMessage('', '*'); + } + } + } else { + clearInterval(interval); + interval = null; + } + + countFps("render", mouseUpdatesThisFrame); + mouseUpdatesThisFrame = 0; + + // Busy wait for a configurable amount of time. + const startMs = Date.now(); + while (Date.now() - startMs < jsWork.value); + + warningText = ''; + + // Initialize GL. + if (!gl) { + const options = {}; + for (let option of ['antialias', 'alpha', 'depth', 'stencil', 'premultipliedAlpha', 'preserveDrawingBuffer', 'desynchronized']) + options[option] = window[option].checked; + options.powerPreference = ppDefault.checked ? 'default' : lowPower.checked ? 'low-power' : 'high-performance'; + let renderCanvas = webglCanvas; + if (offscreen.checked) { + if (transferControlToOffscreen.checked) { + renderCanvas = webglCanvas.transferControlToOffscreen(); + } else { + glBitmapRenderer = webglCanvas.getContext('bitmaprenderer') + renderCanvas = glOffscreenCanvas = new OffscreenCanvas(size, size); + } + } + renderCanvas.width = renderCanvas.height = size; + if (useWebGL2.checked) + gl = renderCanvas.getContext('webgl2', options); + if (gl) { + webglVersion = 2; + } else { + webglVersion = 1; + gl = renderCanvas.getContext('webgl', options); + const aia = gl.getExtension('ANGLE_instanced_arrays'); + if (aia) + gl.drawArraysInstanced = (a, b, c, d)=>aia.drawArraysInstancedANGLE(a, b, c, d); + else { + pixels.value = pixels.min; + pixelsWrapper.style.display = 'none'; + gl.drawArraysInstanced = (a, b, c, d)=>gl.drawArrays(a, b, c); + } + } + // Read context info like renderer string and extensions. + let renderer = gl.getParameter(gl.RENDERER); + let debugRendererInfo = gl.getExtension('WEBGL_debug_renderer_info'); + if (debugRendererInfo) + renderer = gl.getParameter(debugRendererInfo.UNMASKED_RENDERER_WEBGL); + contextVersion.textContent = `WebGL Version: ${gl.getParameter(gl.VERSION)}\nRenderer: `; + const a = document.createElement('a'); + a.textContent = renderer; + a.href = `https://www.google.com/search?q=${encodeURIComponent(renderer)}` + contextVersion.appendChild(a); + contextAttributes.getElementsByTagName('pre')[0].textContent = JSON.stringify(gl.getContextAttributes(), 0, 2); + for (const e of gl.getSupportedExtensions()) { + const a = document.createElement('a'); + a.textContent = e; + a.href = `https://www.khronos.org/registry/webgl/extensions/${e}/`; + supportedExtensions.appendChild(a); + supportedExtensions.appendChild(document.createElement('br')); + } + + // Setup texture + const tex = gl.createTexture(); + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255])); + img.onload = ()=>{ + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); + gl.generateMipmap(gl.TEXTURE_2D); + render(); + }; + + function setupProgram(vsSource, fsSource, attribs, uniforms) { + let prog = gl.createProgram(); + function compileShader(source, type) { + const shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) + console.log(gl.getShaderInfoLog(shader)); + gl.attachShader(prog, shader); + } + compileShader(vsSource, gl.VERTEX_SHADER); + compileShader(fsSource, gl.FRAGMENT_SHADER); + for (let i = 0; i < attribs.length; ++i) + gl.bindAttribLocation(prog, i, attribs[i]); + gl.linkProgram(prog); + if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) + console.log(gl.getProgramInfoLog(prog)); + for (const attrib of attribs) + prog[attrib] = gl.getAttribLocation(prog, attrib); + for (const uniform of uniforms) + prog[uniform] = gl.getUniformLocation(prog, uniform); + return prog; + } + + program = setupProgram(` + attribute vec2 position; + varying vec2 texCoord; + uniform vec2 offset; + uniform float size; + void main() { + gl_Position = vec4(position * size + offset + vec2(size - 1., 1. - size), 0, 1); + texCoord = vec2(position.x, 1. - position.y); + }`,` + precision mediump float; + varying vec2 texCoord; + uniform vec4 colorAddition; + uniform sampler2D tex; + void main() { + gl_FragColor = texture2D(tex, texCoord) + colorAddition * 0.5; + }`, + ['position', 'texCoordIn'], ['offset', 'tex', 'size', 'colorAddition']); + gl.useProgram(program); + gl.uniform1i(program.tex, 0); + + if (webglVersion >= 2 && gl.getExtension('OVR_multiview2')) { + multiviewAvailable = true; + let ext = gl.getExtension('OVR_multiview2') + maxViewsMultiview = Math.min(gl.getParameter(ext.MAX_VIEWS_OVR), 16); + views.max = maxViewsMultiview; + for (let i = 0; i < maxViewsMultiview; ++i) { + multiviewProgram[i] = setupProgram(`#version 300 es + #extension GL_OVR_multiview2 : enable + layout(num_views=${i + 1}) in; + in vec2 position; + out vec2 texCoord; + uniform vec2 offset; + uniform float size; + void main() { + gl_Position = vec4(position * size + offset + vec2(size - 1., 1. - size), 0, 1); + texCoord = vec2(position.x, 1. - position.y); + }`, `#version 300 es + #extension GL_OVR_multiview2 : enable + precision mediump float; + in vec2 texCoord; + out vec4 my_FragColor; + uniform sampler2D tex; + void main() { + vec4 colorAddition = vec4(((gl_ViewID_OVR & 0x4u) != 0u) ? 1.0 : 0.0, + ((gl_ViewID_OVR & 0x2u) != 0u) ? 1.0 : 0.0, + ((gl_ViewID_OVR & 0x1u) != 0u) ? 1.0 : 0.0, + 1.0); + my_FragColor = texture(tex, texCoord) + colorAddition * 0.5; + }`, + ['position', 'texCoordIn'], ['offset', 'tex', 'size']); + gl.useProgram(multiviewProgram[i]); + gl.uniform1i(multiviewProgram[i].tex, 0); + } + } + + // Setup vertex buffer + buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STREAM_DRAW); + gl.enableVertexAttribArray(program.position); + gl.vertexAttribPointer(program.position, 2, gl.FLOAT, false, 0, 0); + + // Setup drawing state + gl.viewport(0, 0, size, size); + gl.clearColor(1, 1, 1, 1); + gl.disable(gl.SCISSOR_TEST); + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.STENCIL_TEST); + gl.disable(gl.BLEND); + gl.disable(gl.CULL_FACE); + + updateControls(); + } // End GL init + + if (useDom.checked) { + img.style.left = position[0] + 'px'; + img.style.top = position[1] + 'px'; + return; + } + if (use2D.checked) { + if (!ctx) { + if (offscreen.checked) { + if (transferControlToOffscreen.checked) { + offscreenCanvas = canvas.transferControlToOffscreen(); + } else { + bitmapRenderer = canvas.getContext('bitmaprenderer'); + offscreenCanvas = new OffscreenCanvas(size, size); + } + ctx = offscreenCanvas.getContext('2d'); + } else { + ctx = canvas.getContext('2d'); + } + } + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + try { + ctx.drawImage(img, position[0], position[1]); + } catch (e) { + ctx.fillStyle = 'black'; + ctx.fillRect(position[0], position[1], imgSize, imgSize); + } + if (offscreen.checked && !transferControlToOffscreen.checked && bitmapRenderer && offscreenCanvas) { + bitmapRenderer.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap()); + } + return; + } + + // Upload some data to test the PCI bottleneck. + if (uploads.value > 0) { + if (writeBufferArray.length * 4 != uploads.value * 1024 * 1024) { + writeBufferArray = new Float32Array(uploads.value * 1024 * 1024 / 4); + // We want to actually use this data in rendering so the graphics driver + // can't optimize away the upload. Fill the first few bytes with our real + // vertex data. + writeBufferArray.set(vertices, 0); + } + gl.bufferData(gl.ARRAY_BUFFER, writeBufferArray, gl.STREAM_DRAW); + } + + // Actually draw the map. + const numDrawCalls = Math.max(1, drawCalls.value * multiplier); + const numViews = multiviewAvailable ? Math.min(views.value, maxViewsMultiview) : 1; + const instances = pixels.value / 64000 * multiplier; + const instancesPerCall = Math.max(1, instances / numDrawCalls | 0); + const instancesFirstCall = instancesPerCall + numDrawCalls % instancesPerCall; + // Set up to scissor out all but one pixel of the map. + gl.scissor(position[0], size - position[1] - 1, 1, 1); + + if (multiviewAvailable && (multiview.checked || numViews > 1) && !multiviewFramebuffer) { + multiviewTexture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D_ARRAY, multiviewTexture); + gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, size, size, maxViewsMultiview); + multiviewExt = gl.getExtension('OVR_multiview2'); + multiviewFramebuffer = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, multiviewFramebuffer); + multiviewExt.framebufferTextureMultiviewOVR(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, multiviewTexture, 0, 0, numViews); + lastNumViews = numViews; + for (let i = 0; i < maxViewsMultiview; ++i) { + viewFramebuffer[i] = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, viewFramebuffer[i]); + gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, multiviewTexture, 0, i); + } + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + gl.bindTexture(gl.TEXTURE_2D_ARRAY, null); + } + + let usedProgram = program; + if (multiviewAvailable && multiview.checked) { + gl.bindFramebuffer(gl.FRAMEBUFFER, multiviewFramebuffer); + if (numViews != lastNumViews) { + multiviewExt.framebufferTextureMultiviewOVR(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, multiviewTexture, 0, 0, numViews); + lastNumViews = numViews; + } + usedProgram = multiviewProgram[numViews - 1]; + } else { + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + } + + gl.useProgram(usedProgram); + gl.uniform2f(usedProgram.offset, + (position[0] - imgSize) / size * 2, + -position[1] / size * 2); + gl.uniform1f(usedProgram.size, imgSize * 2 / size); + + if (usedProgram == program) { + gl.uniform4f(program.colorAddition, 0.0, 0.0, 0.0, 1.0); + } + + for (let viewIndex = 0; viewIndex < numViews; ++viewIndex) { + let scissorEnabled = false; + if (multiviewAvailable && !multiview.checked && numViews > 1) { + gl.bindFramebuffer(gl.FRAMEBUFFER, viewFramebuffer[viewIndex]); + gl.uniform4f(program.colorAddition, (viewIndex & 4) ? 1.0 : 0.0, (viewIndex & 2) ? 1.0 : 0.0, (viewIndex & 1) ? 1.0 : 0.0, 1.0); + gl.disable(gl.SCISSOR_TEST); + } + gl.clearColor(1, 1, 1, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, instancesFirstCall); + var instancesDrawn = instancesFirstCall; + for (let i = 1; i < numDrawCalls; i++) { + if (instancesDrawn > instances && !scissorEnabled) { + // If we've drawn all of the requested pixels already, enable the scissor + // test so we only draw one pixel per draw call for the rest of the calls. + scissorEnabled = true; + gl.enable(gl.SCISSOR_TEST); + } + gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, instancesPerCall); + instancesDrawn += instancesPerCall; + } + if (multiviewAvailable && multiview.checked) { + break; + } + } + gl.disable(gl.SCISSOR_TEST); + + if (multiviewAvailable && (multiview.checked || numViews > 1)) { + if (multiviewCopy.checked) { + gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null); + gl.clearColor(1, 1, 1, 1); + gl.clear(gl.COLOR_BUFFER_BIT); + let gridCellsPerRow = Math.ceil(Math.sqrt(numViews)); + for (let i = 0; i < numViews; ++i) { + gl.bindFramebuffer(gl.READ_FRAMEBUFFER, viewFramebuffer[i]); + let x = i % gridCellsPerRow; + let y = Math.floor(i / gridCellsPerRow); + x *= size / gridCellsPerRow; + y *= size / gridCellsPerRow; + gl.blitFramebuffer(0, 0, size, size, x, y, x + size / gridCellsPerRow, y + size / gridCellsPerRow, gl.COLOR_BUFFER_BIT, gl.NEAREST); + } + } else { + warningText = 'NOTE: Offscreen multiview rendering active - rendering not copied to canvas'; + } + } + + if (finish.checked) { + gl.finish(); + } + if (readPixels.checked) { + gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, readPixelsArray); + } + if (offscreen.checked && !transferControlToOffscreen.checked && glOffscreenCanvas && glBitmapRenderer) { + glBitmapRenderer.transferFromImageBitmap(glOffscreenCanvas.transferToImageBitmap()); + } +} + + +/**************\ +* FPS counters * +\**************/ + + +const counters = {}; +function countFps(name, mouseEventsThisFrame) { + let counter = counters[name]; + if (!counter) { + counter = { history: [Date.now() - 16], name: name, count: 0 }; + counters[name] = counter; + } + const history = counter.history; + history.push(Date.now()); + while (history.length > 2 && + history[0] + 1000 < history[history.length - 1]) { + counter.history.shift(); + } + let averageMs = 0; + let maxMs = .1; + let minMs = 99999999; + for (let i = 1; i < history.length; i++) { + let diff = history[i] - history[i - 1]; + averageMs += diff; + maxMs = Math.max(maxMs, diff); + minMs = Math.min(minMs, diff); + } + averageMs /= history.length - 1; + counter.fps = 1000 / averageMs; + counter.minFps = 1000 / maxMs; + counter.maxFps = 1000 / minMs; + counter.count++; + + if (mouseEventsThisFrame !== undefined) { + counter.mouseEvents = counter.mouseEvents || { multiple: 0, zero: 0 }; + if (mouseEventsThisFrame > 1) { + counter.mouseEvents.multiple++; + } else if (mouseEventsThisFrame == 0) { + counter.mouseEvents.zero++; + } + } + + if (showFps.checked) { + fpsSpan.innerText = counters['render'].fps.toFixed(); + if (showStats.checked) { + let text = ""; + for (let key in counters) { + counter = counters[key]; + text += "<b>" + counter.name + "</b><br>"; + text += counter.fps.toFixed() + " avg FPS<br>"; + text += "<div class=" + + (counter.maxFps - counter.fps > 10 ? "bad" : "") + ">" + + counter.maxFps.toFixed() + " max FPS</div>"; + text += "<div class=" + + (counter.fps - counter.minFps > 10 ? "bad" : "") + ">" + + counter.minFps.toFixed() + " min FPS</div>"; + if (counter.mouseEvents) { + text += "<div>" + counter.mouseEvents.zero + + " frame(s) with no mouse/touch events"; + text += "<div>" + counter.mouseEvents.multiple + + " frame(s) with multiple mouse/touch events"; + } + text += "<div class=light>" + counter.count + " frames</div>"; + } + stats.innerHTML = text; + } + } + if (warningText != displayedWarningText) { + warning.textContent = warningText; + displayedWarningText = warningText; + } +} + +updateControls(); + +img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAgMAAAAhHED1AAAADFBMVEUAAAA5AAByAACZAAADU26qAAAFIUlEQVR42u2ZPW7jRhTHOVQkFiwEFU4RFTwCj0Am8AG8wHIDrC8QZBH4BAGJNGkdIL7BLpCo8Q1CpkqrDRCkVWEvkKSIChVUQHLy3pshRZlDeUhVCeZf6GOt+XHmvf+8+VjLMjIyMjIyMjIyMjIyMjIyMjIyMjL6j2txEUWX45u/uueo6l04qvlUNCfE9yPaf8zbendme84fB7af8ad6O6g9SzsAfjsEcNNtz6sBuVhylR7OGsCgQXhHzf5crVaCuNftQHvgd2LkF28GdKHVgcdD4C7udbvQ6sCRg9mNZheW6vZEyHUAaW/agKDhBadurxjwNN3oh1BpvGWpb6K12uOJ7gh6Mjbb6I6gL2Ffaeag1zKzZ/Jgn4wA6uo0wJUpgI8fvaDCPrCq+wcPBegaxsthgFgANvSRAEXnNxcaE2lL4UwwJh37v+F7DOTl5SkX7AiQWdaEPgI5CltRwhFy5bxwDwBGqXCoM/gtaw0Sba4G1DbKCbBBwOYYMKuzrAaIGOYIsAngSkc0AK/uoRogfLhJCxw9/mz+FCAeUfYAZBLWcUnx3OEDs2OAHGMPQBo5FIA0R0ByBIBf7EMojoka4EgfBxWOPi7QmeERwMEA2viiBIgsFtAMR++XXYBL0ySF+CoBcxliD/7oVV6JEwJm1UsCsCtKQkEzZqsGeNLHCPBLDx4WV9YsheoCgBTt45MzPXhVAnzpkjkEKSjn8HQIp4++YvwXykpAxpr3AQICZDDSzIpzF36SFpTakPG/qUrE5Itp9FINEC5JINZrADiYrJwykzH5l7SZEycAIQHS3QTb7ea8gqAD4J8U/5UnpwCpBEwwTVubrwHg89sZ3wEgdGjkGgD025bhU9fwAV0Z51TawJqHZicBTD5+A11JIfY+hBLewJqif2i2kwCL72x06xaCgXmblwwLi18yXUAKwc8gjg5/j3lzK4ZvXjUIkJAVfsa8OZwA80p7CHGBLgoA8A3/LYquOU0msOYzgNoH0sc+vH4mSsSnCHA5pVEHIGYSvPKJADDMPwDQiSz6/DQgseRchtdqUvdAAMRcsPsAQV2zPaomUFOqJz2IaTZO+gB+vTDOqZ5BVSsn/P0CRADIQkALjdMHqAsKNMWKCnW1sMX0E1mo4BE5FbbidEmTNR1ec5sGHREA4jKnmuj3Adx61XCoH7i2kINcYSSIi0sxTvsAdVnHphtaBGACb7HvDL8HBf7hAddHBNxFEVQm5cIiKj8uVFucwzSL4A0mJlYmPD0UVrMKq5Y2ubZb2A+oywBh0C8bOyN3cQ1gGr0IO5Nhi4CMvq4hYHfXVJHgbd1sohrA7MPvWcdJtPYm5MxMZGZTF1URpipuAOzXv7LuBgOfHRIgES0SVm/+6EMetAA/Zd0tDhR1LjqU0O67hHb3MmL4jLXfAnzdBkzqLRKuz3JpXWLmGP9W7p8BWFmf/GCtSG+t76Kkm4bqKDVfiqO7fINl6er5jeatNVbeYZ84Ts7wg7Z6r7sZu92vg1COPXA0e9W+E8cXz42hPrJUYw9dzcH1QX0oDHUTybkqWkuNw7PdHH1Dxd3OWv/Uo7g6mqaVjhXcvssndq/n0NYVzOPx8znXM2jrEmh/iOSrbgnVugX6kU5bC3EzmGhOCPU91JA5qr6IGjBFZ2dehVnWtaL9flBZuDnrMk8m/YzrRAVh+LVs61J35LUue920/+NqXIVdvKZxrKJz7sYXC/MfBEZGRkZGRkZGRkZGRkZGRkZGRkb/N/0Lo92VZbHxh60AAAAASUVORK5CYII='; +</script> |
