Browser fixes

lib/buffer.js

@@ -268,7 +268,8 @@ module.exports = function wrapBufferState (gl, stats, config, attributeState) {
 
       buffer.bind()
       if (!data) {
-        gl.bufferData(buffer.type, byteLength, usage)
+        // #475
+        if (byteLength) gl.bufferData(buffer.type, byteLength, usage)
         buffer.dtype = dtype || GL_UNSIGNED_BYTE
         buffer.usage = usage
         buffer.dimension = dimension

lib/core.js

@@ -3278,7 +3278,6 @@ module.exports = function reglCore (
       emitPollFramebuffer(env, refresh, null, true)
 
       // Refresh updates all attribute state changes
-      var extInstancing = gl.getExtension('angle_instanced_arrays')
       var INSTANCING
       if (extInstancing) {
         INSTANCING = env.link(extInstancing)

lib/read.js

@@ -13,6 +13,8 @@ module.exports = function wrapReadPixels (
   context,
   glAttributes,
   extensions) {
+  var supportsFloat = extensions.oes_texture_float && isFloatSupported(gl)
+
   function readPixelsImpl (input) {
     var type
     if (framebufferState.next === null) {
@@ -30,6 +32,10 @@ module.exports = function wrapReadPixels (
         check(
           type === GL_UNSIGNED_BYTE || type === GL_FLOAT,
           'Reading from a framebuffer is only allowed for the types \'uint8\' and \'float\'')
+
+        if (type === GL_FLOAT) {
+          check(supportsFloat, 'Reading \'float\' values is not permitted in your browser. For a fallback, please see: https://www.npmjs.com/package/glsl-read-float')
+        }
       } else {
         check(
           type === GL_UNSIGNED_BYTE,
@@ -128,3 +134,28 @@ module.exports = function wrapReadPixels (
 
   return readPixels
 }
+
+function isFloatSupported (gl) {
+  var texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, null)
+
+  var fbo = gl.createFramebuffer()
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
+  gl.bindTexture(gl.TEXTURE_2D, null)
+  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) return false
+
+  gl.viewport(0, 0, 1, 1)
+  gl.clearColor(1.0, 0.0, 0.0, 1.0)
+  gl.clear(gl.COLOR_BUFFER_BIT)
+  var pixels = new Float32Array(4)
+  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, pixels)
+
+  if (gl.getError()) return false
+
+  gl.deleteFramebuffer(fbo)
+  gl.deleteTexture(texture)
+
+  return pixels[0] === 1.0
+}

lib/texture.js

@@ -827,6 +827,7 @@ module.exports = function createTextureSet (
     var type = info.type
     var width = info.width
     var height = info.height
+    var channels = info.channels
 
     setFlags(info)
 
@@ -839,8 +840,16 @@ module.exports = function createTextureSet (
       gl.copyTexImage2D(
         target, miplevel, format, info.xOffset, info.yOffset, width, height, 0)
     } else {
-      gl.texImage2D(
-        target, miplevel, format, width, height, 0, format, type, data)
+      var nullData = !data
+      if (nullData) {
+        data = pool.zero.allocType(type, width * height * channels)
+      }
+
+      gl.texImage2D(target, miplevel, format, width, height, 0, format, type, data)
+
+      if (nullData && data) {
+        pool.zero.freeType(data)
+      }
     }
   }
 
@@ -1324,17 +1333,27 @@ module.exports = function createTextureSet (
       reglTexture2D.height = texture.height = h
 
       tempBind(texture)
+
+      var data
+      var channels = texture.channels
+      var type = texture.type
+
       for (var i = 0; texture.mipmask >> i; ++i) {
+        var _w = w >> i
+        var _h = h >> i
+        if (!_w || !_h) break
+        data = pool.zero.allocType(type, _w * _h * channels)
         gl.texImage2D(
           GL_TEXTURE_2D,
           i,
           texture.format,
-          w >> i,
-          h >> i,
+          _w,
+          _h,
           0,
           texture.format,
           texture.type,
-          null)
+          data)
+        if (data) pool.zero.freeType(data)
       }
       tempRestore()
 

lib/util/pool.js

@@ -8,10 +8,6 @@ var GL_INT = 5124
 var GL_UNSIGNED_INT = 5125
 var GL_FLOAT = 5126
 
-var bufferPool = loop(8, function () {
-  return []
-})
-
 function nextPow16 (v) {
   for (var i = 16; i <= (1 << 28); i *= 16) {
     if (v <= i) {
@@ -34,59 +30,70 @@ function log2 (v) {
   return r | (v >> 1)
 }
 
-function alloc (n) {
-  var sz = nextPow16(n)
-  var bin = bufferPool[log2(sz) >> 2]
-  if (bin.length > 0) {
-    return bin.pop()
+function createPool () {
+  var bufferPool = loop(8, function () {
+    return []
+  })
+
+  function alloc (n) {
+    var sz = nextPow16(n)
+    var bin = bufferPool[log2(sz) >> 2]
+    if (bin.length > 0) {
+      return bin.pop()
+    }
+    return new ArrayBuffer(sz)
   }
-  return new ArrayBuffer(sz)
-}
 
-function free (buf) {
-  bufferPool[log2(buf.byteLength) >> 2].push(buf)
-}
+  function free (buf) {
+    bufferPool[log2(buf.byteLength) >> 2].push(buf)
+  }
 
-function allocType (type, n) {
-  var result = null
-  switch (type) {
-    case GL_BYTE:
-      result = new Int8Array(alloc(n), 0, n)
-      break
-    case GL_UNSIGNED_BYTE:
-      result = new Uint8Array(alloc(n), 0, n)
-      break
-    case GL_SHORT:
-      result = new Int16Array(alloc(2 * n), 0, n)
-      break
-    case GL_UNSIGNED_SHORT:
-      result = new Uint16Array(alloc(2 * n), 0, n)
-      break
-    case GL_INT:
-      result = new Int32Array(alloc(4 * n), 0, n)
-      break
-    case GL_UNSIGNED_INT:
-      result = new Uint32Array(alloc(4 * n), 0, n)
-      break
-    case GL_FLOAT:
-      result = new Float32Array(alloc(4 * n), 0, n)
-      break
-    default:
-      return null
+  function allocType (type, n) {
+    var result = null
+    switch (type) {
+      case GL_BYTE:
+        result = new Int8Array(alloc(n), 0, n)
+        break
+      case GL_UNSIGNED_BYTE:
+        result = new Uint8Array(alloc(n), 0, n)
+        break
+      case GL_SHORT:
+        result = new Int16Array(alloc(2 * n), 0, n)
+        break
+      case GL_UNSIGNED_SHORT:
+        result = new Uint16Array(alloc(2 * n), 0, n)
+        break
+      case GL_INT:
+        result = new Int32Array(alloc(4 * n), 0, n)
+        break
+      case GL_UNSIGNED_INT:
+        result = new Uint32Array(alloc(4 * n), 0, n)
+        break
+      case GL_FLOAT:
+        result = new Float32Array(alloc(4 * n), 0, n)
+        break
+      default:
+        return null
+    }
+    if (result.length !== n) {
+      return result.subarray(0, n)
+    }
+    return result
   }
-  if (result.length !== n) {
-    return result.subarray(0, n)
+
+  function freeType (array) {
+    free(array.buffer)
   }
-  return result
-}
 
-function freeType (array) {
-  free(array.buffer)
+  return {
+    alloc: alloc,
+    free: free,
+    allocType: allocType,
+    freeType: freeType
+  }
 }
 
-module.exports = {
-  alloc: alloc,
-  free: free,
-  allocType: allocType,
-  freeType: freeType
-}
+module.exports = createPool()
+
+// zero pool for initial zero data
+module.exports.zero = createPool()

lib/webgl.js

@@ -52,10 +52,10 @@ function createCanvas (element, onDone, pixelRatio) {
   }
 }
 
-function createContext (canvas, contexAttributes) {
+function createContext (canvas, contextAttributes) {
   function get (name) {
     try {
-      return canvas.getContext(name, contexAttributes)
+      return canvas.getContext(name, contextAttributes)
     } catch (e) {
       return null
     }

package.json

@@ -52,6 +52,8 @@
     "google-closure-compiler": "^20160315.2.0",
     "hsv2rgb": "^1.1.0",
     "install": "^0.8.1",
+    "is-iexplorer": "^1.0.0",
+    "is-safari": "^1.0.0",
     "is-travis": "^2.0.0",
     "istanbul": "^0.4.3",
     "mkdirp": "^0.5.1",
@@ -92,7 +94,7 @@
   },
   "scripts": {
     "test": "standard | snazzy && tape test/index.js | tap-min",
-    "test-browser": "budo test/util/browser.js --open",
+    "test-browser": "budo test/browser.js --open",
     "test-typescript": "tsc",
     "cover": "istanbul cover test/index.js",
     "bench-browser": "budo bench/bench.js --open",

test/attributes-nested.js

@@ -46,8 +46,8 @@ tape('attributes nested', function (t) {
 
   function checkPixels (expected) {
     var actual = regl.read()
-    console.log('actual: ', actual)
-    console.log('expected: ', expected)
+    // console.log('actual: ', actual)
+    // console.log('expected: ', expected)
     for (var i = 0; i < 5 * 5; ++i) {
       if (!!actual[4 * i] !== !!expected[i]) {
         console.log('fail at: ', i)

test/util/browser.js → test/browser.js

@@ -46,4 +46,4 @@ function updateDOM () {
   pendingRaf = null
 }
 
-require('../index')
+require('./index')

test/buffer.js

@@ -15,14 +15,12 @@ tape('buffer arg parsing', function (t) {
       t.same(bufferProps[prop], props[prop], prefix + '.' + prop)
     })
     gl.bindBuffer(gl.ARRAY_BUFFER, bufferProps.buffer)
-    gl.getBufferParameter(
+    t.same(gl.getBufferParameter(
       gl.ARRAY_BUFFER,
-      gl.BUFFER_SIZE,
-      bufferProps.byteLength)
-    gl.getBufferParameter(
+      gl.BUFFER_SIZE), bufferProps.byteLength, prefix + ' gl.buffer size')
+    t.same(gl.getBufferParameter(
       gl.ARRAY_BUFFER,
-      gl.BUFFER_USAGE,
-      bufferProps.usage)
+      gl.BUFFER_USAGE), bufferProps.usage, prefix + ' gl.buffer usage')
   }
 
   checkProperties(

test/constructor.js

@@ -1,6 +1,7 @@
 var tape = require('tape')
 var createContext = require('./util/create-context')
 var createREGL = require('../regl')
+var ie = require('is-iexplorer')
 
 tape('regl constructor', function (t) {
   // loading from a bad selector string breaks
@@ -140,7 +141,7 @@ tape('regl constructor', function (t) {
       }
     })
     t.equals(regl._gl.canvas, canvas, 'create from canvas ok')
-    t.equals(regl.attributes.premultipliedAlpha, false, 'create from attributes ok')
+    !ie && t.equals(regl.attributes.premultipliedAlpha, false, 'create from attributes ok')
     regl.destroy()
 
     var container = document.createElement('div')

test/context-loss.js

@@ -240,6 +240,7 @@ function testContextLoss (t, gl, extLoseContext, onDone) {
 
   function pollTests () {
     if (tests.length === 0) {
+      t.equals(gl.getError(), 0, 'error ok')
       regl.destroy()
       onDone()
       return

test/elements.js

@@ -173,13 +173,12 @@ tape('elements', function (t) {
       t.ok('destroy successful')
     }
   ]
-
   var poll = setInterval(function () {
     if (cases.length === 0) {
       clearInterval(poll)
       t.end()
     } else {
       (cases.shift())()
     }
-  })
+  }, 0)
 })