Skip to content

Instantly share code, notes, and snippets.

@robertleeplummerjr

robertleeplummerjr/RGBA-Float32Array-WebGL2-output.html

Last active April 2, 2019 16:59
Show Gist options
  • Save robertleeplummerjr/a637ff15da48f7a595656b4ffa069be1 to your computer and use it in GitHub Desktop.
Save robertleeplummerjr/a637ff15da48f7a595656b4ffa069be1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
RGBA-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.RGBA32F, gl.LINE_LOOP, gl.LINE_LOOP, gl.NO_ERROR, gl.RGBA, 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, 3.402823466e+38, 3.402823466e+38, 3.402823466e+38);
}
`);
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 Array4 as output:
const result = new Array(4);
let i = 0;
for (let x = 0; x < 16;) {
result[i] = rgbaFloatPixels.subarray(x, x += 4);
i++;
}
console.log(result);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment