Restore texture atlas support

[deathcap]

See deathcap/voxel-engine@47a05ba #14

[deathcap]

Currently can only be enabled programmatically, editing source and setting useAtlas: true (allowing dynamic runtime reconfiguration would require some more work, to reinitialize voxel-texture then game.showAllChunks()).

On:

off (default):

[deathcap]

Added dynamic useAtlas toggling option in:

voxel-debug: deathcap/voxel-debug@26d9149
voxel-texture: deathcap/voxel-texture@3f65bf0 (and earlier)

deployed to http://deathcap.github.io/voxpopuli/ in 695ad52

[deathcap]

Reopening to investigate fixing the stretching and enable atlas by default - currently texturing is the largest performance bottleneck (especially noticeable with voxel-clientmc, complex scenes), uv/atlas helps dramatically

[deathcap]

I think what is needed to solve the stretching is a custom fragment shader. Example fragment shader from https://developer.mozilla.org/en-US/docs/Web/WebGL/Using_textures_in_WebGL#The_fragment_shader:

    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));

the fragment's color is computed by fetching the texel (that is, the pixel within the texture) that the sampler says best maps to the fragment's position

For tiling, will need something like (t * count) % size [for each dimension], where count = how many voxels to repeat across, and size = size of texture in u/v space (0..1, e.g. 0.1 if 10 textures in the atlas).

[deathcap]

algorithm in JavaScript (will need to be converted to GLSL), only X dimension (need Y, too), ignoring texture2D/sampler lookup for now:

var tileCount = 5; // number of voxels to cover
var uStart = 0.0; // UV coordinate in atlas at beginning of texture
var uEnd = 0.5; // UV coordinate in atlas at end of texture (0.0-0.5 allows two textures, second at 0.5-1.0)

// repeats tiles from [0..1] across x [0..1], given number of times
var tile = function(x, times) {
  return x % (1 / times) * times;
};

// scale x [fromLow..fromHigh] to [toLow, toHigh]
var scale = function(x, fromLow, fromHigh, toLow, toHigh) {
  return (x - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
};

gl_FragColor = scale(tile(x, tileCount), 0, 1, uStart, uEnd);

visualization with https://github.com/deathcap/noisecomp:

repeats five times, from 0 (white) to 0.5 (gray)

[deathcap]

http://0fps.wordpress.com/2013/07/09/texture-atlases-wrapping-and-mip-mapping/ says:

vec2 tileUV = vec2(dot(normal.zxy, position), 
               dot(normal.yzx, position))
vec2 texCoord = tileOffset + tileSize * fract(tileUV)

set https://github.com/mikolalysenko/voxel-mipmap-demo

[deathcap]

Started looking into shaders.. voxel-texture currently uses MeshLambertMaterial, from three.js, which has uniforms, vertex shader, and fragment shader defined in https://github.com/mrdoob/three.js/tree/master/src/renderers/shaders - fairly abstractly, built up from ShaderChunks in ShaderLib. three.js provides a ShaderMaterial allowing custom uniforms (array of variable names, type, value to pass), vertexShader, and fragmentShader (text strings of GLSL programs compiled for the graphics card). Tried to replicate lambert shading with ShaderLib, but not clear how, because of the organization of three.js: https://github.com/mrdoob/three.js/blob/master/src/materials/MeshLambertMaterial.js is basically only a data type, all of the actual logic is spread out elsewhere.. (you can pass vertexShader: this.THREE.ShaderLib.lambert.vertexShader, fragmentShader: this.THREE.ShaderLib.lambert.fragmentShader, but the uniforms have to be set, too. this.THREE.ShaderLib.lambert.uniforms is only a template for the uniforms, intended to be cloned then .values set.), much of it in this 6000+ line file https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js with 'instanceof THREE.MeshLambertMaterial' checks, hmm...

[deathcap]

http://stackoverflow.com/questions/12627422/custom-texture-shader-in-three-js

^ This custom shader code with texture maps works as a starting point. mikolalysenko's shaders from http://0fps.wordpress.com/2013/07/09/texture-atlases-wrapping-and-mip-mapping/ are in https://github.com/mikolalysenko/ao-shader/tree/master/lib - computing position from attrib0, normal and tile coordinate from attrib1 in the vertex shader, passing texCoord and tileCoord to the fragment shader; vec2 uv = texCoord; as opposed to voxel-texture which sets the UV coordinates from three.js, passed into the vertex shader as 'uv'.

[deathcap]

Found this: http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/
Firefox 27 beta http://www.mozilla.org/en-US/firefox/beta/ has a very useful built-in Shader Editor
With its help, made some progress (this is with greedy meshing enabled):

with https://github.com/deathcap/voxel-texture/tree/shadertest as of https://github.com/deathcap/voxel-texture/tree/d702869d81c0f8728e773b46f587014bbfd0481d

The texture coordinates are calculated from the fractional part of the world position coordinates (since voxels are 1x1x1, fractional parts are within voxels), instead of having three.js set and pass the UV coordinates (mesh.geometry.faceVertexUvs).

Still to do:

• Pass in tileOffsets corresponding to material type (uniforms or attributes?) instead of hardcoding stone (0.28125, 0.96875)
• Fix the artifacts at the voxel edges http://0fps.wordpress.com/2013/07/09/texture-atlases-wrapping-and-mip-mapping/ using 4-tap trick or Rafał's shifted double atlas technique (in 0fps blog comments)

[deathcap]

https://github.com/deathcap/voxel-texture/tree/93115824a52d8408e3995687afade618cb9adfb2

Added uniform vec2 tileOffsets[7] in fragmentShader to specify UV coordinates of each of the cube faces, passed in through ShaderMaterial uniforms:

 mesh.surfaceMesh.material.materials[0].uniforms.tileOffsets.value[faceIndex] = new self.game.THREE.Vector2(topUV[0], 1.0 - topUV[1]); 

sort of works, but the uniforms are shared amongst all meshes.. stuck on how to separate them out properly. I think uniforms are the right way to pass this information, as the tileOffsets remain constant throughout the entire geometry (unlike e.g. attributes, per vertex and passed to the vertex shader; or varyings, passed from vertex shader to fragment shader).

But voxel-texture only has one material for everything. this.material, set to a MeshFaceMaterial (originally with two MeshLambertMaterials; I've changed to ShaderMaterial). self.material.needsUpdate is set true in _afterLoading(), and getMesh() returns this.material...

[deathcap]

voxel-enginehttps://github.com/maxogden/voxel-engine/blob/6873a3f6d9e15d9f1106063ef294cf887b2fb0a6/index.js#L562

else mesh.createSurfaceMesh(this.materials.material)

calls into voxel-mesh with the material. Was temporarily changed in my branch deathcap/voxel-engine@58967db to getMesh() for non-atlas compatibility. Pre-atlas texture API in max-mapper/voxel-engine@6b5e5e8 :

 -    else mesh.createSurfaceMesh(new THREE.MeshFaceMaterial(this.materials.get()))
 -    this.materials.paint(mesh.geometry)
 +    else mesh.createSurfaceMesh(this.materials.material)
 +    this.materials.paint(mesh)

and:

TextureSimple.prototype.getMesh = function() {
  return new this.THREE.MeshFaceMaterial(this.get());
};

TextureSimple.prototype.get = function(index) {
  if (index == null) return this.materials;

where materials = array of all materials. The atlas-based voxel-texture uses a MeshFaceMaterial also, but the array only has two elements, 0 for opaque and 1 for transparent (vs one for each block material texture). three.js MeshFaceMaterial works with Face3, materialIndex points into MeshFaceMaterial.materials.

[deathcap]

Here we go:

Highly noticeable artifacts though..

[deathcap]