生成される正方形マップの一辺のタイル数：<input id="MDIM" type="text"><br/>
<canvas id="CNVS" width="512" height="512"></canvas>
<textarea id="AREA" style="font-size:10px;width:512px;height:512px"></textarea><hr/>
8x8に分割されるタイルセット画像：<input id="FILE" type="file"><br/>
<img id="OIMG" width="512" height="512">
<script >
const vsrc=`attribute vec3 p;void main(){gl_PointSize=32.;gl_Position=vec4(vec3(p),1.);}`;
const fsrc=`precision mediump float;
uniform sampler2D map;	uniform sampler2D tile;uniform int MAPDIM;	uniform int TILEDIM;
//const float IMGDIM=256.0-0.001;
vec3 toVec3(float p){
	// 8bit整数だったfloat?を3bit/3bit/2bitに分けてvec3(x,y,z)に入れるみたいな。
	float x,y,z;
	// rrrgggbb
	float a=p*=256.0;
	if(a>=128.0){x+=4.0;a-=128.0;}
	if(a>= 64.0){x+=2.0;a-= 64.0;}
	if(a>= 32.0){x+=1.0;a-= 32.0;}
	if(a>= 16.0){y+=4.0;a-= 16.0;}
	if(a>=  8.0){y+=2.0;a-=  8.0;}
	if(a>=  4.0){y+=1.0;a-=  4.0;}
	if(a>=  2.0){z+=4.0;a-=  2.0;}
	if(a>=  1.0){z+=2.0;a-=  1.0;}
	return vec3(x,y,z)/8.0;
}
// 回転させる。
vec2 getRotated(vec2 srcCoord, float c){
	vec2 coord=fract(srcCoord*float(MAPDIM))/float(TILEDIM);
	float s=1.0/float(TILEDIM);
	if(c< 2.0/8.0)return vec2(coord.x, coord.y);	// 0度
	if(c< 4.0/8.0)return vec2(s-coord.y, coord.x);	// 90度
	if(c< 6.0/8.0)return vec2(s-coord.x, s-coord.y);	// 180度
	if(c< 8.0/8.0)return vec2(coord.y, s-coord.x);	// 270度
	return vec2(0);
}
vec2 getTile(vec3 currentTile, vec2 coord){
	vec2 tileCoord=vec2(0);
	tileCoord+=vec2(currentTile.x, currentTile.y);	// このタイルの
	tileCoord+=vec2(getRotated(coord, currentTile.z));	// このへん
	return tileCoord;
}
//
void main(){
	vec2 scrCoord=gl_FragCoord.xy/512.;	scrCoord.y=1.0-scrCoord.y;
	float p=texture2D(map, scrCoord).r;
	vec3 m=toVec3(p);	// m.xy:指定タイル、m.z:タイルの向き
	gl_FragColor=vec4(m,1);
	// タイル指定数値からタイルにしてはめこむ。
	gl_FragColor=texture2D(tile, getTile(m, scrCoord));
}`;
var cx0=CNVS.getContext("webgl",{preserveDrawingBuffer:true});
const SHADV=0x8b31,SHADF=0x8b30,COLOB=0x4000;
var vs0=cx0.createShader(SHADV);cx0.shaderSource(vs0, vsrc);cx0.compileShader(vs0);
var fs0=cx0.createShader(SHADF);cx0.shaderSource(fs0, fsrc);cx0.compileShader(fs0);
var pg0=cx0.createProgram();cx0.attachShader(pg0, vs0);cx0.attachShader(pg0, fs0);
cx0.linkProgram(pg0);
console.log(`Compile log for VS ${vs0}:\n${cx0.getShaderInfoLog(vs0)}`);
console.log(`Compile log for FS ${fs0}:\n${cx0.getShaderInfoLog(fs0)}`);
console.log(`Link log for PG ${pg0}:\n${cx0.getProgramInfoLog(pg0)}`);
var pg0TILEDIM=cx0.getUniformLocation(pg0, "TILEDIM");
var pg0MAPDIM=cx0.getUniformLocation(pg0, "MAPDIM");
var pg0tile=cx0.getUniformLocation(pg0, "tile");
var pg0map=cx0.getUniformLocation(pg0, "map");
cx0.bindBuffer(cx0.ARRAY_BUFFER, cx0.createBuffer());
cx0.enableVertexAttribArray(0);cx0.vertexAttribPointer(0, 2, cx0.FLOAT, false, 0,0);
cx0.bufferData(cx0.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3, ]), cx0.STATIC_DRAW);
</script>
<script>
const TXT2D=0x0de1,TXT00=0x84c0,FRGBA=0x1908,FLUMI=0x1909,FALPH=0x1906;
const TYPUB=0x1401;
const MAGFT=0x2800,MINFT=0x2801,NEARE=0x2600,LINEA=0x2601,NEMNE=0x2700;
const WRAPS=0x2802,WRAPT=0x2803,REPET=0x2901,CLAMP=0x812F,REPEM=0x8370;
var tx0=cx0.createTexture();
cx0.activeTexture(TXT00+0);cx0.bindTexture(TXT2D,tx0);setfTx(cx0,NEARE);setwTx(cx0,CLAMP);
var tx1=cx0.createTexture();
cx0.activeTexture(TXT00+1);cx0.bindTexture(TXT2D,tx1);setfTx(cx0,NEARE);setwTx(cx0,CLAMP);
CNVS.style="background-color:black";
MDIM.value=16;
const data=`0x00,0x20,0x40,0x60,0x80,0xa0,0xc0,0xe0,0x01,0x21,0x41,0x61,0x81,0xa1,0xc1,0xe1,
0x04,0x24,0x44,0x64,0x84,0xa4,0xc4,0xe4,0x05,0x25,0x45,0x65,0x85,0xa5,0xc5,0xe5,
0x08,0x28,0x48,0x68,0x88,0xa8,0xc8,0xe8,0x09,0x29,0x49,0x69,0x89,0xa9,0xc9,0xe9,
0x0c,0x2c,0x4c,0x6c,0x8c,0xac,0xcc,0xec,0x0d,0x2d,0x4d,0x6d,0x8d,0xad,0xcd,0xed,

0x10,0x30,0x50,0x70,0x90,0xb0,0xd0,0xf0,0x11,0x31,0x51,0x71,0x91,0xb1,0xd1,0xf1,
0x14,0x34,0x54,0x74,0x94,0xb4,0xd4,0xf4,0x15,0x35,0x55,0x75,0x95,0xb5,0xd5,0xf5,
0x18,0x38,0x58,0x78,0x98,0xb8,0xd8,0xf8,0x19,0x39,0x59,0x79,0x99,0xb9,0xd9,0xf9,
0x1c,0x3c,0x5c,0x7c,0x9c,0xbc,0xdc,0xfc,0x1d,0x3d,0x5d,0x7d,0x9d,0xbd,0xdd,0xfd,

0x02,0x22,0x42,0x62,0x82,0xa2,0xc2,0xe2,0x03,0x23,0x43,0x63,0x83,0xa3,0xc3,0xe3,
0x06,0x26,0x46,0x66,0x86,0xa6,0xc6,0xe6,0x07,0x27,0x47,0x67,0x87,0xa7,0xc7,0xe7,
0x0a,0x2a,0x4a,0x6a,0x8a,0xaa,0xca,0xea,0x0b,0x2b,0x4b,0x6b,0x8b,0xab,0xcb,0xeb,
0x0e,0x2e,0x4e,0x6e,0x8e,0xae,0xce,0xee,0x0f,0x2f,0x4f,0x6f,0x8f,0xaf,0xcf,0xef,

0x12,0x32,0x52,0x72,0x92,0xb2,0xd2,0xf2,0x13,0x33,0x53,0x73,0x93,0xb3,0xd3,0xf3,
0x16,0x36,0x56,0x76,0x96,0xb6,0xd6,0xf6,0x17,0x37,0x57,0x77,0x97,0xb7,0xd7,0xf7,
0x1a,0x3a,0x5a,0x7a,0x9a,0xba,0xda,0xfa,0x1b,0x3b,0x5b,0x7b,0x9b,0xbb,0xdb,0xfb,
0x1e,0x3e,0x5e,0x7e,0x9e,0xbe,0xde,0xfe,0x1f,0x3f,0x5f,0x7f,0x9f,0xbf,0xdf,0xff,
`;	AREA.value=data;
//
cx0.useProgram(pg0);
function update(){
	var TILEDIM=8, MAPDIM=MDIM.value;
	cx0.uniform1i(pg0TILEDIM, TILEDIM);	cx0.uniform1i(pg0MAPDIM, MAPDIM);
	var map=textToArray(AREA.value);
	cx0.activeTexture(TXT00+0);{	// 地図データ
		cx0.uniform1i(pg0map, 0);
		cx0.texImage2D(TXT2D,0,FLUMI, MAPDIM,MAPDIM, 0,FLUMI,TYPUB, map);
	}
	cx0.activeTexture(TXT00+1);{	// タイル画像
		cx0.uniform1i(pg0tile, 1);
		cx0.texImage2D(TXT2D,0,FRGBA,FRGBA,TYPUB, OIMG);
	}
	draw();
	function textToArray(text){	return new Uint8Array(text.split(","));}
}
const draw=function(){
	cx0.clearColor(0,.3,0,1);	cx0.clear(COLOB);
	cx0.drawArrays(5, 0,3);
};
function setfTx(g, mode){g.texParameteri(TXT2D,MINFT,mode);g.texParameteri(TXT2D,MAGFT,mode);}
function setwTx(g, mode){g.texParameteri(TXT2D,WRAPS,mode);g.texParameteri(TXT2D,WRAPT,mode);}
CNVS.addEventListener("click", update);
var fr=new FileReader();
fr.addEventListener("load", function(ev){OIMG.src=ev.target.result});
FILE.addEventListener("change", function(ev){fr.readAsDataURL(ev.target.files[0])});
OIMG.addEventListener("load", update);
OIMG.src="./BlackShroudTile20171011.png";
</script>