- Added benchmark comparing JPEG, PNG, WEBP, DDS DXT1, and CRN DXT1 formats.

- Pixi Canvas and WebGL render was added for quick benchmarking but it's going away soon, because WebGL is even slower than Canvas for big textures. The browsers nowadays use OpenGL in the backend for rendering Canvas.
- There is 3 different WebGL Renders but they need adjusting so they work with Non Power Of Two textures.
- For now the winner is JPEG+Canvas, however CRN+WebGL will be better almost for sure if server side supports it.

res/app/components/stf/screen/fast-image-render/test/index.html

@@ -21,7 +21,8 @@
 <!--<canvas width="642px" height="1146px"></canvas>-->
 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/pixi.js/1.5.1/pixi.dev.js"></script>
+<script src="../webgl-texture-utils/build/texture-util.js"></script>
 <script src="../index.js"></script>
 <script src="performance_test.js"></script>
 </body>
-</html>
+</html>

res/app/components/stf/screen/fast-image-render/test/performance_test.js

@@ -3,13 +3,11 @@ var frameNumberElement = document.querySelector('#frame-number')
 var totalTimeElement = document.querySelector('#total-time')
 
 var frame = {
-  total: 5000,
+  total: 50,
   current: 0
 }
 
-var imageLoader = new FastImageLoader()
-
-var imageRender = new FastImageRender(canvasElement, {render: 'canvas'})
+var imageRender = new FastImageRender(canvasElement, {render: 'canvas', textureLoader: false})
 
 function loadNext() {
   console.time('load')
@@ -17,14 +15,15 @@ function loadNext() {
 //  var height = 300
   //  loader.src = 'http://placehold.it/' + width + 'x' + height + '?' + Date.now()
   //  loader.src = 'http://lorempixel.com/' + width + '/' + height + '/abstract/Frame-' + frames.current + '/?' + Date.now()
-  imageLoader.load('screen.jpg?' + Date.now())
+  imageRender.load('images/screen.webp?' + Date.now())
+//  imageRender.load('images/screen.jpg')
 }
 
 var startTime = new Date().getTime()
 
 loadNext()
 
-imageLoader.onLoad = function (image) {
+imageRender.onLoad = function (image) {
   console.timeEnd('load')
   console.time('draw')
   imageRender.draw(image)

res/app/components/stf/screen/fast-image-render/test/results.md

@@ -0,0 +1,103 @@
+# Benchmark results (internal data)
+
+-----
+
+### Versions
+- Canary 35
+- Safari 7
+- Firefox 27
+
+
+### Time to load and draw 5000 frames
+
+Hardware | Browser | Render | Time | ms
+-------- | ------- | ------ | ---- | --
+iMac | Canary | pixi-canvas | 54s | 
+iMac | Canary | pixi-webgl | 58s | 
+iMac | Canary | canvas | 54s | 5.8ms
+iMac | Firefox | pixi-canvas | 75s | 8.3ms
+iMac | Firefox | pixi-webgl | 82s | 11.3ms
+iMac | Firefox | canvas | 76s | 8.1ms
+MacBook | Canary | pixi-canvas | 68s
+MacBook | Canary | pixi-webgl | 83s
+MacBook | Canary | canvas | 76s
+
+
+### Time to just draw 5000 frames
+
+Hardware | Browser | Format | Render | Time | ms
+-------- | ------- | ------ | ------ | ---- | --
+iMac | Canary | DDS DXT1 | webgl | 55s | 
+
+
+### Time to render 1 frame
+Hardware | Browser | Format | Size | Function | ms
+-------- | ------- | ------ | ---- | -------- | --
+iMac | Canary | DDS DXT1 | 2.1MB | load | 20-100ms
+iMac | Canary | DDS DXT1 | 2.1MB | draw | **0.04ms**
+iMac | Canary | DDS GZIP | 271KB | load | 
+iMac | Canary | DDS GZIP | 271KB | draw | 
+iMac | Canary | WEBP     |  70KB | load | 9ms
+iMac | Canary | WEBP     |  70KB | draw | 24ms
+iMac | Canary | DDS CRN  | 70KB  | load | 30ms
+iMac | Canary | DDS CRN  | 70KB  | draw | **0.04ms**
+iMac | Canary | JPEG     | 94KB  | load | 25ms
+iMac | Canary | JPEG     | 94KB  | draw | 6ms
+iMac | Canary | PNG      | 590KB | load | 6ms
+iMac | Canary | PNG      | 590KB | draw | 30ms
+
+
+# About ST3C DXT1 DDS CRN
+
+### ST3C (S3 Texture Compression) 
+Group of related lossy texture compression algorithms, supported by most GPUs in Mac/PCs 
+
+### DXT1 (Block Compression 1)
+Smallest ST3C algorithm, 1-bit Alpha, compression ratio 6:1
+
+### DDS (DirectDraw Surface)
+Container file format for storing ST3C textures
+
+### CRN (DXTn Real-time Transcoding)
+Container file format for transcoding crunched ST3C textures
+
+
+
+# DDS vs JPEG
+
+- Drawing a DXT1 texture is over 100 times faster than JPEG
+- The DXT1 texture is transferred directly to the GPU, unlike JPEG
+- The DXT1 uses 6 times less GPU memory
+- File size is big, but when gzipped it's smaller than PNG
+
+# CRN vs JPEG
+- It transcodes to DXT1 so has all DXT1 benefits
+- File size is very small, even smaller than JPEG (!)
+- Requires to transcode on client side, so there is a CPU penalty
+- However transcoding CRN->DXT1 is faster than decoding and tranfering JPEG->GPU
+- JPEG->GPU texture uploading blocks the main thread and is slow
+- Transcoding a CRN can be done async, and even offloaded to a WebWorker
+- Currently the Crunch library is compiled to JS with Emscripten, so enabling asm.js would make the transcoding even faster
+- Compressing CRN vs libjpeg-turbo benchmarks still need to be done
+
+# Links
+
+
+ECT1 texture format works on all Android devices
+http://developer.android.com/tools/help/etc1tool.html
+
+WebGL also
+http://blog.tojicode.com/2011/12/compressed-textures-in-webgl.html
+
+Crunch
+https://code.google.com/p/crunch/
+
+Fast compression
+http://www.fastcompression.com/
+
+DXT1 crunch WebGL
+http://www-cs-students.stanford.edu/~eparker/files/crunch/decode_test.html
+
+WebGL Texture Utils
+https://github.com/gunta/webgl-texture-utils#webgl-texture-utils
+