node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey ยป



Stitches a set of block textures together into a texture atlas

The texture names are looked up from voxel-registry and the texture data from artpacks.

For an example, run npm start or try the live demo.

Arbitrary rects vs fixed arrays

voxel-stitch uses atlaspack, which supports packing textures of arbitrary rectangular shapes onto a two-dimensional canvas. The mip maps are generated using rect-mip-map.

(Before version 0.3, voxel-stitch would generate a 5-dimensional ndarray is in a format suitable for gl-tile-map / tile-mip-map, which required fixed texture sizes.)


Load using voxel-plugins, options:

  • artpacks: Array of resource pack URL(s) to load for textures, defaults to ProgrammerArt.
  • atlasSize: Texture atlas width and height, in pixels. Note not all graphics cards support all texture dimensions, but WebGL stats shows MAX_TEXTURE_SIZE of 2048 or smaller is supported by 100% of WebGL users.
  • debug: If true, writes out each mip level to the document for debugging.


  • stitch(): Build this.atlas from all block texture properties in voxel-registry.
  • createGLTexture(gl, cb): Creates a gl-texture2d with the GL context, calls cb(err, tex) when complete, comparable to gl-tile-map.
  • preloadTexture(name): Adds name to the list of textures to load in stitch(). Textures listed in the voxel-registry texture property are automatically loaded; you can add additional textures for custom non-voxel use here.
  • getTextureUV(name): Get UV coordinates for a texture (without padding), for custom usage with this.texture

Events (voxel-stitch is an EventEmitter and emits the following):

  • added: Added one texture to the atlas.
  • addedAll: All of the textures in stitch() were added.
  • updateTexture: All textures were added and voxelSideTextureIDs has been populated.