gl-vertexattribipointer-offsets.html (5207B)
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>vertexAttribIPointer offsets tests</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">#version 300 es 23 layout(location=0) in ivec4 aPosition; 24 layout(location=1) in vec4 aColor; 25 out vec4 vColor; 26 void main() 27 { 28 gl_Position = vec4(aPosition); 29 vColor = aColor; 30 } 31 </script> 32 33 <script id="vshader_unsigned" type="x-shader/x-vertex">#version 300 es 34 layout(location=0) in uvec4 aPosition; 35 layout(location=1) in vec4 aColor; 36 out vec4 vColor; 37 void main() 38 { 39 gl_Position = vec4(aPosition); 40 vColor = aColor; 41 } 42 43 </script> 44 <script id="fshader" type="x-shader/x-fragment">#version 300 es 45 precision mediump float; 46 in vec4 vColor; 47 layout(location=0) out vec4 oColor; 48 void main() 49 { 50 oColor = vColor; 51 } 52 </script> 53 54 <script> 55 "use strict"; 56 function init() 57 { 58 description("test vertexAttribIPointer offsets work"); 59 60 var wtu = WebGLTestUtils; 61 var gl = wtu.create3DContext("example", undefined, 2); 62 var program = wtu.setupProgram(gl, ["vshader", "fshader"]); 63 var program_unsigned = wtu.setupProgram(gl, ["vshader_unsigned", "fshader"]); 64 65 var tests = [ 66 { data: new Int32Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]), 67 type: gl.INT, 68 componentSize: 4, 69 }, 70 { data: new Uint32Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]), 71 type: gl.UNSIGNED_INT, 72 componentSize: 4, 73 }, 74 { data: new Uint16Array([ 0, 32767, 0, 32767, 0, 0, 0, 0, 0 ]), 75 type: gl.SHORT, 76 componentSize: 2, 77 }, 78 { data: new Uint16Array([ 0, 65535, 0, 65535, 0, 0, 0, 0, 0 ]), 79 type: gl.UNSIGNED_SHORT, 80 componentSize: 2, 81 }, 82 { data: new Uint8Array([ 0, 127, 0, 127, 0, 0, 0, 0, 0 ]), 83 type: gl.BYTE, 84 componentSize: 1, 85 }, 86 { data: new Uint8Array([ 0, 1, 0, 1, 0, 0, 0, 0, 0 ]), 87 type: gl.UNSIGNED_BYTE, 88 componentSize: 1, 89 } 90 ]; 91 92 var vertexObject = gl.createBuffer(); 93 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); 94 gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); 95 gl.enableVertexAttribArray(0); 96 97 var kNumVerts = 3; 98 var kNumComponents = 3; 99 100 var count = 0; 101 for (var tt = 0; tt < tests.length; ++tt) { 102 var test = tests[tt]; 103 for (var oo = 0; oo < 3; ++oo) { 104 for (var ss = 0; ss < 3; ++ss) { 105 var offset = (oo + 1) * test.componentSize; 106 var color = (count % 2) ? [1, 0, 0, 1] : [0, 1, 0, 1]; 107 var stride = test.componentSize * kNumComponents + test.componentSize * ss; 108 debug(""); 109 debug("check with " + wtu.glEnumToString(gl, test.type) + " at offset: " + offset + " with stride:" + stride); 110 if (test.type == gl.INT || test.type == gl.SHORT || test.type == gl.BYTE) { 111 gl.useProgram(program); 112 } else { 113 gl.useProgram(program_unsigned); 114 } 115 gl.vertexAttrib4fv(1, color); 116 var data = new Uint8Array(test.componentSize * kNumVerts * kNumComponents + stride * (kNumVerts - 1)); 117 var view = new Uint8Array(test.data.buffer); 118 var size = test.componentSize * kNumComponents; 119 for (var jj = 0; jj < kNumVerts; ++jj) { 120 var off1 = jj * size; 121 var off2 = jj * stride; 122 for (var zz = 0; zz < size; ++zz) { 123 data[off2 + zz] = view[off1 + zz]; 124 } 125 } 126 gl.bufferSubData(gl.ARRAY_BUFFER, offset, data); 127 gl.vertexAttribIPointer(0, 3, test.type, stride, offset); 128 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 129 gl.drawArrays(gl.TRIANGLES, 0, 3); 130 131 var buf = new Uint8Array(50 * 50 * 4); 132 gl.readPixels(0, 0, 50, 50, gl.RGBA, gl.UNSIGNED_BYTE, buf); 133 134 var black = [0, 0, 0, 0]; 135 var other = [color[0] * 255, color[1] * 255, color[2] * 255, color[3] * 255]; 136 var otherMsg = "should be " + ((count % 2) ? "red" : "green") 137 wtu.checkCanvasRect(gl, 0, 0, 1, 1, black, "should be black", 0); 138 wtu.checkCanvasRect(gl, 0, 49, 1, 1, black, "should be black", 0); 139 wtu.checkCanvasRect(gl, 26, 40, 1, 1, other, otherMsg, 0); 140 wtu.checkCanvasRect(gl, 26, 27, 1, 1, other, otherMsg, 0); 141 wtu.checkCanvasRect(gl, 40, 27, 1, 1, other, otherMsg, 0); 142 ++count; 143 } 144 } 145 } 146 } 147 148 init(); 149 var successfullyParsed = true; 150 </script> 151 <script src="../../js/js-test-post.js"></script> 152 153 </body> 154 </html>