WebGL Read pixels from floating point render target

by

Unfortunately it still seems that reading out RGBA components as bytes is the only way for WebGL. If you need to encode a float into a pixel value you can use the following:

In your fractal shader (GLSL/HLSL):

float shift_right (float v, float amt) { 
    v = floor(v) + 0.5; 
    return floor(v / exp2(amt)); 
}
float shift_left (float v, float amt) { 
    return floor(v * exp2(amt) + 0.5); 
}
float mask_last (float v, float bits) { 
    return mod(v, shift_left(1.0, bits)); 
}
float extract_bits (float num, float from, float to) { 
    from = floor(from + 0.5); to = floor(to + 0.5); 
    return mask_last(shift_right(num, from), to - from); 
}
vec4 encode_float (float val) { 
    if (val == 0.0) return vec4(0, 0, 0, 0); 
    float sign = val > 0.0 ? 0.0 : 1.0; 
    val = abs(val); 
    float exponent = floor(log2(val)); 
    float biased_exponent = exponent + 127.0; 
    float fraction = ((val / exp2(exponent)) - 1.0) * 8388608.0; 
    float t = biased_exponent / 2.0; 
    float last_bit_of_biased_exponent = fract(t) * 2.0; 
    float remaining_bits_of_biased_exponent = floor(t); 
    float byte4 = extract_bits(fraction, 0.0, 8.0) / 255.0; 
    float byte3 = extract_bits(fraction, 8.0, 16.0) / 255.0; 
    float byte2 = (last_bit_of_biased_exponent * 128.0 + extract_bits(fraction, 16.0, 23.0)) / 255.0; 
    float byte1 = (sign * 128.0 + remaining_bits_of_biased_exponent) / 255.0; 
    return vec4(byte4, byte3, byte2, byte1); 
}

 // (the following inside main(){}) return your float as the fragment color
 float myFloat = 420.420;
 gl_FragColor = encode_float(myFloat);

Then back on the JavaScript side, after your draw call has been made you can extract the encoded float value of each pixel with the following:

var pixels = new Uint8Array(CANVAS.width * CANVAS.height * 4);
gl.readPixels(0, 0, CANVAS.width, CANVAS.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
pixels = new Float32Array(pixels.buffer);

// pixels now contains an array of floats, 1 float for each pixel

More Related Contents:

  1. Learning WebGL and three.js [closed]
  2. Drawing many shapes in WebGL
  3. WebGL: How to correctly blend alpha channel png
  4. Rendering meshes with multiple indices
  5. Drawing a line with three.js dynamically
  6. Canvas toDataURL() returns blank image
  7. How does the calculation of the light model work in a shader program?
  8. Thickness of lines using THREE.LineBasicMaterial
  9. How to stop a requestAnimationFrame recursion/loop?
  10. How to get the absolute position of a vertex in three.js?
  11. What is the logic of binding buffers in webgl?
  12. How to detect collision in three.js?
  13. How do I clean up and unload a WebGL canvas context from GPU after use?
  14. webgl readpixels is always returning 0,0,0,0
  15. Three.js/WebGL: Large spheres appear broken at intersection
  16. How to do batching without UBOs?
  17. How do I enable WebGL in headless chrome in Ubuntu?
  18. Saving canvas to image via canvas.toDataURL results in black rectangle
  19. Javascript Typed Arrays and Endianness
  20. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  21. WebGL: Prevent color buffer from being cleared
  22. Proper way to detect WebGL support?
  23. Why does my canvas go blank after converting to image?
  24. Alpha rendering difference between OpenGL and WebGL
  25. Threejs: assign different colors to each vertex in a geometry
  26. WebGL – wait for texture to load
  27. Outline object (normal scale + stencil mask) three.js
  28. Texture splatting with Three.js
  29. “Tainted canvases may not be loaded” Cross domain issue with WebGL textures
  30. Why do shaders have to be in html file for webgl program?

Leave a Comment