Skip to content

Instantly share code, notes, and snippets.

@robertleeplummerjr

robertleeplummerjr/RED-Ideal-Float32Array-WebGL2-output.html

Last active April 2, 2019 17:41
Show Gist options
  • Save robertleeplummerjr/04d1529604d4d600dc4a432ebf98e93c to your computer and use it in GitHub Desktop.
Save robertleeplummerjr/04d1529604d4d600dc4a432ebf98e93c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
RED-Ideal-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, `#version 300 es
in vec4 vPosition;
void main() {
gl_Position = vPosition;
}`);
gl.compileShader(vertexShader);
gl.attachShader(program, vertexShader);
const fragmentShaderHandle = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShaderHandle, `#version 300 es
precision highp float;
out float num;
void main()
{
num = 3.402823466e+38;
}
`);
gl.compileShader(fragmentShaderHandle);
console.log(gl.getShaderInfoLog(fragmentShaderHandle));
console.log(gl.getShaderInfoLog(vertexShader));
gl.attachShader(program, fragmentShaderHandle);
gl.linkProgram(program);
gl.useProgram(program);
console.log(gl.getProgramInfoLog(program));
gl.drawArrays(gl.TRIANGLES, gl.NO_ERROR, gl.TRIANGLE_FAN);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
const redFloatPixels = new Float32Array(16);
gl.readPixels(0, 0, 2, 2, gl.RED, gl.FLOAT, redFloatPixels);
// we want an Floats as output, no work, value is exactly what we need:
const result = redFloatPixels;
console.log(result);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment