Updated question with new code
I'm currently working on a WebGL shader that is designed to render a TMX Layer exported from the Tiled editor. My approach involves using THREE.js to create a Plane mesh and setting the material as ShaderMaterial to draw the map on it.
For those unfamiliar, a tilemap exported by the Tiled editor in json format provides a data attribute for each layer. This attribute contains an array of numerical values representing the tile index in the tileset like:
"data": [5438, 5436, 5437, 5438, 5436, 5437, 5438, 5436, 5437, 5438, 845, ...]
Given that my tilemap consists of 256x256 tiles, the array is 65536 elements long. Each element represents a tile in the tilemap indexed as follows:
https://i.sstatic.net/b7n4O.png
(source: melonjs.org)
Therefore, index 0 in the tilemap corresponds to tile 5438 according to the above indexing logic. The indexes specify which tile in the tilemap corresponds to a particular tile from the tileset using the same counting convention.
This is how I am setting up the material, plane, and mesh:
this.size = new THREE.Vector2(256, 256);
this.tileSize = new THREE.Vector2(16, 16);
this._material = new THREE.ShaderMaterial({
uniforms: this._uniforms,
vertexShader: this.vShader,
fragmentShader: this.fShader,
transparent: (this.opacity === 0)
});
this._plane = new THREE.PlaneGeometry(
this.size.x * this.tileSize.x,
this.size.y * this.tileSize.y
);
this._mesh = new THREE.Mesh(this._plane, this._material);
Here are the uniforms and shaders. I need to map the data element to an actual tile in the tileset and then render it. To pass the data array to the shader, I load it as a THREE.DataTexture and treat it as a texture.
Below is my revised attempt at the shaders:
//Shaders
var vShader = [
// shader code
].join('\n');
var fShader = [
// shader code
].join('\n');
As well as the uniforms and data texture:
// uniform and data texture setup
Upon rendering, I encounter the issue of the first tile in the tileset being repeated multiple times:
I suspect there might be a zero value causing this problem since it occurs at position 0, 0.