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,
applyTextureParams: function(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.