JSPM

glsl-read-float

1.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2830
  • Score
    100M100P100Q121946F
  • License MIT

Read floating point values back from WebGL

Package Exports

  • glsl-read-float

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (glsl-read-float) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

glsl-read-float

Workaround for reading floating point values back from the GPU using GLSL.

Example

var triangle     = require('a-big-triangle')
var fit          = require('canvas-fit')
var getContext   = require('gl-context')
var glslify      = require('glslify')
var unpackFloat  = require("glsl-read-float")

var canvas     = document.body.appendChild(document.createElement('canvas'))
var gl         = getContext(canvas, render)

window.addEventListener('resize', fit(canvas), false)

var shader = glslify({
  vert: "\
attribute vec2 position;\
void main() {\
  gl_Position = vec4(position, 0, 1);\
}",
  frag: "\
#pragma glslify: packFloat = require(glsl-read-float)\n\
uniform highp float f;\
void main() {\
  gl_FragColor = packFloat(f);\
}",
  inline: true
})(gl)

function render() {
  var num = Math.random()

  //Draw shader
  shader.bind()
  shader.uniforms.f = num
  triangle(gl)

  //Read back the float
  var buffer = new Uint8Array(4)
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
  var unpacked = unpackFloat(buffer[0], buffer[1], buffer[2], buffer[3])

  //Log output to console
  console.log("expected:", num, "got:", unpacked)
}

Install

npm install glsl-read-float

API

GLSL

#pragma glslify: packFloat = require(glsl-read-float)

vec4 packed = packFloat(float f)

Packs a floating point number into an 8bit RGBA color vector, which can be written to the display using gl_FragColor, for example.

  • f is a float number

Returns A packed vec4 encoding the value of f

JavaScript

var unpackFloat = require("glsl-read-float")

var f = unpackFloat(x, y, z, w)

Unpacks a packed vec4 into a single floating point value.

  • x is the first component of the packed float
  • y is the second component of the packed float
  • z is the third component of the packed float
  • w is the fourth component of the packed float

Returns A number which is the unpacked value of the floating point input.

Note This module doesn't handle denormals or floats larger than Math.pow(2, 127)

Credits

Originally based on a routine by @ultraist. You can find his blog here: http://ultraist.hatenablog.com/

Newer version rewritten by Mikola Lysenko. MIT License (c) 2014