aadebdeb/webgl-arraybufferview-as-texture.html

## webgl-arraybufferview-as-texture.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utt-8">
        <title>Using ArrayBufferView as Texture 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;
}

function getUniformLocations(gl, program, keys) {
  const locations = {};
  keys.forEach(key => {
      locations[key] = gl.getUniformLocation(program, key);
  });
  return locations;
}

const VERTEX_SHADER_SOURCE =
`#version 300 es

const vec3[4] POSITIONS = vec3[](
vec3(-1.0, -1.0, 0.0),
vec3(1.0, -1.0, 0.0),
vec3(-1.0, 1.0, 0.0),
vec3(1.0, 1.0, 0.0)
);

const int[6] INDICES = int[](
0, 1, 2,
3, 2, 1
);

out vec2 v_uv;

void main(void) {
vec3 position = POSITIONS[INDICES[gl_VertexID]];
gl_Position = vec4(position * 0.5, 1.0);
v_uv = position.xy * 0.5 + 0.5;
}
`;

const FRAGMENT_SHADER_SOURCE =
`#version 300 es

precision highp float;

in vec2 v_uv;

out vec4 o_color;

uniform sampler2D u_texture;

void main(void) {
vec3 color = texture(u_texture, v_uv).xyz;
o_color = vec4(color, 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 uniforms = getUniformLocations(gl, program, ['u_texture']);

const texWidth = 512;
const texHeight = 512;
const pixels = new Uint8Array(texWidth * texHeight * 4);
for (let y = 0; y < texHeight; y++) {
  for (let x = 0; x < texWidth; x++) {
    const offset = 4 * (x + texWidth * y);
    pixels[offset + 0] = 255 * (x / texWidth);
    pixels[offset + 1] = 255 * (y / texHeight);
    pixels[offset + 2] = 255;
    pixels[offset + 3] = 255;
  }
}

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texWidth, texHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindTexture(gl.TEXTURE_2D, null);

gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uniforms['u_texture'], 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utt-8">
	<title>Using ArrayBufferView as Texture 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;
	}

	function getUniformLocations(gl, program, keys) {
	const locations = {};
	keys.forEach(key => {
	locations[key] = gl.getUniformLocation(program, key);
	});
	return locations;
	}

	const VERTEX_SHADER_SOURCE =
	`#version 300 es

	const vec3[4] POSITIONS = vec3[](
	vec3(-1.0, -1.0, 0.0),
	vec3(1.0, -1.0, 0.0),
	vec3(-1.0, 1.0, 0.0),
	vec3(1.0, 1.0, 0.0)
	);

	const int[6] INDICES = int[](
	0, 1, 2,
	3, 2, 1
	);

	out vec2 v_uv;

	void main(void) {
	vec3 position = POSITIONS[INDICES[gl_VertexID]];
	gl_Position = vec4(position * 0.5, 1.0);
	v_uv = position.xy * 0.5 + 0.5;
	}
	`;

	const FRAGMENT_SHADER_SOURCE =
	`#version 300 es

	precision highp float;

	in vec2 v_uv;

	out vec4 o_color;

	uniform sampler2D u_texture;

	void main(void) {
	vec3 color = texture(u_texture, v_uv).xyz;
	o_color = vec4(color, 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 uniforms = getUniformLocations(gl, program, ['u_texture']);

	const texWidth = 512;
	const texHeight = 512;
	const pixels = new Uint8Array(texWidth * texHeight * 4);
	for (let y = 0; y < texHeight; y++) {
	for (let x = 0; x < texWidth; x++) {
	const offset = 4 * (x + texWidth * y);
	pixels[offset + 0] = 255 * (x / texWidth);
	pixels[offset + 1] = 255 * (y / texHeight);
	pixels[offset + 2] = 255;
	pixels[offset + 3] = 255;
	}
	}

	const texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texWidth, texHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);

	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.useProgram(program);
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.uniform1i(uniforms['u_texture'], 0);
	gl.drawArrays(gl.TRIANGLES, 0, 6);

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