How to output fragment values greater than 1 in WebGL - glsl

Question

Let's say I am rendering 2 samples that will be combined into a single image. The first sample contains values outside the range of a displayable pixel (in this case, greater than 1). But when subtracted by the 2nd sample, it does fall in the range.
I store the samples in framebuffer textures prior to combining them.
I want to be able to store values greater than 1, but those values are being clamped to 1. Can the GLSL fragment shader output such values? Can textures store them? If not, how else can I store them?
According to this page, it is possible:
rendering to screen requires the outputs to be of a displayable format, which is not always the case in a multipass pipeline. Sometimes the textures produced by a pass need to have a floating point format which does not translate directly to colors
But according to the specification, texture floats are clamped to the range [0,1].

Answer 1

The easiest way is to use floating point textures.
var gl = someCanvasElement.getContext("experimental-webgl");
var ext = gl.getExtension("OES_texture_float");
if (!ext) {
alert("no OES_texture_float");
return;
}
now you can create and render with floating point textures. The next thing to do is see if you can render to floating point textures.
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_MAG_FILTER, gl.NEAREST);
var fb = gl.createFramebuffer();
gl.bindFrameBuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status != gl.FRAMEBUFFER_COMPLETE) {
alert("can not render to floating point textures");
return;
}
Floats are not clamped when using OES_texture_float
If the device doesn't support rendering to a floating point texture then you'd have to encode your results some other way like gil suggests
WebGL2
Note: in WebGL2 floating point textures are always available. On the other hand you still have to check for and enable OES_texture_float_linear if you want to filter floating point textures. Also in WebGL2 you need to enable EXT_color_buffer_float to render to a floating point texture (and you still need to call gl.checkFramebufferStatus since it's up to the driver which combinations of attachments are supported). And further, there's EXT_float_blend for whether or not you can have blending enabled when rendering to a floating point texture.

Answer 2

Fragment shaders can output values outside the [0.0, 1.0] range, but only if the format of the buffer the values are written to supports values outside that range. What is needed to enable this are render targets (renderbuffers or textures attached to an FBO) that store float values.
OpenGL ES 2.0 and lower do not require support for float format textures. OpenGL ES 3.0 and higher do. For example, in ES 3.0 you could use GL_RGBA16F for a RGBA texture with 16-bit float (aka half-float) components, and GL_RGBA32F for 32-bit float components. Both ES 3.0 and 3.1 still do not require support for using these formats as render targets, though, which is what you need for this use case.
ES 2.0 implementations can provide half-float textures by supporting the OES_texture_half_float and float textures by supporting the OES_texture_float extension. To support rendering to half-float textures, they also need EXT_color_buffer_half_float. EXT_color_buffer_float defines rendering to float textures, but is specified to be based on ES 3.0.
In summary:
ES 2.0 and higher can support rendering to 16-bit float textures by supporting both the OES_texture_half_float and EXT_color_buffer_half_float extensions.
ES 3.0 and higher can support rendering to 32-bit float textures by supporting both the OES_texture_float and EXT_color_buffer_float extensions.
If you want to use these features, you will have to test for the presence of these extensions on your device.

Answer 3

The key idea here is to encode a float in some unrestricted range using 2 or 4 fixed point 8 bit channels (color channels) in the range [0,1]. This method is generic and applies to WebGL or any other GL system.
Let's say you start with a float value:
float value;
Assume your machine support mediump (16 bit float), you can encode value using
2 8 bit channels:
float myNormalize(float val)
{
float min = -1.0;
float max = 1.0;
float norm = (val - min) / (max - min);
return norm;
}
vec2 encode_float_as_2bytes(float a)
{
a = myNormalize(a);
vec2 enc = vec2(1.0, 256.0);
enc *= a;
enc = fract(enc);
enc.x -= enc.y * (1.0 / 256.0);
return enc;
}
Here encode_float_as_2bytes(float a) accepts the value to be encoded. The value is first normalized to [0,1], using some bounding values (on my example my float can take values in[-1, 1]. After normalization, the value is encoded using vec2.
Now you can write the encoded value to the color buffer:
float a = compute_something(...);
gl_FragColor.xy = encode_float_as_2bytes(a);
Now when reading the encoded values (either by other shader or using glReadPixels(), you can decode the encoded float and get the value back:
float denormalize(float val)
{
float min = -1.0;
float max = 1.0;
float den = val * (max - min) + min;
return den;
}
float decode_2_bytes(vec2 a)
{
float ret;
ret = a.x * 1.0 + a.y * 1.0/256.0;
ret = denormalize(ret);
return ret;
}
Pay attention that the denormalization values have to match the normalization values (on this example -1, 1.
You can find more about float encoding here: http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/