| <style> |
| canvas { |
| width: 2px; |
| height: 2px; |
| } |
| </style> |
| </head> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| const width = 2; |
| const height = 2; |
| let canvas; |
| let gl; |
| |
| function output(msg) { |
| const div = document.getElementById("output"); |
| div.innerHTML += `${msg}<br>`; |
| } |
| |
| function isRed(buffer, x, y) { |
| let offset = (y * width + x) * 4; |
| return buffer[offset] == 1.0 && buffer[offset+1] == 0.0 && buffer[offset+2] == 0.0 && buffer[offset+3] == 1.0; |
| } |
| |
| function runTest() { |
| |
| canvas = document.querySelector("canvas"); |
| canvas.width = width; |
| canvas.height = height; |
| |
| output("Create WebGL context"); |
| |
| gl = canvas.getContext("webgl"); |
| gl.getExtension("OES_texture_float"); |
| |
| output("Clear to black"); |
| |
| gl.clearColor(0, 0, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| output("Create a floating point texture"); |
| |
| 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, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null); |
| |
| output("Create and bind framebuffer"); |
| |
| const framebuffer = gl.createFramebuffer(); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); |
| gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); |
| |
| output("Clear framebuffer to red"); |
| |
| gl.clearColor(1.0, 0.0, 0.0, 1.0); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| let pixels = new Float32Array(width * height * 4); |
| gl.readPixels(0, 0, width, height, gl.RGBA, gl.FLOAT, pixels); |
| |
| if (isRed(pixels, 1, 1)) |
| output("PASS: Framebuffer is floating-point red."); |
| else |
| output("FAIL: Framebuffer is not floating-point red."); |
| } |
| |
| window.addEventListener("load", runTest, false); |
| </script> |
| <body> |
| <canvas></canvas> |
| <div id="output"> |
| </div> |
| </body> |
