voxel-texture-shader

A custom shader for texturing voxels in voxeljs

voxel-texture-shader

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: https://github.com/deathcap/voxel-debug

// 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 
    textureEngine.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,
  applyTextureParamsfunction(map) {
    map.magFilter = this.THREE.NearestFilter;
    map.minFilter = this.THREE.LinearMipMapLinearFilter;
  }
}

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] 
});
textureEngine.load([
  'obsidian',
  ['back', 'front', 'top', 'bottom', 'left', 'right'],
  'brick'
], 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');

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(),
  textureEngine.material
);
 
// 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.paint(voxelMesh);

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.

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) {
  textureEngine.tick(dt);
});

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