node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Shaders for texturing voxels in voxel.js

Based on voxel-texture by @shama, mostly compatible but several differences:

  • Supports greedy meshing, tiling the voxel textures appropriately (using techniques by @mikolalysenko in Texture atlases, wrapping and mip mapping)
  • Supports optional four-tap sampling to fix texture seams (also based on @mikolalysenko's work)
  • Loads textures using artpacks (instead of individual files in texturePath)

Experimental toggling between voxel-texture-shader and voxel-texture:


// create a material engine 
var textureEngine = require('voxel-texture-shader')({
  // a copy of your voxel.js game 
  game: game,
  // artpacks instance 
  artPacks: artPacks
// load textures and it returns textures just loaded 
textureEngine.load(['grass', 'dirt', 'grass_dirt'], function(textures) {
  // create a new mesh 
  var cube = new game.THREE.Mesh(
    new game.THREE.CubeGeometry(game.cubeSize, game.cubeSize, game.cubeSize),
    // use the texture engine atlas material 
  // paint the cube with grass on top, dirt on bottom and grass_dirt on sides 
  textureEngine.paint(cube, ['grass', 'dirt', 'grass_dirt']);



Returns a new texture engine instance. Must pass a copy of your voxel.js game. options defaults to:

  artPacks: artPacks,
  materialParams: { ambient: 0xbbbbbb },
  materialType: THREE.MeshLambertMaterial,
  applyTextureParams: function(map) {
    map.magFilter = this.THREE.NearestFilter;
    map.minFilter = this.THREE.LinearMipMapLinearFilter;

textureEngine.load(textures, callback)

Loads textures onto the atlas by expanding the texture names:

textureEngine.load('grass', function(textures) {
  // textures = [grass, grass, grass, grass, grass, grass] 
textureEngine.load(['grass', 'dirt', 'grass_dirt'], function(textures) {
  // textures = [grass_dirt, grass_dirt, grass, dirt, grass_dirt, grass_dirt] 
  ['back', 'front', 'top', 'bottom', 'left', 'right'],
], function(textures) {
  textures = [
    obsidian, obsidian, obsidian, obsidian, obsidian, obsidian,
    back, front, top, bottom, left, right,
    brick, brick, brick, brick, brick, brick


Finds the type of block by texture name:

// Find and change the center block to grass 
game.setBlock([0, 0, 0], textureEngine.find('grass'));

Although this is built into the voxel engine so you could just do:

game.setBlock([0, 0, 0], 'grass');

textureEngine.paint(mesh, textures)

Modifies the UV mapping of given mesh to the textures names supplied:

// create a custom mesh and load all materials 
var mesh = new game.THREE.Mesh(
  new game.THREE.Geometry(),
// paint the geometry 
textureEngine.paint(mesh, ['grass', 'dirt', 'grass_dirt']);

Or if you have the face.color set on the faces of your geometry (such as how voxel-mesh does it) then omit the textures argument. It will select the texture based on color from all the previously loaded textures:


textureEngine.sprite(name, w, h, callback)

Create textures from a sprite map. If you have a single image with a bunch of textures do:

// load terrain.png, it is 512x512 
// each texture is 32x32 
textureEngine.sprite('terrain', 32, function(textures) {
  // each texture will be named: terrain_x_y 

The width and height default to 16x16.

textureEngine.animate(mesh, textures, delay)

Create an animated material. A material that after each delay will paint the mesh by iterating through textures. Must run textureEngine.tick() to actually animate.

var mesh = new game.THREE.Mesh(
  new game.THREE.Geometry(),
  new game.THREE.MeshFaceMaterial()
mesh.material = textureEngine.animate(mesh, ['one', 'two', 'three'], 1000);


Run the animations for any animated materials.

game.on('tick', function(dt) {


Copyright (c) 2013 Kyle Robinson Young
Licensed under the MIT license.