因此，要使用 Threejs 和 Brandon Jone 的 tilemap 方法（在此处找到）实现 tilemap，我THREE.Plane为每一层使用几何图形，并使用以下自定义着色器绘制面部：
顶点着色器：
var tilemapVS = [
"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");
片段着色器：
var tilemapFS = [
"varying vec2 pixelCoord;",
"varying vec2 texCoord;",
"uniform sampler2D tiles;",
"uniform sampler2D sprites;",
"uniform vec2 inverseTileTextureSize;",
"uniform vec2 inverseSpriteTextureSize;",
"uniform float tileSize;",
"uniform int repeatTiles;",
"void main(void) {",
" vec4 tile = texture2D(tiles, texCoord);", //load this pixel of the tilemap
" if(tile.x == 1.0 && tile.y == 1.0) { discard; }", //discard if R is 255 and G is 255
" vec2 spriteOffset = floor(tile.xy * 256.0) * tileSize;", //generate the offset in the tileset this pixel represents
" vec2 spriteCoord = mod(pixelCoord, tileSize);",
" vec4 texture = texture2D(sprites, (spriteOffset + spriteCoord) * inverseSpriteTextureSize);",
" gl_FragColor = texture;",
"}"
].join("\n");
每个纹理的设置如下：
//Setup Tilemap
this.tilemap.magFilter = THREE.NearestFilter;
this.tilemap.minFilter = THREE.NearestMipMapNearestFilter;
//tilemap.flipY = false;
if(this.repeat) {
this.tilemap.wrapS = this.tilemap.wrapT = THREE.RepeatWrapping;
} else {
this.tilemap.wrapS = this.tilemap.wrapT = THREE.ClampToEdgeWrapping;
}
//Setup Tileset
this.tileset.wrapS = this.tileset.wrapT = THREE.ClampToEdgeWrapping;
this.tileset.flipY = false;
if(this.filtered) {
this.tileset.magFilter = THREE.LinearFilter;
this.tileset.minFilter = THREE.LinearMipMapLinearFilter;
} else {
this.tileset.magFilter = THREE.NearestFilter;
this.tileset.minFilter = THREE.NearestMipMapNearestFilter;
}
制服是：
//setup shader uniforms
this._uniforms = {
mapSize: { type: 'v2', value: new THREE.Vector2(this.tilemap.image.width * this.tileSize, this.tilemap.image.height * this.tileSize) },
inverseSpriteTextureSize: { type: 'v2', value: new THREE.Vector2(1/this.tileset.image.width, 1/this.tileset.image.height) },
tileSize: { type: 'f', value: this.tileSize },
inverseTileSize: { type: 'f', value: 1/this.tileSize },
tiles: { type: 't', value: this.tilemap },
sprites: { type: 't', value: this.tileset },
inverseTileTextureSize: { type: 'v2', value: new THREE.Vector2(1/this.tilemap.image.width, 1/this.tilemap.image.height) },
repeatTiles: { type: 'i', value: this.repeat ? 1 : 0 }
};
以及实际的几何和网格：
//create the shader material
this._material = new THREE.ShaderMaterial({
uniforms: this._uniforms,
vertexShader: tilemapVS,
fragmentShader: tilemapFS,
transparent: false
});
this._plane = new THREE.PlaneGeometry(
this.tilemap.image.width * this.tileSize * this.tileScale,
this.tilemap.image.height * this.tileSize * this.tileScale
);
this._mesh = new THREE.Mesh(this._plane, this._material);
this._mesh.z = this.zIndex;
this.tileSize是16和this.tileScale是4。我遇到的问题是，在 16x16 瓷砖的边缘周围，我有些撕裂：
奇怪的是它不会一直发生，只是在沿 y 轴移动时偶尔发生（但是在我的 linux 机器上，问题要严重得多，并且也会影响 x 轴）。
当与我的顶点着色器一起放置时，这几乎就像 16x16 瓷砖有少量脱落；但我不确定是什么原因造成的。任何帮助表示赞赏，谢谢！
编辑
这是撕裂的更好图像，在草地上更明显：
如您所见，它位于 16x16 瓷砖边缘（因为它们按 缩放4）。