| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 | 2 |
| 3 <!-- READ BEFORE UPDATING: | 3 <!-- READ BEFORE UPDATING: |
| 4 If this test is updated make sure to increment the "revision" value of the | 4 If this test is updated make sure to increment the "revision" value of the |
| 5 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ens
ure | 5 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ens
ure |
| 6 that the baseline images are regenerated on the next run. | 6 that the baseline images are regenerated on the next run. |
| 7 --> | 7 --> |
| 8 | 8 |
| 9 <html> | 9 <html> |
| 10 <head> | 10 <head> |
| 11 <title>OffscreenCanvas commit flow on worker thread: red square on white backgro
und.</title> | 11 <title>OffscreenCanvas webgl commit flow on worker thread: Two Canvases</title> |
| 12 <style type="text/css"> | 12 <style type="text/css"> |
| 13 .nomargin { | 13 .nomargin { |
| 14 margin: 0px auto; | 14 margin: 0px auto; |
| 15 } | 15 } |
| 16 </style> | 16 </style> |
| 17 <script id="myWorker" type="text/worker"> | 17 <script id="myWorker" type="text/worker"> |
| 18 /* This pixel test checks the following: |
| 19 1. Whether submission of frames for multiple canvases happen about the same |
| 20 time for OffscreenCanvas.commit() that are invoked in the same JS task. |
| 21 2. Whether overdraw frame in one animation loop is handled well. |
| 22 3. Whether the drawn webgl image is position upright in commit(). |
| 23 4. Drawing to OffscreenCanvas without commit() has no rendering results. |
| 18 | 24 |
| 19 var g_frameNumber = 0; | 25 Correct end result of this test: The left canvas shows a upright white |
| 20 var gl; | 26 triangle on a green background and the right canvas shows dark-blue fill. |
| 27 */ |
| 21 | 28 |
| 22 function drawTriangle() | 29 var g_ctx1, g_ctx2; |
| 23 { | 30 var g_asyncCallbackNumber = 2; |
| 24 gl.clearColor(0, 1, 0, 1); | |
| 25 gl.clear(gl.COLOR_BUFFER_BIT); | |
| 26 | 31 |
| 27 var prog = gl.createProgram(); | 32 self.onmessage = function(e) { |
| 28 var vs = gl.createShader(gl.VERTEX_SHADER); | 33 g_ctx1 = e.data.offscreenCanvas1.getContext("webgl"); |
| 29 gl.shaderSource(vs, ['attribute vec2 pos;', | 34 g_ctx2 = e.data.offscreenCanvas2.getContext("webgl"); |
| 30 'void main() {', | 35 |
| 31 ' gl_Position = vec4(pos, 0., 1.);', | 36 startTest(); |
| 32 '}'].join('\n')); | 37 } |
| 33 gl.compileShader(vs); | 38 |
| 34 if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) { | 39 function startTest() { |
| 35 throw 'failed to compiled shader'; | 40 g_ctx1.clearColor(0, 1, 0, 1); |
| 41 g_ctx1.clear(g_ctx1.COLOR_BUFFER_BIT); |
| 42 // The promise returned by this g_ctx1.commit() must be resolved at |
| 43 // about the same time as the other g_ctx2.commit() below as they are in the |
| 44 // same JS task. |
| 45 g_ctx1.commit().then(function() { |
| 46 g_ctx2.clearColor(0, 0, 1, 1); |
| 47 g_ctx2.clear(g_ctx2.COLOR_BUFFER_BIT); |
| 48 // This g_ctx2.commit() must happen after the other g_ctx2.commit() below. |
| 49 g_ctx2.commit(); |
| 50 if (--g_asyncCallbackNumber == 0) self.postMessage(""); |
| 51 }); |
| 52 |
| 53 function drawTriangle(gl) |
| 54 { |
| 55 gl.clearColor(0, 1, 0, 1); |
| 56 gl.clear(gl.COLOR_BUFFER_BIT); |
| 57 |
| 58 var prog = gl.createProgram(); |
| 59 var vs = gl.createShader(gl.VERTEX_SHADER); |
| 60 gl.shaderSource(vs, ['attribute vec2 pos;', |
| 61 'void main() {', |
| 62 ' gl_Position = vec4(pos, 0., 1.);', |
| 63 '}'].join('\n')); |
| 64 gl.compileShader(vs); |
| 65 if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) { |
| 66 throw 'failed to compiled shader'; |
| 67 } |
| 68 gl.attachShader(prog, vs); |
| 69 |
| 70 var fs = gl.createShader(gl.FRAGMENT_SHADER); |
| 71 gl.shaderSource(fs, ['void main() {', |
| 72 ' gl_FragColor = vec4(1.);', |
| 73 '}'].join('\n')); |
| 74 gl.compileShader(fs); |
| 75 if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) { |
| 76 throw 'failed to compiled shader'; |
| 77 } |
| 78 gl.attachShader(prog, fs); |
| 79 |
| 80 gl.linkProgram(prog); |
| 81 if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { |
| 82 throw "Could not link the shader program!"; |
| 83 } |
| 84 gl.useProgram(prog); |
| 85 |
| 86 gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); |
| 87 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STA
TIC_DRAW); |
| 88 var attr = gl.getAttribLocation(prog, 'pos'); |
| 89 gl.enableVertexAttribArray(attr); |
| 90 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); |
| 91 |
| 92 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); |
| 36 } | 93 } |
| 37 gl.attachShader(prog, vs); | |
| 38 | 94 |
| 39 var fs = gl.createShader(gl.FRAGMENT_SHADER); | 95 // Do something complex to g_ctx2. |
| 40 gl.shaderSource(fs, ['void main() {', | 96 drawTriangle(g_ctx2); |
| 41 ' gl_FragColor = vec4(1.);', | 97 // This g_ctx2.commit() must be resolved at about the same time as the first |
| 42 '}'].join('\n')); | 98 // g_ctx1.commit() above because they are in the same JS task, no matter how |
| 43 gl.compileShader(fs); | 99 // complex the drawing operation is. |
| 44 if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) { | 100 g_ctx2.commit().then(function() { |
| 45 throw 'failed to compiled shader'; | 101 drawTriangle(g_ctx1); |
| 46 } | 102 g_ctx1.commit(); |
| 47 gl.attachShader(prog, fs); | |
| 48 | 103 |
| 49 gl.linkProgram(prog); | 104 // The following clear is never committed |
| 50 if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { | 105 g_ctx1.clearColor(1, 0, 0, 1); |
| 51 throw "Could not link the shader program!"; | 106 g_ctx1.clear(g_ctx1.COLOR_BUFFER_BIT); |
| 52 } | 107 if (--g_asyncCallbackNumber == 0) self.postMessage(""); |
| 53 gl.useProgram(prog); | 108 }); |
| 54 | 109 |
| 55 gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); | |
| 56 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATI
C_DRAW); | |
| 57 var attr = gl.getAttribLocation(prog, 'pos'); | |
| 58 gl.enableVertexAttribArray(attr); | |
| 59 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); | |
| 60 | |
| 61 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); | |
| 62 } | 110 } |
| 63 | 111 |
| 64 function drawLoop() | |
| 65 { | |
| 66 if (g_frameNumber < 10) { | |
| 67 g_frameNumber++; | |
| 68 // Purposely intersperse overdraw and non-overdraw commit cases to see | |
| 69 // if OffscreenCanvas commit() handles both cases well. | |
| 70 if (0 == g_frameNumber % 2) { | |
| 71 // When promise is used, the next drawLoop() is called after the first | |
| 72 // frame is resolved; therefore there is no overdraw in this case. | |
| 73 gl.commit().then(drawLoop); | |
| 74 } else { | |
| 75 // When the next drawLoop() is invoked regardless the promise resolve | |
| 76 // status of the previous commit(), the frame committed in the next | |
| 77 // drawLoop() is very likely to be overdrawn. | |
| 78 gl.commit(); | |
| 79 drawLoop(); | |
| 80 } | |
| 81 } else { | |
| 82 drawTriangle(); | |
| 83 gl.commit(); | |
| 84 | |
| 85 // The following clear is never committed | |
| 86 gl.clearColor(0, 0, 1, 1); | |
| 87 gl.clear(gl.COLOR_BUFFER_BIT); | |
| 88 | |
| 89 self.postMessage(""); | |
| 90 } | |
| 91 } | |
| 92 | |
| 93 self.onmessage = function(e) { | |
| 94 var transferredOffscreenCanvas = e.data; | |
| 95 gl = transferredOffscreenCanvas.getContext("webgl", {preserveDrawingBuffer: tr
ue}); | |
| 96 gl.clearColor(1, 0, 0, 1); | |
| 97 gl.clear(gl.COLOR_BUFFER_BIT); | |
| 98 drawLoop(); | |
| 99 }; | |
| 100 </script> | 112 </script> |
| 101 <script> | 113 <script> |
| 102 var g_swapsBeforeAck = 15; | 114 var g_swapsBeforeAck = 15; |
| 103 | 115 |
| 104 function makeWorker(script) { | 116 function makeWorker(script) { |
| 105 var blob = new Blob([script]); | 117 var blob = new Blob([script]); |
| 106 return new Worker(URL.createObjectURL(blob)); | 118 return new Worker(URL.createObjectURL(blob)); |
| 107 } | 119 } |
| 108 | 120 |
| 109 function main() | |
| 110 { | |
| 111 draw(); | |
| 112 } | |
| 113 | |
| 114 function draw() | |
| 115 { | |
| 116 var canvas = document.getElementById("c"); | |
| 117 var offscreenCanvas = canvas.transferControlToOffscreen(); | |
| 118 var worker = makeWorker(document.getElementById("myWorker").textContent); | |
| 119 worker.onmessage = function (e) { | |
| 120 waitForFinish(); | |
| 121 } | |
| 122 worker.postMessage(offscreenCanvas, [offscreenCanvas]); | |
| 123 } | |
| 124 | |
| 125 function waitForFinish() | 121 function waitForFinish() |
| 126 { | 122 { |
| 127 if (g_swapsBeforeAck == 0) { | 123 if (g_swapsBeforeAck == 0) { |
| 128 domAutomationController.setAutomationId(1); | 124 domAutomationController.setAutomationId(1); |
| 129 domAutomationController.send("SUCCESS"); | 125 domAutomationController.send("SUCCESS"); |
| 130 } else { | 126 } else { |
| 131 g_swapsBeforeAck--; | 127 g_swapsBeforeAck--; |
| 132 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; | 128 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; |
| 133 window.requestAnimationFrame(waitForFinish); | 129 window.requestAnimationFrame(waitForFinish); |
| 134 } | 130 } |
| 135 } | 131 } |
| 132 |
| 133 function main() |
| 134 { |
| 135 var offscreenCanvas1 = document.getElementById("canvas1").transferControlToOff
screen(); |
| 136 var offscreenCanvas2 = document.getElementById("canvas2").transferControlToOff
screen(); |
| 137 |
| 138 var worker = makeWorker(document.getElementById("myWorker").textContent); |
| 139 worker.onmessage = function (e) { |
| 140 waitForFinish(); |
| 141 }; |
| 142 worker.postMessage( |
| 143 {offscreenCanvas1: offscreenCanvas1, |
| 144 offscreenCanvas2: offscreenCanvas2}, |
| 145 [offscreenCanvas1, offscreenCanvas2]); |
| 146 } |
| 136 </script> | 147 </script> |
| 137 </head> | 148 </head> |
| 138 <body onload="main()"> | 149 <body onload="main()"> |
| 139 <div style="position:relative; width:300px; height:300px; background-color:white
"> | 150 <div style="position:relative; width:600px; height:300px; background-color:white
"> |
| 140 </div> | 151 </div> |
| 141 <div id="container" style="position:absolute; top:0px; left:0px"> | 152 <div id="container" style="position:absolute; top:0px; left:0px"> |
| 142 <canvas id="c" width="300" height="300" class="nomargin"></canvas> | 153 <canvas id="canvas1" width="300" height="300" class="nomargin"></canvas> |
| 154 <canvas id="canvas2" width="300" height="300" class="nomargin"></canvas> |
| 143 </div> | 155 </div> |
| 144 </body> | 156 </body> |
| 145 </html> | 157 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2778483002:
Synchronize commits at end of JS task (Closed)
