dom/canvas/test/webgl-mochitest/test_sab_with_webgl.html

   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>