WebGL2 more then 256 UNSIGNED_BYTE indices

README.md

WebGL2 more then 256 UNSIGNED_BYTE indices

view on jsgist

index.css

canvas { background-color: #888; }

index.html

<canvas width="512" height="512"></canvas>

index.js

import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const vs = `#version 300 es
layout(location = 0) in vec4 position;
void main() {
  gl_Position = position;
}
`;
const fs = `#version 300 es
precision highp float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1, 1, 0, 1);
}  
`;

const gl = document.querySelector('canvas').getContext('webgl2');
const prg = twgl.createProgram(gl, [vs, fs]);

const num = 32;
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
const positions = new Array(num)
    .fill(0)
    .map((_, i, arr) => {
      const angle = i / arr.length * Math.PI * 2;
      return [Math.cos(angle), Math.sin(angle)];
    })
    .flat();

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

const indexBuf = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
const indices = [];
for (let i = 0; i < num - 1; ++i) {
  for (let j = i + 1; j < num; ++j) {
    indices.push(i, j);
  }
}
//console.log(indices);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

gl.useProgram(prg);
gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_BYTE, 0);
console.log('drew', indices.length, 'vertices of UNSIGNED_BYTE indices');
console.log(gl.getError());

jsGist.json

{"name":"WebGL2 more then 256 UNSIGNED_BYTE indices","settings":{},"filenames":["index.html","index.css","index.js"]}