Comments on: WebGL Tutorial: Optimizing Data Transfer for WebGL Applications https://viscomp.alexandra.dk/?p=1386 Computer Graphics, Computer Vision and High Performance Computing Fri, 08 Feb 2013 00:43:16 +0000 hourly 1 https://wordpress.org/?v=5.8.2 By: Christian Jensen https://viscomp.alexandra.dk/?p=1386#comment-285 Fri, 08 Feb 2013 00:43:16 +0000 http://viscomp.alexandra.dk/?p=1386#comment-285 Looking at how you pack the data into the png I believe you can get much better compression if you pack the data in a manner that groups similar data in the same area in the image so the PNG filters can reduce the data as much as possible before compressing. See : http://www.w3.org/TR/PNG/#9Filters

I would probably try greyscale encoding so each pixel corresponded to one value and I’d try grouping as type of value on it’s own line.
In your case you have 7 different value for each point so the data for one point could be stored in pixels 0,0 through 0,6

Like so :
0123456789..
0123456789..
0123456789..
0123456789..
0123456789..
0123456789..
0123456789..
.. where each number is a point and each row is a value.

So width * height becomes pointnumber * value

That only uses 7 pixels of the PNG height so to make it possible to do larger datasets without hitting the PNG limit of 4 bytes width * 4 bytes height you could either just continue the same pattern but with more rows, or you could group the data even more so instead having the next value in the point come at (rownumber + 1) it could come at (rownumber + (maxheight/7))

If you’re really feeling ambitious you could even try performing a FFT on the image and then do an inverse FFT clientside in javascript, but just like with LZMA compression this may or may not turn out to take longer time decoding than it gains through more efficient compression.

]]>
By: Christian Jensen https://viscomp.alexandra.dk/?p=1386#comment-284 Thu, 07 Feb 2013 22:55:09 +0000 http://viscomp.alexandra.dk/?p=1386#comment-284 You can improve on this even further by using better compression.

I used ScriptPNG to optimize KommuneDataVBO.png to only 739 kb.
I also used ScriptGZ to reduce KommuneDataVBO.bin to 743 kb.
You can find both on http://css-ig.net/
The website is in french (I used Google Translate to help me there) but the tools are not.
I suggest reading the article on pre-compressing files with Gzip http://css-ig.net/articles/pre-compression-gzip , because it not only provides a link to ScriptGzip but also explains how to avoid having the server compress the files, which makes the server load the file faster and use less cpu.

You could also look into compressing the files with something much more efficient like LZMA (KommuneDataVBO.bin only took up 455kb LZMA compressed) and use a javascript decompressor. There are some available online – the trick is finding one that is both fast and small as you don’t want the client spending more time loading the extra javascript and decompressing, than is actually saved by doing this.

]]>
By: tamat https://viscomp.alexandra.dk/?p=1386#comment-283 Tue, 27 Nov 2012 09:16:22 +0000 http://viscomp.alexandra.dk/?p=1386#comment-283 Nice post, although I would discourage the use of localStorage because it slows down the startup of the website (localStorage data is stored in a text file that is loaded synchronously when the user loads a website).

]]>