It's worth pointing out that 172 KB/frame at 30 fps works out to a bit over 40 Mb/s. If you actually require that amount of bandwidth, a large segment of you potential user base will be totally unable to use your product.

I'd strongly encourage you to try to redesign this so the bandwidth requirements aren't quite so high.

It's worth pointing out that 172 KB/frame at 30 fps works out to a bit over 40 Mb/s. If you actually require that amount of bandwidth, a large segment of you potential user base will be totally unable to use your product.

I'd strongly encourage you to try to redesign this so the bandwidth requirements aren't quite so high.

How is it 40MB/s 30*172=5160KB/s

Your saying web can only handle 40 Mbits per second

What if I'm watching Youtube how does that still work and not go over 40Mb/s

How can i watch HD videos at 32bit at 90p60fps not 360p that's 80Mb/s?

It's worth pointing out that 172 KB/frame at 30 fps works out to a bit over 40 Mb/s. If you actually require that amount of bandwidth, a large segment of you potential user base will be totally unable to use your product.

I'd strongly encourage you to try to redesign this so the bandwidth requirements aren't quite so high.

How is it 40MB/s 30*172=5160KB/s

Your saying web can only handle 40 Mbits per second

What if I'm watching Youtube how does that still work and not go over 40Mb/s

How can i watch HD videos at 32bit at 90p60fps not 360p that's 80Mb/s?

KB is kilo bytes and kb is kilo bits. Most network connections are quoted in mbps not MBps.

so 172KB at 30 times a second = 30 * 172KB = 5160KB to convert to bits per second you * 8 = 41280Mbits/s

Youtube and also most video streams run compression that cuts down bandwidth requirements a lot but requires processing at either end for compression and decompression.

There is no real "max" speed for the net as long as you have the money but the fatter the pipe to your house the more you pay. Most copper connections like DSL would flood with the sort of data sizes you are talking about and your game would play like a constantly buffering video.

How is it 40MB/s 30*172=5160KB/s

He quoted 40Mb, not 40MB.
5160KB*1024*8/1000/1000 ~= 42.27Mb

What if I'm watching Youtube how does that still work and not go over 40Mb/s

They're compressed and use built-in video formats.

Can you tell us what the actual problem that you're trying to solve is? You need to stream image data from somewhere into WebGL?

I measured my speed as 40Mb/s but how can i watch 1080*1440 which is 368Gb/s it's compressed more than a zip file????

A zip file is lossless compression, that is, the thing you decompress is exactly identical to the input. This limits compression size. Also the zip protocol is quite old as far as compression goes, and there are many others that result in far better compression.

Web movies use lossy compression, that means when it is displayed on your screen it won't look identical to the input. There will be compression artifacts ranging from slight differences that require pixel-peeping to major differences like bands or blocks. Also newer protocols are being transitioned in and out, with Youtube gradually replacing its compression algorithms over time every few years.

Thanks to lossy encoding with aggressive compression, your high definition video can be compressed into a tiny bit stream. It will have tons of compression artifacts on your screen but as long as it keeps moving fast enough you generally won't notice or care about them. The video streams can be sent at single-digit megabit rates and visually still look good as they play.

But that doesn't really explain what you are trying to solve as your underlying issue. WebGL can handle drawing the screen, and assuming you're transferring only the data you need in a steady stream you shouldn't have problems with that part.

Repeating the question you've been asked several times but I don't see answered, what is the big thing you are trying to do? Your questions are about a solution you picked that isn't working out for you, so let's look at the real problem and find a better solution.

var canvas = document.getElementById('canvas');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var k = 0;
for (var h = 0; h < 6; h++) {
	for (var i = 0; i < 6; i++) {
		for (var j = 0; j < 6; j++) {
			ctx.fillStyle = 'rgb(' + Math.floor(255 - 51 * i) + ',' +
				Math.floor(255 - 51 * j) + ',' +
				Math.floor(255 - 51 * h) + ')';
			ctx.fillRect(k, 0, 1, 1);
			k++;
		}
	}
}
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(buf);

var fps = 30;
var now;
var then = Date.now();
var interval = 1000 / fps;
var delta;
var myMap = {};
var screen = new Array(737280);
insert('vvvvv', 215, 215);
screen[0] = 'vvvvv';
insert('vvvvu', 214, 214);
screen[1] = 'vvvvu';
insert('vvvvt', 213, 213);
screen[2] = 'vvvvt';
insert('vvvvs', 212, 212);
screen[3] = 'vvvvs';
insert('vvvvr', 211, 211);
screen[4] = 'vvvvr';
insert('vvvvq', 210, 210);
screen[5] = 'vvvvq';
insert('vvvvp', 209, 209);
screen[6] = 'vvvvp';
insert('vvvvo', 208, 208);
screen[7] = 'vvvvo';
insert('vvvvn', 207, 207);
screen[8] = 'vvvvn';
insert('vvvvm', 206, 206);
screen[9] = 'vvvvm';
insert('vvvvl', 205, 205);
screen[10] = 'vvvvl';
insert('vvvvk', 204, 204);
screen[11] = 'vvvvk';
insert('vvvvj', 203, 203);
screen[12] = 'vvvvj';
insert('vvvvi', 202, 202);
screen[13] = 'vvvvi';
insert('vvvvh', 201, 201);
screen[14] = 'vvvvh';
insert('vvvvg', 200, 200);
screen[15] = 'vvvvg';
insert('vvvvf', 199, 199);
screen[16] = 'vvvvf';
insert('vvvve', 198, 198);
screen[17] = 'vvvve';
insert('vvvvd', 197, 197);
screen[18] = 'vvvvd';
insert('vvvvc', 196, 196);
screen[19] = 'vvvvc';
insert('vvvvb', 195, 195);
screen[20] = 'vvvvb';
insert('vvvva', 194, 194);
screen[21] = 'vvvva';
insert('vvvuv', 193, 193);
screen[22] = 'vvvuv';
insert('vvvuu', 192, 192);
screen[23] = 'vvvuu';
insert('vvvut', 191, 191);
screen[24] = 'vvvut';
insert('vvvus', 190, 190);
screen[25] = 'vvvus';
insert('vvvur', 189, 189);
screen[26] = 'vvvur';
insert('vvvuq', 188, 188);
screen[27] = 'vvvuq';
insert('vvvup', 187, 187);
screen[28] = 'vvvup';
insert('vvvuo', 186, 186);
screen[29] = 'vvvuo';
insert('vvvun', 185, 185);
screen[30] = 'vvvun';
insert('vvvum', 184, 184);
screen[31] = 'vvvum';
insert('vvvul', 183, 183);
screen[32] = 'vvvul';
insert('vvvuk', 182, 182);
screen[33] = 'vvvuk';
insert('vvvuj', 181, 181);
screen[34] = 'vvvuj';
insert('vvvui', 180, 180);
screen[35] = 'vvvui';
insert('vvvuh', 179, 179);
screen[36] = 'vvvuh';
insert('vvvug', 178, 178);
screen[37] = 'vvvug';
insert('vvvuf', 177, 177);
screen[38] = 'vvvuf';
insert('vvvue', 176, 176);
screen[39] = 'vvvue';
insert('vvvud', 175, 175);
screen[40] = 'vvvud';
insert('vvvuc', 174, 174);
screen[41] = 'vvvuc';
insert('vvvub', 173, 173);
screen[42] = 'vvvub';
insert('vvvua', 172, 172);
screen[43] = 'vvvua';
insert('vvvtv', 171, 171);
screen[44] = 'vvvtv';
insert('vvvtu', 170, 170);
screen[45] = 'vvvtu';
insert('vvvtt', 169, 169);
screen[46] = 'vvvtt';
insert('vvvts', 168, 168);
screen[47] = 'vvvts';
insert('vvvtr', 167, 167);
screen[48] = 'vvvtr';
insert('vvvtq', 166, 166);
screen[49] = 'vvvtq';
insert('vvvtp', 165, 165);
screen[50] = 'vvvtp';
insert('vvvto', 164, 164);
screen[51] = 'vvvto';
insert('vvvtn', 163, 163);
screen[52] = 'vvvtn';
insert('vvvtm', 162, 162);
screen[53] = 'vvvtm';
insert('vvvtl', 161, 161);
screen[54] = 'vvvtl';
insert('vvvtk', 160, 160);
screen[55] = 'vvvtk';
insert('vvvtj', 159, 159);
screen[56] = 'vvvtj';
insert('vvvti', 158, 158);
screen[57] = 'vvvti';
insert('vvvth', 157, 157);
screen[58] = 'vvvth';
insert('vvvtg', 156, 156);
screen[59] = 'vvvtg';
insert('vvvtf', 155, 155);
screen[60] = 'vvvtf';
insert('vvvte', 154, 154);
screen[61] = 'vvvte';
insert('vvvtd', 153, 153);
screen[62] = 'vvvtd';
insert('vvvtc', 152, 152);
screen[63] = 'vvvtc';
insert('vvvtb', 151, 151);
screen[64] = 'vvvtb';
insert('vvvta', 150, 150);
screen[65] = 'vvvta';
insert('vvvsv', 149, 149);
screen[66] = 'vvvsv';
insert('vvvsu', 148, 148);
screen[67] = 'vvvsu';
insert('vvvst', 147, 147);
screen[68] = 'vvvst';
insert('vvvss', 146, 146);
screen[69] = 'vvvss';
insert('vvvsr', 145, 145);
screen[70] = 'vvvsr';
insert('vvvsq', 144, 144);
screen[71] = 'vvvsq';
insert('vvvsp', 143, 143);
screen[72] = 'vvvsp';
insert('vvvso', 142, 142);
screen[73] = 'vvvso';
insert('vvvsn', 141, 141);
screen[74] = 'vvvsn';
insert('vvvsm', 140, 140);
screen[75] = 'vvvsm';
insert('vvvsl', 139, 139);
screen[76] = 'vvvsl';
insert('vvvsk', 138, 138);
screen[77] = 'vvvsk';
insert('vvvsj', 137, 137);
screen[78] = 'vvvsj';
insert('vvvsi', 136, 136);
screen[79] = 'vvvsi';
insert('vvvsh', 135, 135);
screen[80] = 'vvvsh';
insert('vvvsg', 134, 134);
screen[81] = 'vvvsg';
insert('vvvsf', 133, 133);
screen[82] = 'vvvsf';
insert('vvvse', 132, 132);
screen[83] = 'vvvse';
insert('vvvsd', 131, 131);
screen[84] = 'vvvsd';
insert('vvvsc', 130, 130);
screen[85] = 'vvvsc';
insert('vvvsb', 129, 129);
screen[86] = 'vvvsb';
insert('vvvsa', 128, 128);
screen[87] = 'vvvsa';
insert('vvvrv', 127, 127);
screen[88] = 'vvvrv';
insert('vvvru', 126, 126);
screen[89] = 'vvvru';
insert('vvvrt', 125, 125);
screen[90] = 'vvvrt';
insert('vvvrs', 124, 124);
screen[91] = 'vvvrs';
insert('vvvrr', 123, 123);
screen[92] = 'vvvrr';
insert('vvvrq', 122, 122);
screen[93] = 'vvvrq';
insert('vvvrp', 121, 121);
screen[94] = 'vvvrp';
insert('vvvro', 120, 120);
screen[95] = 'vvvro';
insert('vvvrn', 119, 119);
screen[96] = 'vvvrn';
insert('vvvrm', 118, 118);
screen[97] = 'vvvrm';
insert('vvvrl', 117, 117);
screen[98] = 'vvvrl';
insert('vvvrk', 116, 116);
screen[99] = 'vvvrk';
insert('vvvrj', 115, 115);
screen[100] = 'vvvrj';
insert('vvvri', 114, 114);
screen[101] = 'vvvri';
insert('vvvrh', 113, 113);
screen[102] = 'vvvrh';
insert('vvvrg', 112, 112);
screen[103] = 'vvvrg';
insert('vvvrf', 111, 111);
screen[104] = 'vvvrf';
insert('vvvre', 110, 110);
screen[105] = 'vvvre';
insert('vvvrd', 109, 109);
screen[106] = 'vvvrd';
insert('vvvrc', 108, 108);
screen[107] = 'vvvrc';
insert('vvvrb', 107, 107);
screen[108] = 'vvvrb';
insert('vvvra', 106, 106);
screen[109] = 'vvvra';
insert('vvvqv', 105, 105);
screen[110] = 'vvvqv';
insert('vvvqu', 104, 104);
screen[111] = 'vvvqu';
insert('vvvqt', 103, 103);
screen[112] = 'vvvqt';
insert('vvvqs', 102, 102);
screen[113] = 'vvvqs';
insert('vvvqr', 101, 101);
screen[114] = 'vvvqr';
insert('vvvqq', 100, 100);
screen[115] = 'vvvqq';
insert('vvvqp', 99, 99);
screen[116] = 'vvvqp';
insert('vvvqo', 98, 98);
screen[117] = 'vvvqo';
insert('vvvqn', 97, 97);
screen[118] = 'vvvqn';
insert('vvvqm', 96, 96);
screen[119] = 'vvvqm';
insert('vvvql', 95, 95);
screen[120] = 'vvvql';
insert('vvvqk', 94, 94);
screen[121] = 'vvvqk';
insert('vvvqj', 93, 93);
screen[122] = 'vvvqj';
insert('vvvqi', 92, 92);
screen[123] = 'vvvqi';
insert('vvvqh', 91, 91);
screen[124] = 'vvvqh';
insert('vvvqg', 90, 90);
screen[125] = 'vvvqg';
insert('vvvqf', 89, 89);
screen[126] = 'vvvqf';
insert('vvvqe', 88, 88);
screen[127] = 'vvvqe';
insert('vvvqd', 87, 87);
screen[128] = 'vvvqd';
insert('vvvqc', 86, 86);
screen[129] = 'vvvqc';
insert('vvvqb', 85, 85);
screen[130] = 'vvvqb';
insert('vvvqa', 84, 84);
screen[131] = 'vvvqa';
insert('vvvpv', 83, 83);
screen[132] = 'vvvpv';
insert('vvvpu', 82, 82);
screen[133] = 'vvvpu';
insert('vvvpt', 81, 81);
screen[134] = 'vvvpt';
insert('vvvps', 80, 80);
screen[135] = 'vvvps';
insert('vvvpr', 79, 79);
screen[136] = 'vvvpr';
insert('vvvpq', 78, 78);
screen[137] = 'vvvpq';
insert('vvvpp', 77, 77);
screen[138] = 'vvvpp';
insert('vvvpo', 76, 76);
screen[139] = 'vvvpo';
insert('vvvpn', 75, 75);
screen[140] = 'vvvpn';
insert('vvvpm', 74, 74);
screen[141] = 'vvvpm';
insert('vvvpl', 73, 73);
screen[142] = 'vvvpl';
insert('vvvpk', 72, 72);
screen[143] = 'vvvpk';
insert('vvvpj', 71, 71);
screen[144] = 'vvvpj';
insert('vvvpi', 70, 70);
screen[145] = 'vvvpi';
insert('vvvph', 69, 69);
screen[146] = 'vvvph';
insert('vvvpg', 68, 68);
screen[147] = 'vvvpg';
insert('vvvpf', 67, 67);
screen[148] = 'vvvpf';
insert('vvvpe', 66, 66);
screen[149] = 'vvvpe';
insert('vvvpd', 65, 65);
screen[150] = 'vvvpd';
insert('vvvpc', 64, 64);
screen[151] = 'vvvpc';
insert('vvvpb', 63, 63);
screen[152] = 'vvvpb';
insert('vvvpa', 62, 62);
screen[153] = 'vvvpa';
insert('vvvov', 61, 61);
screen[154] = 'vvvov';
insert('vvvou', 60, 60);
screen[155] = 'vvvou';
insert('vvvot', 59, 59);
screen[156] = 'vvvot';
insert('vvvos', 58, 58);
screen[157] = 'vvvos';
insert('vvvor', 57, 57);
screen[158] = 'vvvor';
insert('vvvoq', 56, 56);
screen[159] = 'vvvoq';
insert('vvvop', 55, 55);
screen[160] = 'vvvop';
insert('vvvoo', 54, 54);
screen[161] = 'vvvoo';
insert('vvvon', 53, 53);
screen[162] = 'vvvon';
insert('vvvom', 52, 52);
screen[163] = 'vvvom';
insert('vvvol', 51, 51);
screen[164] = 'vvvol';
insert('vvvok', 50, 50);
screen[165] = 'vvvok';
insert('vvvoj', 49, 49);
screen[166] = 'vvvoj';
insert('vvvoi', 48, 48);
screen[167] = 'vvvoi';
insert('vvvoh', 47, 47);
screen[168] = 'vvvoh';
insert('vvvog', 46, 46);
screen[169] = 'vvvog';
insert('vvvof', 45, 45);
screen[170] = 'vvvof';
insert('vvvoe', 44, 44);
screen[171] = 'vvvoe';
insert('vvvod', 43, 43);
screen[172] = 'vvvod';
insert('vvvoc', 42, 42);
screen[173] = 'vvvoc';
insert('vvvob', 41, 41);
screen[174] = 'vvvob';
insert('vvvoa', 40, 40);
screen[175] = 'vvvoa';
insert('vvvnv', 39, 39);
screen[176] = 'vvvnv';
insert('vvvnu', 38, 38);
screen[177] = 'vvvnu';
insert('vvvnt', 37, 37);
screen[178] = 'vvvnt';
insert('vvvns', 36, 36);
screen[179] = 'vvvns';
insert('vvvnr', 35, 35);
screen[180] = 'vvvnr';
insert('vvvnq', 34, 34);
screen[181] = 'vvvnq';
insert('vvvnp', 33, 33);
screen[182] = 'vvvnp';
insert('vvvno', 32, 32);
screen[183] = 'vvvno';
insert('vvvnn', 31, 31);
screen[184] = 'vvvnn';
insert('vvvnm', 30, 30);
screen[185] = 'vvvnm';
insert('vvvnl', 29, 29);
screen[186] = 'vvvnl';
insert('vvvnk', 28, 28);
screen[187] = 'vvvnk';
insert('vvvnj', 27, 27);
screen[188] = 'vvvnj';
insert('vvvni', 26, 26);
screen[189] = 'vvvni';
insert('vvvnh', 25, 25);
screen[190] = 'vvvnh';
insert('vvvng', 24, 24);
screen[191] = 'vvvng';
insert('vvvnf', 23, 23);
screen[192] = 'vvvnf';
insert('vvvne', 22, 22);
screen[193] = 'vvvne';
insert('vvvnd', 21, 21);
screen[194] = 'vvvnd';
insert('vvvnc', 20, 20);
screen[195] = 'vvvnc';
insert('vvvnb', 19, 19);
screen[196] = 'vvvnb';
insert('vvvna', 18, 18);
screen[197] = 'vvvna';
insert('vvvmv', 17, 17);
screen[198] = 'vvvmv';
insert('vvvmu', 16, 16);
screen[199] = 'vvvmu';
insert('vvvmt', 15, 15);
screen[200] = 'vvvmt';
insert('vvvms', 14, 14);
screen[201] = 'vvvms';
insert('vvvmr', 13, 13);
screen[202] = 'vvvmr';
insert('vvvmq', 12, 12);
screen[203] = 'vvvmq';
insert('vvvmp', 11, 11);
screen[204] = 'vvvmp';
insert('vvvmo', 10, 10);
screen[205] = 'vvvmo';
insert('vvvmn', 9, 9);
screen[206] = 'vvvmn';
insert('vvvmm', 8, 8);
screen[207] = 'vvvmm';
insert('vvvml', 7, 7);
screen[208] = 'vvvml';
insert('vvvmk', 6, 6);
screen[209] = 'vvvmk';
insert('vvvmj', 5, 5);
screen[210] = 'vvvmj';
insert('vvvmi', 4, 4);
screen[211] = 'vvvmi';
insert('vvvmh', 3, 3);
screen[212] = 'vvvmh';
insert('vvvmg', 2, 2);
screen[213] = 'vvvmg';
insert('vvvmf', 1, 1);
screen[214] = 'vvvmf';
insert('vvvme', 0, 0);
screen[215] = 'vvvme';

function draw() {

	requestAnimationFrame(draw);

	now = Date.now();
	delta = now - then;

	if (delta > interval) {

		then = now - (delta % interval);

		for (var i = 0; i < canvasHeight * canvasWidth + canvasWidth; ++i) {
			var value = get(screen[i % 215], 215 - (i % 215));
			var r = imageData.data[4 * value];
			var g = imageData.data[4 * value + 1];
			var b = imageData.data[4 * value + 2];
			var a = imageData.data[4 * value + 3];
			//Little eddian
			data[i] = (a << 24) |
				(b << 16) |
				(g << 8) |
				r;
		}
		imageData.data.set(buf8);

		ctx.putImageData(imageData, 0, 0);
		imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
	}
}

draw();

function insert(k1, k2, v) {
	if (!(k1 in myMap)) { myMap[k1] = {}; }
	myMap[k1][k2] = v;
}

function get(k1, k2) {
	return myMap[k1] && myMap[k1][k2];
}

I got it working with this However it refuses to read from images only data from fill Rect how do i get it to read stored RGBA images

		for (var i = 0; i < 172000; ++i) {
			switch (i % 480) {
				case 240:
					count = count - 1918;
					break;
				case 0:
					count = count + 1918
					break;
			}

			var hold = 4 * i + count;
			var nn = (imageData.data[hold] >> 1) % 64;
			//cos(0)cos(0)=1)
			var mm = screen[i] * 8 + (imageData.data[hold + 1] >> 5);
			//Roughnees*Wr
			var hq = (imageData.data[hold + 1] % 18);
			var sq = 18 * (imageData.data[hold] % 2);
			var m = (RELUM[mm][nn] * 36 + hq + sq);
			//ading hue to luminance
			var value = (m % 216);
			//outpuutting color
			var r = imageData.data[4 * value];
			var g = imageData.data[4 * value + 1];
			var b = imageData.data[4 * value + 2];
			var a = imageData.data[4 * value + 3];
			//Little eddian
			data[i] = (a << 24) |
				(b << 16) |
				(g << 8) |
				r;
		}
		imageData.data.set(buf8);

		ctx.putImageData(imageData, 240, 0);

		imageData = ctx.getImageData(0, 0, 480, 360);
		}
	}
	draw();
}

Storing all the data in a map is going to be a speed problem, it is faster to use a simple array and index the values directly.

Storing your data as individual RGBA components then combining them to post at once is also a waste, as this is javascript there are no major processors out there that use anything else. You only need to consider endian values if you are saving or reading from a data stream that encodes it differently; endian-ness is only a concern of stream parsers and formatters.

I haven't looked to closely at what the transformation values are doing, but you may be able to take advantage of image filters in javascript or using one of the many transition operations rather than doing it yourself.

Storing all the data in a map is going to be a speed problem, it is faster to use a simple array and index the values directly.

Storing your data as individual RGBA components then combining them to post at once is also a waste, as this is javascript there are no major processors out there that use anything else. You only need to consider endian values if you are saving or reading from a data stream that encodes it differently; endian-ness is only a concern of stream parsers and formatters.

I haven't looked to closely at what the transformation values are doing, but you may be able to take advantage of image filters in javascript or using one of the many transition operations rather than doing it yourself.

"Wait, are you asking how to stream frame data? Using a text protocol like JSON is definitely not the way - use TypedArrays and Buffers to directly decode/copy image data."

I already went back to Arrays it was the first thing I tried though there was no problem with maps it worked the problem was always loading data like i said before the problem was loading the data from where. I have been trying sprites but the pixel manipulation code is looking for fill rect which ignores alpha and when reading from images ignores the sprite.