JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

JavaScript

function supportsOESTextureFloatLinear(gl) {
	// Need floating point textures in the first place
	    if (!gl.getExtension('OES_texture_float')) {
	        return false;
	    }

	    // Create a render target
	    var framebuffer = gl.createFramebuffer();
	    var byteTexture = gl.createTexture();
	    gl.bindTexture(gl.TEXTURE_2D, byteTexture);
	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_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, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
	    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
	    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, byteTexture, 0);
console.log(gl.checkFramebufferStatus(gl.FRAMEBUFFER)===gl.FRAMEBUFFER_COMPLETE)
	    // Create a simple floating-point texture with value of 0.5 in the center
	    var rgba = [
	      2, 0, 0, 0,
	      0, 0, 0, 0,
	      0, 0, 0, 0,
	      0, 0, 0, 0
	    ];
	    var floatTexture = gl.createTexture();
	    gl.bindTexture(gl.TEXTURE_2D, floatTexture);
	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	    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, 2, 2, 0, gl.RGBA, gl.FLOAT, new Float32Array(rgba));

	    // Create the test shader
	    var program = gl.createProgram();
	    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
	    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
	    gl.shaderSource(vertexShader, '\
	      attribute vec2 vertex;\
	      void main() {\
	        gl_Position = vec4(vertex, 0.0, 1.0);\
	      }\
	    ');
	   ...