Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(795)

Side by Side Diff: content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

Issue 2594843002: Implementing promise-based commit for driving OffscreenCanvas animations (Closed)
Patch Set: rebase Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 main thread: green square on white backgro und.</title> 11 <title>OffscreenCanvas commit flow on main thread: green square on white backgro und.</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> 17 <script>
18 var g_swapsBeforeAck = 15; 18 var g_swapsBeforeAck = 15;
19 var g_frameNumber = 0;
20 var gl;
19 21
20 function main() 22 function main()
21 { 23 {
22 draw(); 24 var canvas = document.getElementById("c");
23 waitForFinish(); 25 var offscreenCanvas = canvas.transferControlToOffscreen();
26 gl = offscreenCanvas.getContext("webgl");
27 drawLoop();
24 } 28 }
25 29
26 function drawTriangle(canvas) 30 function drawTriangle()
27 { 31 {
28 var gl = canvas.getContext("webgl");
29 gl.clearColor(0, 1, 0, 1); 32 gl.clearColor(0, 1, 0, 1);
30 gl.clear(gl.COLOR_BUFFER_BIT); 33 gl.clear(gl.COLOR_BUFFER_BIT);
31 34
32 var prog = gl.createProgram(); 35 var prog = gl.createProgram();
33 var vs = gl.createShader(gl.VERTEX_SHADER); 36 var vs = gl.createShader(gl.VERTEX_SHADER);
34 gl.shaderSource(vs, ['attribute vec2 pos;', 37 gl.shaderSource(vs, ['attribute vec2 pos;',
35 'void main() {', 38 'void main() {',
36 ' gl_Position = vec4(pos, 0., 1.);', 39 ' gl_Position = vec4(pos, 0., 1.);',
37 '}'].join('\n')); 40 '}'].join('\n'));
38 gl.compileShader(vs); 41 gl.compileShader(vs);
(...skipping 18 matching lines...) Expand all
57 } 60 }
58 gl.useProgram(prog); 61 gl.useProgram(prog);
59 62
60 gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); 63 gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
61 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATI C_DRAW); 64 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATI C_DRAW);
62 var attr = gl.getAttribLocation(prog, 'pos'); 65 var attr = gl.getAttribLocation(prog, 'pos');
63 gl.enableVertexAttribArray(attr); 66 gl.enableVertexAttribArray(attr);
64 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); 67 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
65 68
66 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); 69 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
67
68 gl.commit();
69 } 70 }
70 71
71 function draw() 72 function drawLoop()
72 { 73 {
73 var canvas = document.getElementById("c"); 74 if (g_frameNumber < 3) {
74 var offscreenCanvas = canvas.transferControlToOffscreen(); 75 gl.clearColor(1, 0, 0, 1);
75 drawTriangle(offscreenCanvas); 76 gl.clear(gl.COLOR_BUFFER_BIT);
77 g_frameNumber++;
78 gl.commit().then(drawLoop);
79 } else {
80 drawTriangle();
81 gl.commit();
82
83 // The following clear is never committed
84 gl.clearColor(0, 0, 1, 1);
85 gl.clear(gl.COLOR_BUFFER_BIT);
86
87 waitForFinish();
88 }
76 } 89 }
77 90
78 function waitForFinish() 91 function waitForFinish()
79 { 92 {
80 if (g_swapsBeforeAck == 0) { 93 if (g_swapsBeforeAck == 0) {
81 domAutomationController.setAutomationId(1); 94 domAutomationController.setAutomationId(1);
82 domAutomationController.send("SUCCESS"); 95 domAutomationController.send("SUCCESS");
83 } else { 96 } else {
84 g_swapsBeforeAck--; 97 g_swapsBeforeAck--;
85 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; 98 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
86 window.webkitRequestAnimationFrame(waitForFinish); 99 window.requestAnimationFrame(waitForFinish);
87 } 100 }
88 } 101 }
89 </script> 102 </script>
90 </head> 103 </head>
91 <body onload="main()"> 104 <body onload="main()">
92 <div style="position:relative; width:300px; height:300px; background-color:white "> 105 <div style="position:relative; width:300px; height:300px; background-color:white ">
93 </div> 106 </div>
94 <div id="container" style="position:absolute; top:0px; left:0px"> 107 <div id="container" style="position:absolute; top:0px; left:0px">
95 <canvas id="c" width="300" height="300" class="nomargin"></canvas> 108 <canvas id="c" width="300" height="300" class="nomargin"></canvas>
96 </div> 109 </div>
97 </body> 110 </body>
98 </html> 111 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698