dom/canvas/test/webgl-conf/checkout/conformance/attribs/gl-vertexattribpointer-offsets.html

   1 <!--
   2 Copyright (c) 2019 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     <title>vertexattribpointer offsets test</title>
  12     <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  13     <script src="../../js/js-test-pre.js"></script>
  14     <script src="../../js/webgl-test-utils.js"> </script>
  15 </head>
  16 <body>
  17 <canvas id="example" width="50" height="50">
  18 There is supposed to be an example drawing here, but it's not important.
  19 </canvas>
  20 <div id="description"></div>
  21 <div id="console"></div>
  22     <script id="vshader" type="x-shader/x-vertex">
  23         attribute vec4 vPosition;
  24         void main()
  25         {
  26             gl_Position = vPosition;
  27         }
  28     </script>
  29
  30     <script id="fshader" type="x-shader/x-fragment">
  31         precision mediump float;
  32         uniform vec4 color;
  33         void main()
  34         {
  35             gl_FragColor = color;
  36         }
  37     </script>
  38
  39     <script>
  40         "use strict";
  41         function init()
  42         {
  43             description("test vertexattribpointer offsets work");
  44
  45             var wtu = WebGLTestUtils;
  46             var gl = wtu.create3DContext("example");
  47             var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["vPosition"]);
  48
  49             var tests = [
  50               { data: new Float32Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]),
  51                 type: gl.FLOAT,
  52                 componentSize: 4,
  53                 normalize: false,
  54               },
  55               { data: new Uint16Array([ 0, 32767, 0, 32767, 0, 0, 0, 0, 0]),
  56                 type: gl.SHORT,
  57                 componentSize: 2,
  58                 normalize: true,
  59               },
  60               { data: new Uint16Array([ 0, 65535, 0, 65535, 0, 0, 0, 0, 0 ]),
  61                 type: gl.UNSIGNED_SHORT,
  62                 componentSize: 2,
  63                 normalize: true,
  64               },
  65               { data: new Uint16Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]),
  66                 type: gl.UNSIGNED_SHORT,
  67                 componentSize: 2,
  68                 normalize: false,
  69               },
  70               { data: new Uint16Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]),
  71                 type: gl.SHORT,
  72                 componentSize: 2,
  73                 normalize: false,
  74               },
  75               { data: new Uint8Array([ 0, 127, 0, 127, 0, 0, 0, 0, 0 ]),
  76                 type: gl.BYTE,
  77                 componentSize: 1,
  78                 normalize: true,
  79               },
  80               { data: new Uint8Array([ 0, 255, 0, 255, 0, 0, 0, 0, 0 ]),
  81                 type: gl.UNSIGNED_BYTE,
  82                 componentSize: 1,
  83                 normalize: true,
  84               },
  85               { data: new Uint8Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]),
  86                 type: gl.BYTE,
  87                 componentSize: 1,
  88                 normalize: false,
  89               },
  90               { data: new Uint8Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]),
  91                 type: gl.UNSIGNED_BYTE,
  92                 componentSize: 1,
  93                 normalize: false,
  94               }
  95             ];
  96
  97             if (wtu.getDefault3DContextVersion() >= 2) {
  98               tests.push(...[
  99                   { data: new Int32Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0]),
 100                     type: gl.INT,
 101                     componentSize: 4,
 102                     normalize: false,
 103                   },
 104                   { data: new Int32Array([ 0, 2147483647, 0, 2147483647, 0, 0, 0, 0, 0]),
 105                     type: gl.INT,
 106                     componentSize: 4,
 107                     normalize: true,
 108                   },
 109                   { data: new Uint32Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0]),
 110                     type: gl.UNSIGNED_INT,
 111                     componentSize: 4,
 112                     normalize: false,
 113                   },
 114                   { data: new Uint32Array([ 0, 4294967295, 0, 4294967295, 0, 0, 0, 0, 0]),
 115                     type: gl.UNSIGNED_INT,
 116                     componentSize: 4,
 117                     normalize: true,
 118                   },
 119                   { data: new Uint16Array([ 0, 0b11110000000000, 0, 0b11110000000000, 0, 0, 0, 0, 0]),
 120                     type: gl.HALF_FLOAT,
 121                     componentSize: 2,
 122                     normalize: false,
 123                   },
 124                   { data: new Uint16Array([ 0, 0b11110000000000, 0, 0b11110000000000, 0, 0, 0, 0, 0]),
 125                     type: gl.HALF_FLOAT,
 126                     componentSize: 2,
 127                     normalize: false,
 128                   }
 129                 ]);
 130             }
 131
 132             var vertexObject = gl.createBuffer();
 133             gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
 134             gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
 135             gl.enableVertexAttribArray(0);
 136
 137             var colorLoc = gl.getUniformLocation(program, "color");
 138             var kNumVerts = 3;
 139             var kNumComponents = 3;
 140
 141             var count = 0;
 142             for (var tt = 0; tt < tests.length; ++tt) {
 143               var test = tests[tt];
 144               for (var oo = 0; oo < 3; ++oo) {
 145                 for (var ss = 0; ss < 3; ++ss) {
 146                   var offset = (oo + 1) * test.componentSize;
 147                   var color = (count % 2) ? [1, 0, 0, 1] : [0, 1, 0, 1];
 148                   var stride = test.componentSize * kNumComponents + test.componentSize * ss;
 149                   debug("");
 150                   debug("check with " + wtu.glEnumToString(gl, test.type) + " at offset: " + offset + " with stride:" + stride + " normalize: " + test.normalize);
 151                   gl.uniform4fv(colorLoc, color);
 152                   var data = new Uint8Array(test.componentSize * kNumVerts * kNumComponents + stride * (kNumVerts - 1));
 153                   var view = new Uint8Array(test.data.buffer);
 154                   var size = test.componentSize * kNumComponents;
 155                   for (var jj = 0; jj < kNumVerts; ++jj) {
 156                     var off1 = jj * size;
 157                     var off2 = jj * stride;
 158                     for (var zz = 0; zz < size; ++zz) {
 159                       data[off2 + zz] = view[off1 + zz];
 160                     }
 161                   }
 162                   gl.bufferSubData(gl.ARRAY_BUFFER, offset, data);
 163                   gl.vertexAttribPointer(0, 3, test.type, test.normalize, stride, offset);
 164                   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 165                   gl.drawArrays(gl.TRIANGLES, 0, 3);
 166
 167                   var buf = new Uint8Array(50 * 50 * 4);
 168                   gl.readPixels(0, 0, 50, 50, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 169
 170                   var black = [0, 0, 0, 0];
 171                   var other = [color[0] * 255, color[1] * 255, color[2] * 255, color[3] * 255];
 172                   var otherMsg = "should be " + ((count % 2) ? "red" : "green")
 173                   wtu.checkCanvasRect(gl, 0, 0, 1, 1, black, "should be black", 0);
 174                   wtu.checkCanvasRect(gl, 0, 49, 1, 1, black, "should be black", 0);
 175                   wtu.checkCanvasRect(gl, 26, 40, 1, 1, other, otherMsg, 0);
 176                   wtu.checkCanvasRect(gl, 26, 27, 1, 1, other, otherMsg, 0);
 177                   wtu.checkCanvasRect(gl, 40, 27, 1, 1, other, otherMsg, 0);
 178                   ++count;
 179                 }
 180               }
 181             }
 182        }
 183
 184        init();
 185        var successfullyParsed = true;
 186     </script>
 187 <script src="../../js/js-test-post.js"></script>
 188
 189 </body>
 190 </html>