High res image issue with Galaxy Tab 4 and Google Chrome

[nikopi2]

Hi all,

i'm experiencing the following issue: i try to load a large image (its size is 5140x4188) and simply put it into the stage. After that i render the stage. What happens is the following:

- on ipad 2 with ios 8 the image is put into a canvas and it's displayed correctly

- on an android tablet (Samsung galaxy tab 4) running chrome 39.0.2171.59 the image isn't displayed and debbuging the code i get these errors: 

WebGL: INVALID_VALUE: texImage2D: width or height out of range

[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'

WebGL: too many errors, no more errors will be reported to the console for this context

 

Below there's my code:

var renderer = new PIXI.WebGLRenderer(5140, 4188);document.body.appendChild(renderer.view);var stage = new PIXI.Stage;var theTexure= PIXI.Texture.fromImage("image.png");var theSprite= new PIXI.Sprite(theTexure);theTexure.on("update",function(){		    	theSprite.position.x = 0;theSprite.position.y = 0;theSprite.scale.x = 1;theSprite.scale.y = 1;stage.addChild(theSprite);requestAnimationFrame(animate);	});function animate() {renderer.render(stage);requestAnimationFrame(animate);}

I'm using the pixi.js script from https://rawgithub.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js

 

Any suggestion?

 

Thank you all

 

[dirkk0]

Try to resize it to 4096x4096 (i.e. 2^12: 'It maybe non-power-of-2 '). 

[nikopi2]

Hi dirkk0, thanks for your help, i tried POT image but it doesn't solve my issue.

[dirkk0]

Then I guess you have to come up with some clever lazy loading algorithm. Maybe this library helps?
http://www.javascriptoo.com/Echo-js