test_sab_with_webgl.html (6332B)
1 <html> 2 <head> 3 <meta charset='UTF-8'> 4 <script src='/tests/SimpleTest/SimpleTest.js'></script> 5 <link rel='stylesheet' href='/tests/SimpleTest/test.css'> 6 </head> 7 <body> 8 <canvas id='c' width='200' height='200'></canvas> 9 <canvas id='c2' width='200' height='200'></canvas> 10 11 <script> 12 13 function RGBAToString(arr) { 14 return '[' + arr[0].toPrecision(4) + ', ' + 15 arr[1].toPrecision(4) + ', ' + 16 arr[2].toPrecision(4) + ', ' + 17 arr[3].toPrecision(4) + ']'; 18 } 19 20 function TestScreenColor(gl, r, g, b, a) { 21 var arr = new SharedArrayBuffer(4); 22 var view = new Uint8Array(arr); 23 gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, view); 24 25 var err = gl.getError(); 26 ok(err == 0, 'Should be no errors.'); 27 if (err) 28 return; 29 30 var floatArr; 31 floatArr = new Float32Array(4); 32 floatArr[0] = view[0] / 255.0; 33 floatArr[1] = view[1] / 255.0; 34 floatArr[2] = view[2] / 255.0; 35 floatArr[3] = view[3] / 255.0; 36 37 var testText = RGBAToString(floatArr); 38 var refText = RGBAToString([r, g, b, a]); 39 40 var eps = 1.0 / 255.0; 41 var isSame = (Math.abs(floatArr[0] - r) < eps && 42 Math.abs(floatArr[1] - g) < eps && 43 Math.abs(floatArr[2] - b) < eps && 44 Math.abs(floatArr[3] - a) < eps); 45 46 ok(isSame, 'Should be ' + refText + ', was ' + testText + ','); 47 } 48 49 // Give ourselves a scope to return early from: 50 (function() { 51 var canvas = document.getElementById('c'); 52 var attribs = { 53 antialias: false, 54 depth: false, 55 }; 56 let gl = canvas.getContext('experimental-webgl', attribs); 57 if (!gl) { 58 todo(false, 'WebGL is unavailable.'); 59 return; 60 } 61 if (typeof SharedArrayBuffer === 'undefined') { 62 todo(false, 'SharedArrayBuffer is unavailable.'); 63 return; 64 } 65 66 var vs = gl.createShader(gl.VERTEX_SHADER); 67 gl.shaderSource(vs, "attribute vec2 aVertCoord; void main(void) { gl_Position = vec4(aVertCoord, 0.0, 1.0); }"); 68 gl.compileShader(vs); 69 var fs = gl.createShader(gl.FRAGMENT_SHADER); 70 gl.shaderSource(fs, "precision mediump float; uniform vec4 uFragColor; void main(void) { gl_FragColor = uFragColor; }"); 71 gl.compileShader(fs); 72 var prog = gl.createProgram(); 73 gl.attachShader(prog, vs); 74 gl.attachShader(prog, fs); 75 gl.linkProgram(prog); 76 77 var success = gl.getProgramParameter(prog, gl.LINK_STATUS); 78 if (!success) { 79 console.log('Error linking program for \'' + vsId + '\' and \'' + fsId + '\'.'); 80 console.log('\nLink log: ' + gl.getProgramInfoLog(prog)); 81 console.log('\nVert shader log: ' + gl.getShaderInfoLog(vs)); 82 console.log('\nFrag shader log: ' + gl.getShaderInfoLog(fs)); 83 } 84 ok(prog, 'Program should link.'); 85 if (!prog) { 86 return; 87 } 88 89 prog.aVertCoord = gl.getAttribLocation(prog, 'aVertCoord'); 90 prog.uFragColor = gl.getUniformLocation(prog, 'uFragColor'); 91 92 gl.useProgram(prog); 93 94 // Test gl.bufferData(), gl.bufferSubData() and gl.readPixels() APIs with SAB as input. 95 var arr = new SharedArrayBuffer(8*4); 96 var view = new Float32Array(arr); 97 view.set(new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])); 98 var vb = gl.createBuffer(); 99 gl.bindBuffer(gl.ARRAY_BUFFER, vb); 100 gl.bufferData(gl.ARRAY_BUFFER, view, gl.STATIC_DRAW); 101 ok(gl.getError() == 0, 'bufferData with SAB as input parameter works ok.'); 102 gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); 103 ok(gl.getError() == 0, 'bufferSubData with SAB as input parameter works ok.'); 104 gl.enableVertexAttribArray(0); 105 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 106 gl.clearColor(0, 0, 0, 1.0); 107 gl.clear(gl.COLOR_BUFFER_BIT); 108 gl.uniform4f(prog.uFragColor, 0.2, 0.4, 0.6, 1.0); 109 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 110 var arr = new Uint8Array(4); 111 TestScreenColor(gl, 0.2, 0.4, 0.6, 1.0); 112 113 // Test gl.texImage2D() and gl.texSubImage2D() APIs with SAB as input. 114 var tex = gl.createTexture(); 115 gl.bindTexture(gl.TEXTURE_2D, tex); 116 var width = 4; 117 var height = 4; 118 var numChannels = 4; 119 var sab = new SharedArrayBuffer(width * height * numChannels); 120 var data = new Uint8Array(sab); 121 for (var i = 0; i < data.length; ++i) { 122 data[i] = i; 123 } 124 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 125 ok(gl.getError() == 0, 'texImage2D() with SAB as input parameter works ok.'); 126 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); 127 ok(gl.getError() == 0, 'texSubImage2D() with SAB as input parameter works ok.'); 128 129 ok(gl.getError() == 0, 'Should be no errors after test.'); 130 })(); 131 132 // Test WebGL 2 133 (function() { 134 var canvas = document.getElementById('c2'); 135 var attribs = { 136 antialias: false, 137 depth: false, 138 }; 139 let gl = canvas.getContext('webgl2', attribs); 140 if (!gl) { 141 todo(false, 'WebGL 2 is unavailable.'); 142 return; 143 } 144 if (typeof SharedArrayBuffer === 'undefined') { 145 todo(false, 'SharedArrayBuffer is unavailable.'); 146 return; 147 } 148 149 var arr = new SharedArrayBuffer(8*4); 150 var view = new Float32Array(arr); 151 view.set(new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])); 152 var vb = gl.createBuffer(); 153 gl.bindBuffer(gl.ARRAY_BUFFER, vb); 154 gl.bufferData(gl.ARRAY_BUFFER, view, gl.STATIC_DRAW); 155 156 var arr2 = new SharedArrayBuffer(8*4); 157 var view2 = new Float32Array(arr2); 158 gl.getBufferSubData(gl.ARRAY_BUFFER, 0, view2); 159 var equal = true; 160 for(var i = 0; i < 8; ++i) { 161 if (view[i] != view2[i]) equal = false; 162 } 163 ok(equal, 'getBufferSubData with SAB as input parameter works ok.'); 164 165 // Test gl.texImage3D() and gl.texSubImage3D() APIs with SAB as input. 166 var tex = gl.createTexture(); 167 gl.bindTexture(gl.TEXTURE_3D, tex); 168 var width = 4; 169 var height = 4; 170 var depth = 4; 171 var numChannels = 4; 172 var sab = new SharedArrayBuffer(width * height * depth* numChannels); 173 var data = new Uint8Array(sab); 174 for (var i = 0; i < data.length; ++i) { 175 data[i] = i; 176 } 177 gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA, width, height, depth, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 178 ok(gl.getError() == 0, 'texImage3D() with SAB as input parameter works ok.'); 179 gl.texSubImage3D(gl.TEXTURE_3D, 0, 0, 0, 0, width, height, depth, gl.RGBA, gl.UNSIGNED_BYTE, data); 180 ok(gl.getError() == 0, 'texSubImage3D() with SAB as input parameter works ok.'); 181 182 ok(gl.getError() == 0, 'Should be no errors after test.'); 183 })(); 184 185 ok(true, 'TEST COMPLETE'); 186 187 </script> 188 189 </body> 190 </html>