RED-Compromise-Float32Array-WebGL2-output.html

## RED-Compromise-Float32Array-WebGL2-output.html
<html>
<body>
  <canvas></canvas>
</body>
<script>
  const canvas = document.querySelector('canvas');
  const gl = canvas.getContext('webgl2', {
    alpha: false,
    depth: false,
    antialias: false
  });
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,1,-1,1,-1,-1,1,1,-1,-1,1,-1]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.getExtension('EXT_color_buffer_float');
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, gl.NO_ERROR, gl.R32F, gl.LINE_LOOP, gl.LINE_LOOP, gl.NO_ERROR, gl.RED, gl.FLOAT, null);
  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, gl.NO_ERROR);
  gl.bindTexture(gl.TEXTURE_2D, null);
  const program = gl.createProgram();
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, `attribute vec4 vPosition;
void main() {
    gl_Position = vPosition;
}`);
  gl.compileShader(vertexShader);
  gl.attachShader(program, vertexShader);
  const fragmentShaderHandle = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShaderHandle, `
void main()
{
    gl_FragColor = vec4(3.402823466e+38, 0, 0, 0);
}
`);
  gl.compileShader(fragmentShaderHandle);
  gl.attachShader(program, fragmentShaderHandle);
  gl.linkProgram(program);
  gl.useProgram(program);
  gl.clearColor(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
  gl.clear(16640);
  gl.drawArrays(gl.TRIANGLES, gl.NO_ERROR, gl.TRIANGLE_FAN);
  gl.getError();
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const rgbaFloatPixels = new Float32Array(16);
  gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.FLOAT, rgbaFloatPixels);
  // we want an float as output:
  const result = new Float32Array(4);
  let i = 0;
  for (let x = 0; x < 16; x += 4) {
    result[i] = rgbaFloatPixels[x];
    i++;
  }
  console.log(result);
</script>
</html>
	<html>
	<body>
	<canvas></canvas>
	</body>
	<script>
	const canvas = document.querySelector('canvas');
	const gl = canvas.getContext('webgl2', {
	alpha: false,
	depth: false,
	antialias: false
	});
	const buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,1,-1,1,-1,-1,1,1,-1,-1,1,-1]), gl.STATIC_DRAW);
	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
	gl.getExtension('EXT_color_buffer_float');
	const texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texImage2D(gl.TEXTURE_2D, gl.NO_ERROR, gl.R32F, gl.LINE_LOOP, gl.LINE_LOOP, gl.NO_ERROR, gl.RED, gl.FLOAT, null);
	const framebuffer = gl.createFramebuffer();
	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
	gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, gl.NO_ERROR);
	gl.bindTexture(gl.TEXTURE_2D, null);
	const program = gl.createProgram();
	const vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vertexShader, `attribute vec4 vPosition;
	void main() {
	gl_Position = vPosition;
	}`);
	gl.compileShader(vertexShader);
	gl.attachShader(program, vertexShader);
	const fragmentShaderHandle = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fragmentShaderHandle, `
	void main()
	{
	gl_FragColor = vec4(3.402823466e+38, 0, 0, 0);
	}
	`);
	gl.compileShader(fragmentShaderHandle);
	gl.attachShader(program, fragmentShaderHandle);
	gl.linkProgram(program);
	gl.useProgram(program);
	gl.clearColor(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
	gl.clear(16640);
	gl.drawArrays(gl.TRIANGLES, gl.NO_ERROR, gl.TRIANGLE_FAN);
	gl.getError();
	gl.bindFramebuffer(gl.FRAMEBUFFER, null);
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
	const rgbaFloatPixels = new Float32Array(16);
	gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.FLOAT, rgbaFloatPixels);
	// we want an float as output:
	const result = new Float32Array(4);
	let i = 0;
	for (let x = 0; x < 16; x += 4) {
	result[i] = rgbaFloatPixels[x];
	i++;
	}
	console.log(result);
	</script>
	</html>