dom/canvas/test/webgl-conf/checkout/conformance/rendering/more-than-65536-indices.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>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>
 122
 123