added example/readme

README.md

@@ -5,6 +5,48 @@ Workaround for reading floating point values back from the GPU using GLSL.
 ## Example
 
 ```javascript
+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: "\
+uniform highp float f;\
+#pragma glslify: packFloat = require(glsl-read-float)\
+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

example/example.js

@@ -3,10 +3,10 @@
 var triangle     = require('a-big-triangle')
 var fit          = require('canvas-fit')
 var getContext   = require('gl-context')
-var createShader = require('glslify')
+var glslify      = require('glslify')
 var unpackFloat  = require("../index.js")
 
-var canvas     = container.appendChild(document.createElement('canvas'))
+var canvas     = document.body.appendChild(document.createElement('canvas'))
 var gl         = getContext(canvas, render)
 
 window.addEventListener('resize', fit(canvas), false)
@@ -22,7 +22,9 @@ uniform highp float f;\
 #pragma glslify: packFloat = require(../index.glsl)\
 void main() {\
   gl_FragColor = packFloat(f);\
-}"})(gl)
+}",
+  inline: true
+})(gl)
 
 function render() {
   var num = Math.random()
@@ -35,7 +37,8 @@ function render() {
   //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:", )
+  console.log("expected:", num, "got:", unpacked)
 }

index.glsl

@@ -1,12 +1,12 @@
-vec4 nvjs_encode_float(float v) {
-  vec4 c = vec4(0.0, 0.0, 0.0, 0.0);
+highp vec4 nvjs_encode_float(highp float v) {
+  highp vec4 c = vec4(0.0, 0.0, 0.0, 0.0);
   if (v < 0.0) {
     c[0] += 64.0;
     v = -v;
   }
-  float f = 0.0;
-  float e = ceil(log2(v));
-  float m = v * exp2(-e);
+  highp float f = 0.0;
+  highp float e = ceil(log2(v));
+  highp float m = v * exp2(-e);
   if (e < 0.0) {
     e = -e;
     c[0] += 128.0;
@@ -22,7 +22,7 @@ vec4 nvjs_encode_float(float v) {
   m  -= f;
   m *= 255.0;
   c[3] = floor(m);
-  return c * 3.921569E-03;
+  return c * 0.003921569;
 }
 
 #pragma glslify: export(nvjs_encode_float)

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "glsl-read-float",
+  "version": "1.0.0",
+  "description": "Read floating point values back from WebGL",
+  "main": "index.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "beefy --open example/example.js -- --transform glslify"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/mikolalysenko/glsl-read-float.git"
+  },
+  "keywords": [
+    "glsl",
+    "read",
+    "float",
+    "gpu",
+    "gl",
+    "webgl",
+    "gpgpu",
+    "glslify"
+  ],
+  "authors": [
+    "ultraist",
+    "Mikola Lysenko"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mikolalysenko/glsl-read-float/issues"
+  },
+  "homepage": "https://github.com/mikolalysenko/glsl-read-float",
+  "devDependencies": {
+    "canvas-fit": "0.0.0",
+    "gl-context": "^0.1.0",
+    "a-big-triangle": "0.0.0",
+    "glslify": "^1.5.0"
+  }
+}