summaryrefslogtreecommitdiffstats
path: root/dom/canvas/test/webgl-mochitest/test_sab_with_webgl.html
blob: 56b89950a7117e25eca1ba27a8c2467b45cc8cca (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='/tests/SimpleTest/SimpleTest.js'></script>
    <link rel='stylesheet' href='/tests/SimpleTest/test.css'>
  </head>
  <body>
<canvas id='c' width='200' height='200'></canvas>
<canvas id='c2' width='200' height='200'></canvas>

<script>

var gl;

function RGBAToString(arr) {
  return '[' + arr[0].toPrecision(4) + ', ' +
               arr[1].toPrecision(4) + ', ' +
               arr[2].toPrecision(4) + ', ' +
               arr[3].toPrecision(4) + ']';
}

function TestScreenColor(gl, r, g, b, a) {
  var arr = new SharedArrayBuffer(4);
  var view = new Uint8Array(arr);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, view);

  var err = gl.getError();
  ok(err == 0, 'Should be no errors.');
  if (err)
    return;

  var floatArr;
  floatArr = new Float32Array(4);
  floatArr[0] = view[0] / 255.0;
  floatArr[1] = view[1] / 255.0;
  floatArr[2] = view[2] / 255.0;
  floatArr[3] = view[3] / 255.0;

  var testText = RGBAToString(floatArr);
  var refText = RGBAToString([r, g, b, a]);

  var eps = 1.0 / 255.0;
  var isSame = (Math.abs(floatArr[0] - r) < eps &&
                Math.abs(floatArr[1] - g) < eps &&
                Math.abs(floatArr[2] - b) < eps &&
                Math.abs(floatArr[3] - a) < eps);

  ok(isSame, 'Should be ' + refText + ', was ' + testText + ',');
}

// Give ourselves a scope to return early from:
(function() {
  var canvas = document.getElementById('c');
  var attribs = {
    antialias: false,
    depth: false,
  };
  gl = canvas.getContext('experimental-webgl', attribs);
  if (!gl) {
    todo(false, 'WebGL is unavailable.');
    return;
  }
  if (typeof SharedArrayBuffer === 'undefined') {
    todo(false, 'SharedArrayBuffer is unavailable.');
    return;
  }

  var vs = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vs, "attribute vec2 aVertCoord; void main(void) { gl_Position = vec4(aVertCoord, 0.0, 1.0); }");
  gl.compileShader(vs);
  var fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fs, "precision mediump float; uniform vec4 uFragColor; void main(void) { gl_FragColor = uFragColor; }");
  gl.compileShader(fs);
  var prog = gl.createProgram();
  gl.attachShader(prog, vs);
  gl.attachShader(prog, fs);
  gl.linkProgram(prog);

  var success = gl.getProgramParameter(prog, gl.LINK_STATUS);
  if (!success) {
    console.log('Error linking program for \'' + vsId + '\' and \'' + fsId + '\'.');
    console.log('\nLink log: ' + gl.getProgramInfoLog(prog));
    console.log('\nVert shader log: ' + gl.getShaderInfoLog(vs));
    console.log('\nFrag shader log: ' + gl.getShaderInfoLog(fs));
  }
  ok(prog, 'Program should link.');
  if (!prog) {
    return;
  }

  prog.aVertCoord = gl.getAttribLocation(prog, 'aVertCoord');
  prog.uFragColor = gl.getUniformLocation(prog, 'uFragColor');

  gl.useProgram(prog);

  // Test gl.bufferData(), gl.bufferSubData() and gl.readPixels() APIs with SAB as input.
  var arr = new SharedArrayBuffer(8*4);
  var view = new Float32Array(arr);
  view.set(new Float32Array([-1, -1, 1, -1, -1,  1, 1,  1]));
  var vb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vb);
  gl.bufferData(gl.ARRAY_BUFFER, view, gl.STATIC_DRAW);
  ok(gl.getError() == 0, 'bufferData with SAB as input parameter works ok.');
  gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
  ok(gl.getError() == 0, 'bufferSubData with SAB as input parameter works ok.');
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.clearColor(0, 0, 0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.uniform4f(prog.uFragColor, 0.2, 0.4, 0.6, 1.0);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  var arr = new Uint8Array(4);
  TestScreenColor(gl, 0.2, 0.4, 0.6, 1.0);

  // Test gl.texImage2D() and gl.texSubImage2D() APIs with SAB as input.
  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  var width = 4;
  var height = 4;
  var numChannels = 4;
  var sab = new SharedArrayBuffer(width * height * numChannels);
  var data = new Uint8Array(sab);
  for (var i = 0; i < data.length; ++i) {
    data[i] = i;
  }
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  ok(gl.getError() == 0, 'texImage2D() with SAB as input parameter works ok.');
  gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
  ok(gl.getError() == 0, 'texSubImage2D() with SAB as input parameter works ok.');

  ok(gl.getError() == 0, 'Should be no errors after test.');
})();

// Test WebGL 2
(function() {
  var canvas = document.getElementById('c2');
  var attribs = {
    antialias: false,
    depth: false,
  };
  gl = canvas.getContext('webgl2', attribs);
  if (!gl) {
    todo(false, 'WebGL 2 is unavailable.');
    return;
  }
  if (typeof SharedArrayBuffer === 'undefined') {
    todo(false, 'SharedArrayBuffer is unavailable.');
    return;
  }

  var arr = new SharedArrayBuffer(8*4);
  var view = new Float32Array(arr);
  view.set(new Float32Array([-1, -1, 1, -1, -1,  1, 1,  1]));
  var vb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vb);
  gl.bufferData(gl.ARRAY_BUFFER, view, gl.STATIC_DRAW);

  var arr2 = new SharedArrayBuffer(8*4);
  var view2 = new Float32Array(arr2);
  gl.getBufferSubData(gl.ARRAY_BUFFER, 0, view2);
  var equal = true;
  for(var i = 0; i < 8; ++i) {
    if (view[i] != view2[i]) equal = false;
  }
  ok(equal, 'getBufferSubData with SAB as input parameter works ok.');

  // Test gl.texImage3D() and gl.texSubImage3D() APIs with SAB as input.
  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_3D, tex);
  var width = 4;
  var height = 4;
  var depth = 4;
  var numChannels = 4;
  var sab = new SharedArrayBuffer(width * height * depth* numChannels);
  var data = new Uint8Array(sab);
  for (var i = 0; i < data.length; ++i) {
    data[i] = i;
  }
  gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA, width, height, depth, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  ok(gl.getError() == 0, 'texImage3D() with SAB as input parameter works ok.');
  gl.texSubImage3D(gl.TEXTURE_3D, 0, 0, 0, 0, width, height, depth, gl.RGBA, gl.UNSIGNED_BYTE, data);
  ok(gl.getError() == 0, 'texSubImage3D() with SAB as input parameter works ok.');

  ok(gl.getError() == 0, 'Should be no errors after test.');
})();

ok(true, 'TEST COMPLETE');

</script>

  </body>
</html>