more experiments

Author: mikolalysenko

README.md

@@ -51,3 +51,11 @@ function render() {
 }
 render()
 ```
+
+
+## API (WORK IN PROGRESS)
+
+```JavaScript
+
+var regl = require('regl')
+```

error.js

@@ -0,0 +1 @@
+module.exports = require('./lib/check').error

lib/buffer.js

@@ -1,9 +1,12 @@
-var check = require('./validate')
+var dtypes = require('./dtypes.json')
+var check = require('./check')
 
-module.exports = function createBufferSet (gl, mirrorData) {
+module.exports = function createBufferSet (gl, extensions) {
   var bufferCount = 0
   var bufferSet = {}
 
+  var GL_UNSIGNED_BYTE = gl.UNSIGNED_BYTE
+
   var GL_ARRAY_BUFFER = gl.ARRAY_BUFFER
   var GL_ELEMENT_ARRAY_BUFFER = gl.ELEMENT_ARRAY_BUFFER
   var bufferTypes = {
@@ -25,6 +28,7 @@ module.exports = function createBufferSet (gl, mirrorData) {
     this.usage = GL_DYNAMIC_DRAW
     this.byteLength = 0
     this.data = null
+    this.dtype = GL_UNSIGNED_BYTE
   }
 
   Object.assign(REGLBuffer.prototype, {
@@ -45,13 +49,23 @@ module.exports = function createBufferSet (gl, mirrorData) {
         var data = options.data
         if (data === null) {
           this.byteLength = 0
+          this.dtype = GL_UNSIGNED_BYTE
         } else {
           if (Array.isArray(data)) {
-            data = new Float32Array(data)
+            if (this.type === GL_ELEMENT_ARRAY_BUFFER) {
+              if (extensions['oes_element_index_uint']) {
+                data = new Uint32Array(data)
+              } else {
+                data = new Uint16Array(data)
+              }
+            } else {
+              data = new Float32Array(data)
+            }
           } else {
             check.isTypedArray(data, 'invalid data type buffer data')
           }
           this.byteLength = data.byteLength
+          this.dtype = dtypes[data]
         }
         this.data = data
       } else if ('length' in options) {
@@ -60,19 +74,23 @@ module.exports = function createBufferSet (gl, mirrorData) {
             'buffer length must be a nonnegative integer')
         this.data = null
         this.byteLength = options.length | 0
+        this.dtype = GL_UNSIGNED_BYTE
       }
 
       this.bind()
       gl.bufferData(this.type, this.data || this.byteLength, this.usage)
     },
 
     refresh: function () {
-      this.bind()
-      gl.bufferData(this.type, this.data || this.byteLength, this.usage)
+      if (!gl.isBuffer(this.buffer)) {
+        this.buffer = gl.createBuffer()
+      }
+      this.update({})
     },
 
     destroy: function () {
       check(this.buffer, 'buffer must not be deleted already')
+      gl.destroyBuffer(this.buffer)
     }
   })
 

lib/validate.js lib/check.js

@@ -1,3 +1,5 @@
+var dtypes = require('./dtypes.json')
+
 function extend (Parent, Child, name) {
   var proto = Child.prototype = new Parent()
   proto.name = name
@@ -41,7 +43,9 @@ function checkParameter (param, possibilities, message) {
 }
 
 function checkIsTypedArray (data, message) {
-  assert()
+  assert(
+    Object.prototype.toString.call(data) in dtypes,
+    message)
 }
 
 module.exports = Object.assign(assert, {

lib/context.js

@@ -0,0 +1,99 @@
+/*globals HTMLElement,WebGLRenderingContext,Canvas*/
+
+var check = require('./check')
+
+function createCanvas (element, options) {
+  var canvas = document.createElement('canvas')
+  var args = getContext(element, options)
+
+  Object.assign(canvas.style, {
+    position: 'absolute',
+    top: 0,
+    left: 0
+  })
+  element.appendChild(canvas)
+  resize()
+
+  var scale = +window.devicePixelRatio
+  function resize () {
+    var w = window.innerWidth
+    var h = window.innerHeight
+    if (element !== document.body) {
+
+    }
+    canvas.width = scale * w
+    canvas.height = scale * h
+    canvas.style.width = w
+    canvas.style.height = h
+  }
+
+  window.addEventListener('resize', resize, false)
+
+  var prevDestroy = args.options.onDestroy
+  args.options = Object.assign({}, args.options, {
+    onDestroy: function () {
+      window.removeEventListener('resize', resize)
+      element.removeChild(canvas)
+      prevDestroy && prevDestroy()
+    }
+  })
+
+  return args
+}
+
+function getContext (canvas, options) {
+  var glOptions = options.glOptions
+
+  function get (name) {
+    try {
+      return canvas.getContext(name, glOptions)
+    } catch (e) {
+      return null
+    }
+  }
+
+  var gl = get('webgl') ||
+           get('experimental-webgl') ||
+           get('webgl-experimental')
+
+  check(gl, 'webgl not supported')
+
+  return {
+    gl: gl,
+    options: options
+  }
+}
+
+module.exports = function parseArgs (args) {
+  if (typeof document !== 'undefined' ||
+      typeof HTMLElement !== 'undefined') {
+    return {
+      gl: args[0],
+      options: args[1] || {}
+    }
+  }
+
+  var element = document.body
+  var options = args[1] || {}
+
+  if (typeof args[0] === 'string') {
+    element = document.querySelector(args[0]) || document.body
+  } else if (typeof args[0] === 'object') {
+    if (args[0] instanceof HTMLElement) {
+      element = args[0]
+    } else if (args[0] instanceof WebGLRenderingContext) {
+      return {
+        gl: args[0],
+        options: options
+      }
+    } else {
+      options = args[0]
+    }
+  }
+
+  if (element instanceof Canvas) {
+    return getContext(element, options)
+  } else {
+    return createCanvas(element, options)
+  }
+}

lib/draw.js

@@ -0,0 +1,12 @@
+{
+  "[object Int8Array]": 5120
+, "[object Int16Array]": 5122
+, "[object Int32Array]": 5124
+, "[object Uint8Array]": 5121
+, "[object Uint8ClampedArray]": 5121
+, "[object Uint16Array]": 5123
+, "[object Uint32Array]": 5125
+, "[object Float32Array]": 5126
+, "[object Float64Array]": 5121
+, "[object ArrayBuffer]": 5121
+}

lib/dtypes.json

@@ -0,0 +1,44 @@
+var check = require('./check')
+
+module.exports = function createExtensionCache (gl, required) {
+  var extensions = {}
+
+  function refreshExtensions () {
+    [
+      'oes_texture_float',
+      'oes_texture_float_linear',
+      'oes_texture_half_float',
+      'oes_texture_half_float_linear',
+      'oes_standard_derivatives',
+      'oes_element_index_uint',
+      'oes_fbo_render_mipmap',
+
+      'webgl_depth_texture',
+      'webgl_draw_buffers',
+      'webgl_color_buffer_float',
+
+      'ext_texture_filter_anisotropic',
+      'ext_frag_depth',
+      'ext_blend_minmax',
+      'ext_shader_texture_lod',
+      'ext_color_buffer_half_float',
+      'ext_srgb',
+
+      'angle_instanced_arrays'
+    ].forEach(function (ext) {
+      extensions[ext] = gl.getExtension(ext)
+    })
+
+    required.forEach(function (ext) {
+      check(extensions[ext.toLowerCase()],
+        'required extension "' + ext + '" is unsupported')
+    })
+  }
+
+  refreshExtensions()
+
+  return {
+    extensions: extensions,
+    refresh: refreshExtensions
+  }
+}

lib/extension.js

@@ -1,27 +1,36 @@
-'use strict'
-
-// This module implements caching for shader objects
-
-var REGLError = require('./error')
+var check = require('./check')
 var formatCompilerError = require('gl-format-compiler-error')
 
-function REGLProgram (program, uniforms, attributes) {
-  this.program = program
-  this.uniforms = uniforms
-  this.attributes = attributes
-}
-
 module.exports = function createShaderCache (gl) {
   var shaders = {}
   var programs = {}
 
+  var GL_FRAGMENT_SHADER = gl.FRAGMENT_SHADER
+  var GL_VERTEX_SHADER = gl.VERTEX_SHADER
+
+  function REGLProgram (program, uniforms, attributes) {
+    this.program = program
+    this.uniforms = uniforms
+    this.attributes = attributes
+  }
+
   function clearCache () {
-    shaders[gl.FRAGMENT_SHADER] = {}
-    shaders[gl.VERTEX_SHADER] = {}
-    programs = {}
+    Object.keys(shaders).forEach(function (type) {
+      Object.keys(shaders[type]).forEach(function (shader) {
+        gl.destroyShader(shader)
+      })
+    })
+    shaders[GL_FRAGMENT_SHADER] = {}
+    shaders[GL_VERTEX_SHADER] = {}
+
+    // TODO destroy programs
   }
 
   function refreshCache () {
+    shaders[GL_FRAGMENT_SHADER] = {}
+    shaders[GL_VERTEX_SHADER] = {}
+
+    // TODO recompile and link all programs
   }
 
   function getShader (type, source) {
@@ -38,9 +47,9 @@ module.exports = function createShaderCache (gl) {
         try {
           var fmt = formatCompilerError(errLog, source, type)
         } catch (e) {
-          throw new REGLError(errLog, 'Error compiling shader:\n' + errLog)
+          check.raiseRuntime(errLog, 'Error compiling shader:\n' + errLog)
         }
-        throw new REGLError(errLog, fmt.short, fmt.long)
+        check.raiseRuntime(errLog, fmt.short, fmt.long)
       }
       cache[source] = shader
     }
@@ -99,7 +108,7 @@ module.exports = function createShaderCache (gl) {
 
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
       var errLog = gl.getProgramInfoLog(program)
-      throw new REGLError(errLog, 'Error linking program:' + errLog)
+      check.raiseRuntime(errLog, 'Error linking program:' + errLog)
     }
 
     // Construct result
@@ -123,11 +132,10 @@ module.exports = function createShaderCache (gl) {
     return program
   }
 
-  // Invalidate cache
   clearCache()
 
   return {
-    get: getProgram,
+    create: getProgram,
     clear: clearCache,
     refresh: refreshCache
   }

lib/shader.js

@@ -0,0 +1,23 @@
+module.exports = function stateCache (
+  gl,
+  extensions,
+  shaderCache,
+  bufferCache,
+  textureCache,
+  fboCache) {
+
+  function createEnvironment (options) {
+  }
+
+  function clearCache () {
+  }
+
+  function refreshCache () {
+  }
+
+  return {
+    create: createEnvironment,
+    clear: clearCache,
+    refresh: refreshCache
+  }
+}