javascript-在Threejs平面上渲染TMX地图
作者：互联网
Question updated with new code
我正在尝试编写将绘制TMX Layer(从Tiled编辑器导出)的WebGL着色器.我正在使用THREE.js创建一个Plane网格,并将材质设置为ShaderMaterial,它将在其上绘制地图.
对于那些不知道Tiled editor作为json导出的tilemap的人,将为每个图层提供一个data属性；它包含一个数值数组,每个数值都是tileset中的tile索引,例如：
"data": [5438, 5436, 5437, 5438, 5436, 5437, 5438, 5436, 5437, 5438, 845, ...]
由于我的tilemap是256 x 256个tile,因此数组的长度为65536个元素.每个元素的值都引用tilemap中的一个tile,其中的索引定义如下：
tile set http://www.melonjs.org/docs/symbols/spritesheet_grid.png
因此,图块地图的索引0指的是图块5438,如上图所示对其进行计数.索引表示tilemap中的哪个tile具有tileset中的那个tile,并以相同的方式对它们进行计数.
这是我创建材质,平面和网格的方法：
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);
最后是制服和着色器.基本上,我需要将数据元素映射到tileset中的实际tile上并进行绘制.为了将数据数组放入着色器中,我将其作为THREE.DataTexture加载并将其视为纹理.
这是我的第二次尝试：
//Shaders
var vShader = [
'varying vec2 pixelCoord;',
'varying vec2 texCoord;',
'uniform vec2 layerSize;',
'uniform vec2 tilesetSize;',
'uniform vec2 inverseTilesetSize;',
'uniform vec2 tileSize;',
'uniform vec2 inverseTileSize;',
'uniform float scale;',
'void main(void) {',
' pixelCoord = (uv * layerSize) * tileSize * scale;', //pixel we are at
' texCoord = pixelCoord * inverseTilesetSize * inverseTileSize;', //calculate the coord on this map
' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'}'
].join('\n');
var fShader = [
//"precision highp float;",
'varying vec2 pixelCoord;',
'varying vec2 texCoord;',
'uniform vec2 tilesetSize;',
'uniform vec2 inverseTilesetSize;',
'uniform vec2 tileSize;',
'uniform vec2 inverseTileSize;',
'uniform vec2 numTiles;',
'uniform float scale;',
'uniform sampler2D tileset;',
'uniform sampler2D tileIds;',
//I store the tile IDs as a texture (1 float value = rgba)
//this will decode the rgba values back into a float ID
'highp float decode32(highp vec4 rgba) {',
' const vec4 bit_shift = vec4(1.0/(256.0*256.0*256.0), 1.0/(256.0*256.0), 1.0/256.0, 1.0);',
' float depth = dot(rgba, bit_shift);',
' return depth;',
'}',
'void main(void) {',
' vec4 tileId = texture2D(tileIds, texCoord);', //grab this tileId from the layer data
' tileId.rgba = tileId.abgr;', //flip flop due to endianess
//I find that this value is always `0 < tileValue < 1`, I think my `decode32` sucks...
' float tileValue = decode32(tileId);', //decode the vec4 into the float ID
' vec2 tileLoc = vec2(mod(tileValue, numTiles.y), floor(tileValue / numTiles.y));', //convert the ID into x, y coords
' vec2 coord = floor(tileLoc * 256.0) * tileSize;', //coord in the tileset
' vec2 offset = mod(pixelCoord, tileSize);', //how much to draw
' gl_FragColor = texture2D(tileset, (coord + offset) * inverseTilesetSize);', //grab tile from tilset
'}'
].join('\n');
以及制服和数据纹理：
//tried making this 256 x 256 like it is conceptually,
//and also tried 65536 x 1 like the data structure
this.dataTex = new THREE.DataTexture(
this.data,
this.data.length, //width (65536)
1, //height (1)
THREE.RGBAFormat, //format
THREE.UnsignedByteType, //type
THREE.UVMapping, //mapping
THREE.ClampToEdgeWrapping, //wrapS
THREE.ClampToEdgeWrapping, //wrapT
THREE.NearestFilter, //magFilter
THREE.NearestMipMapNearestFilter //minFilter
);
this.dataTex.needsUpdate = true;
this._uniforms = window._uniforms = {
layerSize: { type: 'v2', value: this.size },
tilesetSize: { type: 'v2', value: new THREE.Vector2(this.tileset.image.width, this.tileset.image.height) },
inverseTilesetSize: { type: 'v2', value: new THREE.Vector2(1 / this.tileset.image.width, 1 / this.tileset.image.height) },
tileSize: { type: 'v2', value: this.tileSize },
inverseTileSize: { type: 'v2', value: new THREE.Vector2(1 / this.tileSize.x, 1 / this.tileSize.y) },
numTiles: { type: 'v2', value: new THREE.Vector2(this.tileset.image.width / this.tileSize.x, this.tileset.image.height / this.tileSize.y) },
scale: { type: 'f', value: 1 / this.scale },
tileset: { type: 't', value: this.tileset },
tileIds: { type: 't', value: this.dataTex },
repeatTiles: { type: 'i', value: this.repeat ? 1 : 0 }
};
因此,当渲染时,我得到的是重复重复的图块集的第一个图块：
不知道是什么原因引起的,但是由于它位于位置0、0,我认为我在某个地方对我有零混乱.
解决方法:
终于有了一个可行的解决方案,我最大的问题是将我的float数组打包到纹理中,然后进行解码.我忘记了,当从数据纹理加载字节时,它们是“规范化”的.这意味着每个值均被255除以将其钳位到[0,1].移位这些位后,我需要乘以255.0才能归一化.
我还在某处读到webgl浮点数是24位而非32位的,因此我将编码和解码算法更改为仅使用RGB通道.
现在,它成功地将一个整数数组(或浮点数)打包到一个Uint8Array中,并将其作为纹理传递给webgl并正确使用它：
阵列包装：
var array = [5438, 5436, 5437, 5438, 5436, 5437, ...],
arrayBuff = new ArrayBuffer(array.length * 3),
array8 = new Uint8Array(arrayBuff);
for(var i = 0, y = 0, il = array.length; i < il; ++i, y += 3) {
var value = array[i];
array8[y + 0] = (value & 0x000000ff);
array8[y + 1] = (value & 0x0000ff00) >> 8;
array8[y + 2] = (value & 0x00ff0000) >> 16;
}
dataTex = new THREE.DataTexture(
array8,
this.size.x, //width
this.size.y, //height
THREE.RGBFormat, //format
THREE.UnsignedByteType, //type
THREE.UVMapping, //mapping
THREE.ClampToEdgeWrapping, //wrapS
THREE.ClampToEdgeWrapping, //wrapT
THREE.NearestFilter, //magFilter
THREE.NearestMipMapNearestFilter //minFilter
);
dataTex.needsUpdate = true;
着色器：
var vShader = [
'varying vec2 pixelCoord;',
'varying vec2 texCoord;',
'uniform vec2 mapSize;',
'uniform vec2 inverseLayerSize;',
'uniform vec2 inverseTileSize;',
'void main(void) {',
' pixelCoord = (uv * mapSize);',
' texCoord = pixelCoord * inverseLayerSize * inverseTileSize;',
' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);', //hand this position to WebGL
'}'
].join('\n');
var fShader = [
'varying vec2 pixelCoord;',
'varying vec2 texCoord;',
'uniform vec2 inverseTilesetSize;',
'uniform vec2 tileSize;',
'uniform vec2 numTiles;',
'uniform sampler2D tileset;',
'uniform sampler2D tileIds;',
'float decode24(const in vec3 rgb) {',
' const vec3 bit_shift = vec3((256.0*256.0), 256.0, 1.0);',
' float fl = dot(rgb, bit_shift);', //shift the values appropriately
' return fl * 255.0;', //denormalize the value
'}',
'void main(void) {',
' vec3 tileId = texture2D(tileIds, texCoord).rgb;', //grab this tileId from the layer data
' tileId.rgb = tileId.bgr;', //flip flop due to endianess
' float tileValue = decode24(tileId);', //decode the normalized vec3 into the float ID
' vec2 tileLoc = vec2(mod(tileValue, numTiles.x) - 1.0, floor(tileValue / numTiles.x));', //convert the ID into x, y coords;
' tileLoc.y = numTiles.y - 1.0 - tileLoc.y;', //convert the coord from bottomleft to topleft
' vec2 offset = floor(tileLoc) * tileSize;', //offset in the tileset
' vec2 coord = mod(pixelCoord, tileSize);', //coord of the tile.
' gl_FragColor = texture2D(tileset, (offset + coord) * inverseTilesetSize);', //grab tile from tileset
'}'
].join('\n');
校服：
this._uniforms = window._uniforms = {
mapSize: { type: 'v2', value: new THREE.Vector2(this.size.x * this.tileSize.x, this.size.y * this.tileSize.y) },
inverseLayerSize: { type: 'v2', value: new THREE.Vector2(1 / this.size.x, 1 / this.size.y) },
inverseTilesetSize: { type: 'v2', value: new THREE.Vector2(1 / this.tileset.image.width, 1 / this.tileset.image.height) },
tileSize: { type: 'v2', value: this.tileSize },
inverseTileSize: { type: 'v2', value: new THREE.Vector2(1 / this.tileSize.x, 1 / this.tileSize.y) },
numTiles: { type: 'v2', value: new THREE.Vector2(this.tileset.image.width / this.tileSize.x, this.tileset.image.height / this.tileSize.y) },
tileset: { type: 't', value: this.tileset },
tileIds: { type: 't', value: this.dataTex }
};
标签：webgl,three-js,shader,javascript 来源： https://codeday.me/bug/20191031/1977015.html