gl-vertexattribpointer-offsets.html (7423B)
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>