more-than-65536-indices.html (3850B)
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>WebGL More than 65536 indices.</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="1" height="1" style="width: 40px; height: 40px;"></canvas> 18 <div id="description"></div> 19 <div id="console"></div> 20 <script id="vs" type="text/something-not-javascript"> 21 attribute vec4 vPosition; 22 attribute vec4 vColor; 23 varying vec4 color; 24 void main() { 25 gl_Position = vPosition; 26 gl_PointSize = 1.0; 27 color = vColor; 28 } 29 </script> 30 <script id="fs" type="text/something-not-javascript"> 31 precision mediump float; 32 varying vec4 color; 33 void main() { 34 gl_FragColor = color; 35 } 36 </script> 37 <script> 38 "use strict"; 39 description("checks that rendering with more than 65536 indices works."); 40 var wtu = WebGLTestUtils; 41 var gl = wtu.create3DContext("example"); 42 var program = wtu.setupProgram(gl, ["vs", "fs"], ["vPosition", "vColor"]); 43 var bufferObjects = wtu.setupUnitQuad(gl, 0, 1); 44 45 gl.bindBuffer(gl.ARRAY_BUFFER, bufferObjects[0]); 46 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 47 -1, 1, 48 1, 1, 49 -1, -1, 50 1, -1, 51 -1, 1, 52 1, 1, 53 -1, -1, 54 1, -1]), gl.STATIC_DRAW); 55 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 56 gl.bindBuffer(gl.ARRAY_BUFFER, bufferObjects[1]); 57 gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array([ 58 255, 0, 0, 255, 59 255, 0, 0, 255, 60 255, 0, 0, 255, 61 255, 0, 0, 255, 62 0, 255, 0, 255, 63 0, 255, 0, 255, 64 0, 255, 0, 255, 65 0, 255, 0, 255]), gl.STATIC_DRAW); 66 gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, 0); 67 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after program setup"); 68 69 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating texture"); 70 var numQuads = Math.floor(65536 / 6) + 4; 71 var numPoints = numQuads * 6; 72 debug("numQuads: " + numQuads); 73 debug("numPoints: " + numPoints); 74 var indexBuf = new ArrayBuffer(numPoints); 75 var indices = new Uint8Array(indexBuf); 76 var indexBuffer = gl.createBuffer(); 77 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 78 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting up indices"); 79 80 var modes = [ 81 {mode: 'POINTS', offsets: [0, 1, 2, 3, 2, 1], skip: 0}, 82 {mode: 'LINES', offsets: [0, 1, 2, 3, 2, 1], skip: 0}, 83 {mode: 'LINE_LOOP', offsets: [0, 1, 2, 3, 2, 1], skip: 1}, 84 {mode: 'LINE_STRIP', offsets: [0, 1, 2, 3, 2, 1], skip: 0}, 85 {mode: 'TRIANGLES', offsets: [0, 1, 2, 3, 2, 1], skip: 0}, 86 {mode: 'TRIANGLE_STRIP', offsets: [0, 1, 2, 3, 2, 1], skip: 0}, 87 {mode: 'TRIANGLE_FAN', offsets: [0, 1, 3, 2, 2, 1], skip: 1} 88 ]; 89 90 for (var mm = 0; mm < modes.length; ++mm) { 91 var modeInfo = modes[mm]; 92 var mode = modeInfo.mode; 93 var offsets = modeInfo.offsets; 94 var skip = modeInfo.skip; 95 96 for (var ii = 0; ii < numQuads; ++ii) { 97 var offset = ii * 6; 98 var quad = (ii == 0 || ii == (numQuads - 1)) ? 4 : 0; 99 for (var jj = 0; jj < 6; ++jj) { 100 indices[offset + jj] = quad + offsets[jj]; 101 } 102 } 103 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 104 105 debug(""); 106 debug("testing: " + mode); 107 // Draw without last 6 points. 108 gl.drawElements(gl[mode], numPoints - (skip + 1) * 6, gl.UNSIGNED_BYTE, skip * 6); 109 wtu.checkCanvas(gl, [255, 0, 0, 255], "Should be red."); 110 // Draw with last 6 points. 111 gl.drawElements(gl[mode], numPoints, gl.UNSIGNED_BYTE, 0); 112 wtu.checkCanvas(gl, [0, 255, 0, 255], "Should be green."); 113 } 114 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing"); 115 116 var successfullyParsed = true; 117 </script> 118 <script src="../../js/js-test-post.js"></script> 119 120 </body> 121 </html>