How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?

by

You can bitshift by multiplying/dividing by powers of two.

As pointed out in the comments the approach I originally posted was working but incorrect, here’s one by Aras Pranckevičius, note that the source code in the post itself contains a typo and is HLSL, this is a GLSL port with the typo corrected:

const vec4 bitEnc = vec4(1.,255.,65025.,16581375.);
const vec4 bitDec = 1./bitEnc;
vec4 EncodeFloatRGBA (float v) {
    vec4 enc = bitEnc * v;
    enc = fract(enc);
    enc -= enc.yzww * vec2(1./255., 0.).xxxy;
    return enc;
}
float DecodeFloatRGBA (vec4 v) {
    return dot(v, bitDec);
}

More Related Contents:

  1. Why do shaders have to be in html file for webgl program?
  2. Drawing a line with three.js dynamically
  3. Canvas toDataURL() returns blank image
  4. Thickness of lines using THREE.LineBasicMaterial
  5. Emulating palette based graphics in WebGL v.s. Canvas 2D
  6. Multiple transparent textures on the same mesh face in Three.js
  7. How to stop a requestAnimationFrame recursion/loop?
  8. How to get the absolute position of a vertex in three.js?
  9. What is the logic of binding buffers in webgl?
  10. Three.js / WebGL – transparent planes hiding other planes behind them
  11. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  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. Saving canvas to image via canvas.toDataURL results in black rectangle
  17. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  18. How to get object in WebGL 3d space from a mouse click coordinate
  19. Javascript Typed Arrays and Endianness
  20. Proper way to detect WebGL support?
  21. Antialiasing not working in Three.js
  22. Why does my canvas go blank after converting to image?
  23. How to detect if user has enabled full screen in browser
  24. Threejs: assign different colors to each vertex in a geometry
  25. javascript “if” statement returning false value when both values are equal
  26. How do I upload a base64 encoded image (string) directly to a Google Cloud Storage bucket using Node.js?
  27. check if function is a generator
  28. use Lodash to sort array of object by value
  29. ESLint’s “no-undef” rule is calling my use of Underscore an undefined variable
  30. how to convert xml to json using jquery

Leave a Comment