Skip to content

Instantly share code, notes, and snippets.

@mikolalysenko
Created May 29, 2013 22:46
Show Gist options
  • Save mikolalysenko/5674433 to your computer and use it in GitHub Desktop.
Save mikolalysenko/5674433 to your computer and use it in GitHub Desktop.
New texture.js api

texture.js

Browserify-compatible, streamable webgl 2D texture module.

var texture = require('texture.js')
  , canvas = document.createElement('canvas')
  , gl = canvas.getContext('experimental-webgl')
  , Texture = texture(gl)

Texture.fromURL('image.png', function(err, texture) {
  var img = new Image
  img.src = 'someotherimg.jpg'
  img.onload = function() {
    texture.writeImage(
        img
      , 0
      , 0
      , img.width
      , img.height
      , Math.floor(texture.width()/2)
      , Math.floor(texture.height()/2)
      , img.width
      , img.height
    )
  }
})

API

require('texture.js') -> function texture(gl){}

Returns a function that accepts a WebGL context and returns the Texture constructor function.

texture(gl) -> Texture

Returns the Texture constructor when provided a gl context.

Constructors

All of the constructors can take an optional object with any of the following paramters:

mag : scale up filter

Values

  • "linear": gl.LINEAR
  • "nearest": gl.NEAREST

min : scale down filter

Values

  • "linear": gl.LINEAR
  • "nearest": gl.NEAREST
  • "mipmap": gl.LINEAR_MIPMAP_LINEAR

wrap_width wrap_height

gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_S|T, <value>)

Values

  • "repeat": gl.REPEAT
  • "clamp": gl.CLAMP_TO_EDGE

Texture.fromDOM(element[, options, ready])

Static method that accepts a HTMLCanvas or Image element, as well as optional options object and a node-style ready callback (function(err, texture instance) {}).

Dimensions are pulled from the incoming element.

Texture.fromURL(url[, options, ready])

Static method that accepts a string URL to load as a texture. Otherwise follows the fromImage API.

Note Textures should be loaded from the same domain, or from a domain that provides the appropriate CORS headers.

Texture.fromArray(array[, options, ready])

Loads a texture from from an empty ndarray.

Texture.create(dimensions, color[, options], ready)

Static method that accepts a set of integer dimensions [rows, columns], a color -- either null for empty textures or [red, green, blue, alpha] floating point values, an optional options object, and a node-style callback.

Accessors

Texture.handle -> WebGL texture handle

Returns a handle suitable for passing to gl.bindTexture.

// e.g.,
gl.bindTexture(gl.TEXTURE_2D, myTexture.handle())

Texture.width() -> integer width

Texture.height() -> integer height

Returns the requested dimension of the image.

Members

Texture.enable(textureUnit = 0) -> textureUnit

Binds the texture to the specified texture unit.

Texture.blit(...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment