THREE.js: Custom Shader creates weird artifacts (space between faces)

[Sebi]

Helly guys,
 
for a game that I'm working on, I have written a custom tilemap shader based on http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html
 
It works quite well, except that it creates weird spaces between my tiles.
You can see the issue on this screen shot:


 
 
The tilemap:

var tilemap = ... canvas ...var texture = new THREE.Texture(tilemap,  THREE.UVMapping, // mapping THREE.ClampToEdgeWrapping, // wrapS THREE.ClampToEdgeWrapping, // wrapT THREE.NearestFilter, // magfilter THREE.NearestMipMapNearestFilter, //minfilter, THREE.RGBAFormat, // format THREE.UnsignedByteType // type/*, anisotropy */)

The tileset:

var tileset = THREE.ImageUtils.loadTexture(image, {}, function() {  tileset.wrapS = tileset.wrapT = THREE.ClampToEdgeWrapping;  tileset.magFilter = THREE.NearestFilter;  tileset.minFilter = THREE.NearestMipMapNearestFilter;  ...});

Fragment Shader:
 

var fShader = [  //"precision mediump float;",  "varying vec2 pixelCoord;",  "varying vec2 texCoord;",  "uniform sampler2D tiles;",  "uniform sampler2D sprites;",  "uniform vec2 inverseTileTextureSize;",  "uniform vec2 inverseSpriteTextureSize;",  "uniform float tileSize;",  "uniform float colorA;",  "uniform float colorB;",  "void main(void) {",  "    vec4 tile = texture2D(tiles, texCoord);",  "    if(tile.x == 1.0 && tile.y == 1.0) { discard; }", // discard when r & g 255  "    if((tile.x == colorA && tile.y == colorA) || (tile.x == colorB && tile.y == colorB)) {", // just for my editor  "        gl_FragColor = tile;",  "    } else {",  "        vec2 spriteOffset = floor(tile.xy * 256.0) * tileSize;",  "        vec2 spriteCoord = mod(pixelCoord, tileSize);",  "        gl_FragColor = texture2D(sprites, (spriteOffset + spriteCoord) * inverseSpriteTextureSize);",  "    }",  "}"].join("\n");

Vertex Shader:
 

var vShader = [  //"precision mediump float;",  "varying vec2 pixelCoord;",  "varying vec2 texCoord;",  "uniform vec2 mapSize;",  "uniform vec2 inverseTileTextureSize;",  "uniform float inverseTileSize;",  "void main(void) {",  "    pixelCoord = (uv * mapSize);",  "    texCoord = pixelCoord * inverseTileTextureSize * inverseTileSize;",  "    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",  "}"].join("\n");

uniforms:
 

var uniforms = {  mapSize: { type: 'v2', value: new THREE.Vector2(worldSize.w, worldSize.h) },  inverseTileTextureSize: { type: 'v2', value: new THREE.Vector2(1/tilemap.width, 1/tilemap.height) },  inverseSpriteTextureSize: { type: 'v2', value: new THREE.Vector2(1/tileset.image.width, 1/tileset.image.height) },  tileSize: { type: 'f', value: 16 },  inverseTileSize: { type: 'f', value: 1/16 },  tiles: { type: 't', value: texture },  sprites: { type: 't', value: tileset },  colorA: { type: 'f', value: (1.0/255)*51 },  colorB: { type: 'f', value: (1.0/255)*68 }};

Shader Material:

var material = new THREE.ShaderMaterial({  uniforms: uniforms,  vertexShader: vShader,  fragmentShader: fShader,  wireframe: false,  transparent: false});

Any idea where this issue comes from and how to fix it?

 

The error must be either in the fragment shader or the vertex shader 

[Sebi]

Seems like 

 

var texture = new THREE.Texture(tilemap,  ... THREE.NearestFilter, //minfilter, ...)

and

 

var tileset = THREE.ImageUtils.loadTexture(image, {}, function() {  ...  tileset.minFilter = THREE.NearestFilter;  ...});

solved it for me.

The NearestMipMapNearestFilter minfilter messed it up for me. Now all artifacts are gone!