context-attribute-preserve-drawing-buffer-antialias.html (3610B)
1 <!-- 2 Copyright (c) 2022 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 12 <script src="../../js/js-test-pre.js"></script> 13 <script src="../../js/webgl-test-utils.js"></script> 14 </head> 15 <body> 16 <canvas id="canvas" width="128" height="64" style="width: 32px; height: 32px;"></canvas> 17 <div id="description"></div> 18 <div id="console"></div> 19 <script> 20 "use strict"; 21 22 const wtu = WebGLTestUtils; 23 description(' Test drawingbuffer is preserved when drawing'); 24 25 const waitForComposite = () => new Promise(resolve => wtu.waitForComposite(resolve)); 26 const gl = wtu.create3DContext("canvas", { 27 preserveDrawingBuffer: true, 28 antialias: true, 29 }); 30 console.log(gl.getContextAttributes()); 31 const w = 128; 32 const h = 64; 33 34 if (!gl) { 35 testFailed('canvas.getContext() failed'); 36 } else { 37 gl.viewport(0, 0, w, h); 38 runTest(gl, 4); 39 } 40 41 async function runTest(gl, sampleCount) { 42 const vs = ` 43 attribute vec4 position; 44 uniform mat4 mat; 45 46 void main() { 47 gl_Position = mat * position; 48 } 49 `; 50 51 const fs = ` 52 precision mediump float; 53 uniform vec4 color; 54 void main() { 55 gl_FragColor = color; 56 } 57 `; 58 59 const positionLoc = 0; // hard coded in shaders so they match 60 const buf = gl.createBuffer(); 61 gl.bindBuffer(gl.ARRAY_BUFFER, buf); 62 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 63 0, 0, 64 1, 0, 65 0, 1, 66 0, 1, 67 1, 0, 68 1, 1, 69 ]), gl.STATIC_DRAW); 70 gl.enableVertexAttribArray(positionLoc); 71 gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0); 72 73 const program = wtu.setupProgram(gl, [vs, fs]); 74 75 const colorLoc = gl.getUniformLocation(program, 'color'); 76 const matLoc = gl.getUniformLocation(program, 'mat'); 77 78 gl.useProgram(program); 79 80 const draw = (color, mat) => { 81 gl.uniform4fv(colorLoc, color); 82 gl.uniformMatrix4fv(matLoc, false, mat); 83 gl.drawArrays(gl.TRIANGLES, 0, 6); 84 }; 85 86 const f32Red = [1, 0, 0, 1]; 87 const f32Green = [0, 1, 0, 1]; 88 const f32Gray = [0.5, 0.5, 0.5, 1]; 89 90 const u8Red = [255, 0, 0, 255]; 91 const u8Green = [ 0, 255, 0, 255]; 92 const u8LightRed = [255, 128, 128, 255]; 93 const u8LightGreen = [128, 255, 128, 255]; 94 95 draw(f32Red, [ 96 2, 0, 0, 0, 97 0, 2, 0, 0, 98 0, 0, 1, 0, 99 -1, -1, 0, 1, 100 ]); 101 await waitForComposite(); 102 103 draw(f32Green, [ 104 1, 0, 0, 0, 105 0, 2, 0, 0, 106 0, 0, 1, 0, 107 0, -1, 0, 1, 108 ]); 109 await waitForComposite(); 110 111 gl.enable(gl.BLEND); 112 gl.blendFunc(gl.ONE, gl.ONE); 113 draw(f32Gray, [ 114 1, 0, 0, 0, 115 0, 2, 0, 0, 116 0, 0, 1, 0, 117 -0.5, -1, 0, 1, 118 ]); 119 gl.disable(gl.BLEND); 120 await waitForComposite(); 121 122 /* 123 expected 124 +-----+-------+---------+--------+ 125 | red | ltRed | ltGreen | green | 126 +-----+-------+---------+--------+ 127 0,0 128 */ 129 130 const tolerance = 2; // For multisampling resolution differences between GPUs 131 wtu.checkCanvasRect(gl, 0, 0, w / 4, h , u8Red, 'left edge', tolerance) 132 wtu.checkCanvasRect(gl, w * 3 / 4, 0, w / 4, h, u8Green, 'right edge', tolerance); 133 wtu.checkCanvasRect(gl, w / 4, 0, w / 4, h, u8LightRed, 'left of center', tolerance); 134 wtu.checkCanvasRect(gl, w / 2, 0, w / 4, h, u8LightGreen, 'right of center', tolerance); 135 136 finishTest(); 137 } 138 139 var successfullyParsed = true; 140 shouldBeTrue("successfullyParsed"); 141 </script> 142 </body> 143 </html>