Webp loading

[fzuleta]

Hi,
 
loading webp using Phaser 2.3.0 doesnt work for me (except in Chrome), so I'm trying to figure out a workaround.
 
by using http://libwebpjs.appspot.com/v0.1.3/  Im basically doing this:

    var ba = game.cache.getBinary('webp_test');    var WebPImage = window.WEBP_decode(ba);    trace(WebPImage);         var bd2 = this.game.add.bitmapData(WebPImage.width, WebPImage.height);    bd2.data = WebPImage.data;     trace(bd2);    game.add.sprite(0,0, bd2);

on the two traces above Im getting

Decoded %s. Dimensions: 2048 x 1024(no alpha). Now saving...webp.js (line 1)ImageData { width=2048,  height=1024,  data=Uint8ClampedArray}webp.js (line 1)Object { game={...},  key="bc989398-4d18-4bff-ad72-91e6b10ff33a",  width=2048,  more...}webp.js (line 1)

which I thought looked ok. however, no image is shown when I add the sprite

 

 

this is how the WEBP_decode looks like :  which works, but only on RGB888 webp (no alpha)

window.WEBP_decode = function(data) {         ///libwebpjs 0.1.3 decoder code start ---------------------------------------------        var WebPImage = { width:{value:0},height:{value:0} };        var decoder = new WebPDecoder();//        data=convertBinaryToArray(data);//unkonvertierung in char        trace(data.length);        //Config, you can set all arguments or what you need, nothing no objeect        var config = decoder.WebPDecoderConfig;        var output_buffer = config.output;        var bitstream = config.input;        if (!decoder.WebPInitDecoderConfig(config)) {            alert("Library version mismatch!\n");            return -1;        }        config.options.no_fancy_upsampling = 0;        config.options.bypass_filtering = 0;        config.options.use_threads = 1;        config.options.use_cropping= 0;//        config.options.crop_left   = parseInt(cropDecoding_x.value);//        config.options.crop_top    = parseInt(cropDecoding_y.value);//        config.options.crop_width  = parseInt(cropDecoding_w.value);//        config.options.crop_height = parseInt(cropDecoding_h.value);        //config.options.use_scaling = 1;//not implement        //config.options.scaled_width  = 400;        //config.options.scaled_height = 400;        //todo: add stop_watch        var StatusCode = decoder.VP8StatusCode;        var status = decoder.WebPGetFeatures(data, data.length, bitstream);        if (status != StatusCode.VP8_STATUS_OK) {            trace('error decoding: ' + status);        }        var mode = decoder.WEBP_CSP_MODE;        //output_buffer.colorspace = bitstream.has_alpha.value ? MODE_BGRA : MODE_BGR;        //output_buffer.colorspace = bitstream.has_alpha.value ? MODE_RGBA : MODE_RGB;        output_buffer.colorspace = mode.MODE_RGBA;        status = decoder.WebPDecode(data, data.length, config);         var ok = (status == StatusCode.VP8_STATUS_OK);        if (!ok) {            trace("Decoding of %s failed.\n");            //fprintf(stderr, "Status: %d (%s)\n", status, kStatusMessages[status]);            return -1;        }        trace("Decoded %s. Dimensions: "+output_buffer.width+" x "+output_buffer.height+""+(bitstream.has_alpha.value ? " (with alpha)" : "(no alpha)")+". Now saving...\n");        var bitmap = output_buffer.u.RGBA.rgba;        ///libwebpjs 0.1.3 decoder code end ---------------------------------------------                if (bitmap) {            //Draw Image            var biHeight=output_buffer.height; var biWidth=output_buffer.width;            var canvas = document.createElement('canvas');            canvas.height=biHeight;            canvas.width=biWidth;                        var context = canvas.getContext('2d');            var output = context.createImageData(canvas.width, canvas.height);            var outputData = output.data;                        for (var h=0;h<biHeight;h++) {                          for (var w=0;w<biWidth;w++) {                    outputData[2+w*4+(biWidth*4)*h] = bitmap[2+w*4+(biWidth*4)*h];                    outputData[1+w*4+(biWidth*4)*h] = bitmap[1+w*4+(biWidth*4)*h];                    outputData[0+w*4+(biWidth*4)*h] = bitmap[0+w*4+(biWidth*4)*h];                    outputData[3+w*4+(biWidth*4)*h] = bitmap[3+w*4+(biWidth*4)*h];                    };                      }                        return output;            context.putImageData(output, 0, 0);             //document.body.appendChild(canvas); // to test it out, which works OK        }    } 

any ideas why the bitmapData doesnt work?

[rich]

I think it makes more sense to support this directly. If you want to put in a github issue feature request I can look at it next week (or a pull request would be awesome too )

[fzuleta]

Hi Rich, thanks    (I did manage to use webp but couldnt get alpha to decode   )

 

Actually I started exploring BPG ( http://bellard.org/bpg/ ) , and tuned out to be quite awesome, in my opinion overall better quality and faster than webp.

 

In case it helps someone:

 

1. Make bpgdec8a.js (or  bpgdec8.js) with at least 32MB (default is 16 but it wont be enough to uncompress 2K images).

 

2. Include in your html the bpgdec8a.js

 

3. 

//Create a BitmapDatavar tmpBitmapData = game.add.bitmapData(2048,2048);//Create a BPG Decodervar bpgImage = new BPGDecoder(tmpBitmapData.ctx);// Load up the BPGbpgImage.onload = function() {  tmpBitmapData.ctx.putImageData(this.imageData, 0, 0); }; bpgImage.load("image.bpg");

4. use it, to create an atlas or use the texture directly  (make sure the onload function of the bpgImage has already been called)

    // Create ATLAS (if making a sprite it does work supplying tmpBitmapData directly as texture)    game.cache.addTextureAtlas( "ta_image", "",       tmpBitmapData.canvas,       aJSONYouPreviouslyLoaded,        Phaser.Loader.TEXTURE_ATLAS_JSON_HASH    );

Cheers!

[stupot]

Just had a poke around this webp format, there appears to be a later version with alpha support:

 

    http://libwebpjs.hohenlimburg.org/v0.2.0/

[threedollarbill]

Hey I am trying to get WebP to work on my game and i stumbled upon this thread. How can implement the WebP solution here?

I tried copying the code but its only one line and its hard to tell which lines should be commented out, and which should be left uncommented.

In any case, I would really like to find a way to get WebP to work on my game, as we want it to work with browsers that don't support WebP.

I would be grateful to anyone here who can enlighten me on how to do this.