WebGL - Render To Texture

HTML

<canvas id="canvas"></canvas>
<!-- vertex shader -->
<script  id="vertex-shader-3d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
  // Multiply the position by the matrix.
  gl_Position = u_matrix * a_position;

  // Pass the texcoord to the fragment shader.
  v_texcoord = a_texcoord;
}
</script>
<!-- fragment shader -->
<script  id="fragment-shader-3d" type="x-shader/x-fragment">
precision mediump float;

// Passed in from the vertex shader.
varying vec2 v_texcoord;

// The texture.
uniform sampler2D u_texture;

void main() {
	 vec3 c = texture2D(u_texture, v_texcoord).rgb;
   gl_FragColor = vec4(c, 1.);
}
</script>
<script  id="fragment-shader-3d-2" type="x-shader/x-fragment">
precision mediump float;

// Passed in from the vertex shader.
varying vec2 v_texcoord;

// The texture.
uniform sampler2D u_texture;

void main() {
	 vec3 c = texture2D(u_texture, v_texcoord).rgb * 100000000.;
   gl_FragColor = vec4(c, 1.);
}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>

CSS

@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
body {
  margin: 0;
}
canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

JavaScript

// WebGL - Render To Texture
// from https://webglfundamentals.org/webgl/webgl-render-to-texture.html

"use strict";

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl2");
  if (!gl) {
    return;
  }

	console.log(gl.getExtension("EXT_color_buffer_float"));
	console.log(gl.getExtension("EXT_color_buffer_half_float"));
  //console.log(gl.getExtension("OES_texture_float_linear"));

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");

  // lookup uniforms
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  var textureLocation = gl.getUniformLocation(program, "u_texture");

  // Create a buffer for positions
  var positionBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // Put the positions in the buffer
  setGeometry(gl);

  // provide texture coordinates for the rectangle.
  var texcoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
  // Set Texcoords.
  setTexcoords(gl);

  var program2 = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d-2"]);
  var positionLocation2 = gl.getAttribLocation(program2, "a_position");
  var texcoordLocation2 = gl.getAttribLocation(program2, "a_texcoord");
  var matrixLocation2 = gl.getUniformLocation(program2, "u_matrix");
  var textureLocation2 = gl.getUniformLocation(program2, "u_texture");
  var positionBuffer2 = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer2);
  setGeometry(gl);
  var texcoordBuffer2 = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,...