aadebdeb/webgl-int-buffer.html

## webgl-int-buffer.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sample of Using Integer Buffer in WebGL</title>
</head>
<body>
    <canvas id="canvas" width="512" height="512"></canvas>
    <script defer>

function createShader(gl, source, type) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(shader) + source);
  }
  return shader;
}

function createProgramFromSource(gl, vertexShaderSource, fragmentShaderSource) {
  const program = gl.createProgram();
  gl.attachShader(program, createShader(gl, vertexShaderSource, gl.VERTEX_SHADER));
  gl.attachShader(program, createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER));
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    throw new Error(gl.getProgramInfoLog(program));
  }
  return program;
}

const VERTEX_SHADER_SOURCE =
`#version 300 es

layout (location = 0) in int i_index;

vec3[3] POSITIONS = vec3[](
  vec3(-0.5, -0.5, 0.0),
  vec3(0.5, -0.5, 0.0),
  vec3(0.0, 0.5, 0.0)
);

void main(void) {
  gl_Position = vec4(POSITIONS[i_index], 1.0);
}
`;

const FRAGMENT_SHADER_SOURCE =
`#version 300 es

precision highp float;

out vec4 o_color;

void main(void) {
  o_color = vec4(1.0);
}
`;

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl2');
gl.clearColor(0.0, 0.0, 0.0, 1.0);

const program = createProgramFromSource(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Int16Array([0, 1, 2]), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.enableVertexAttribArray(0);
gl.vertexAttribIPointer(0, 1, gl.SHORT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sample of Using Integer Buffer in WebGL</title>
	</head>
	<body>
	<canvas id="canvas" width="512" height="512"></canvas>
	<script defer>

	function createShader(gl, source, type) {
	const shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	throw new Error(gl.getShaderInfoLog(shader) + source);
	}
	return shader;
	}

	function createProgramFromSource(gl, vertexShaderSource, fragmentShaderSource) {
	const program = gl.createProgram();
	gl.attachShader(program, createShader(gl, vertexShaderSource, gl.VERTEX_SHADER));
	gl.attachShader(program, createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER));
	gl.linkProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	throw new Error(gl.getProgramInfoLog(program));
	}
	return program;
	}

	const VERTEX_SHADER_SOURCE =
	`#version 300 es

	layout (location = 0) in int i_index;

	vec3[3] POSITIONS = vec3[](
	vec3(-0.5, -0.5, 0.0),
	vec3(0.5, -0.5, 0.0),
	vec3(0.0, 0.5, 0.0)
	);

	void main(void) {
	gl_Position = vec4(POSITIONS[i_index], 1.0);
	}
	`;

	const FRAGMENT_SHADER_SOURCE =
	`#version 300 es

	precision highp float;

	out vec4 o_color;

	void main(void) {
	o_color = vec4(1.0);
	}
	`;

	const canvas = document.getElementById('canvas');
	const gl = canvas.getContext('webgl2');
	gl.clearColor(0.0, 0.0, 0.0, 1.0);

	const program = createProgramFromSource(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

	const vbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, new Int16Array([0, 1, 2]), gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);

	gl.clear(gl.COLOR_BUFFER_BIT);

	gl.useProgram(program);

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.enableVertexAttribArray(0);
	gl.vertexAttribIPointer(0, 1, gl.SHORT, false, 0, 0);

	gl.drawArrays(gl.TRIANGLES, 0, 3);

	</script>
	</body>
	</html>