In Cocoon: PIXIv3 autoDetectRenderer return canvas, and WebGLRenderer don't display sprites

[JulienB]

Hello everybody,

 

I transfered my project in PIXIv3 and when I lauch it in cocoonjs, I saw the fps very poor.

I didn't understand the why of the how until I realize that cocoon was in canvas mode.

 

So, if I do (in cocoonjs):

var renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height);	

renderer returns canvas. Canvas works, but the FPS is not the best.

 

else, if I do:

var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height)

renderer return webgl. OK, the FPS is max, BUT, cocoonjs don't display sprites. It display graphics, background color, but no sprite.

 

 

It's annoying because v2 (v 2.7 i believe my last version) worked perfectly: autoDetect returned webgl, FPS max and sprites were displayed.

 

It is normal, it isn't? I stress google since long hours and i don't have any key about this (stencil?, I don't know what is, and I don't understand why v2 worked and why v3 not).

I stess me too, because I don't know how many tests I did in my device but the result is the same, with cocoonjs, PIXI the third (3.0.6) is not a webgl warmachine.

[xerver]

The stencil buffer is used to draw Graphics objects in WebGL, autoDetect renderer tries to create a webgl renderer and if it fails falls back to canvas.

 

Here is how we check for webgl support on a device: https://github.com/GoodBoyDigital/pixi.js/blob/master/src/core/utils/index.js#L205-L224

[JulienB]

Hello Xerver!

 

I use PIXI and cocoon for a long time to know autoDetectRenderer create canvas on a non-webgl device.

 

It's not my question.

 

My question is:

Why autoDetectRenderer PIXI v2 (and v1) create a webgl renderer on cocoonjs on my device and why autoDetectRenderer PIXI v3 create a canvas on the SAME cocoonjs and on the SAME device.

Why PIXI v2 display sprite on a webgl renderer and why PIXIv3 don't display sprites on a webgl renderer of the same cocoon of the same device?

 

or

 

Is this behaviour normal, or is it an error from me?

 

 

---

 

if I substitute this in V3 (3.0.6):

 autoDetectRenderer: function (width, height, options, noWebGL)    {        width = width || 800;        height = height || 600;        if (!noWebGL && core.utils.isWebGLSupported())        {            return new core.WebGLRenderer(width, height, options);        }        return new core.CanvasRenderer(width, height, options);    }

by this from V1.5:

	 autoDetectRenderer : function(width, height, view,antialias,transparent){    if(!width)width = 800;    if(!height)height = 600;    // BORROWED from Mr Doob (mrdoob.com)    var webgl = ( function () { try {                                    var canvas = document.createElement( 'canvas' );                                    return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );                                } catch( e ) {                                    return false;                                }                            } )();    if( webgl )    {        return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);    }    return  new PIXI.CanvasRenderer(width, height, view, transparent);}

(I kill "core" if I can say that)

... the autoDetectRenderer gives me well a webgl!

 

but this webgl doesn't display sprites...

but the autoDetectRenderer works!

but this don't display sprites...

[xerver]

Look at the link I sent you, we detect stencil buffer support when checking for webgl, this didn't happen in the past. Compare your webgl check with the one I linked you.

 

As for why sprites don't display, there is no way to know without seeing a running example that reproduces the behavior. LIkely it has to do with how you load the textures, but I have no way to know.

[JulienB]

Ok, I see the difference between the past and the present. 

 

So I do this:

    isWebGLSupported: function ()    {        var contextOptions = {stencil: true};        try        {            if (!window.WebGLRenderingContext)            {                return false;            }            var canvas = document.createElement('canvas'),                gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions);        		   return !!(gl /*&& gl.getContextAttributes().stencil*/);        }        catch (e)        {            return false;        }    },

and this in my only file //cocoonjs console:

(function(){var canvas = document.createElement('canvas');     var contextOptions = {stencil: true};gl = canvas.getContext('webgl',contextOptions) || canvas.getContext('experimental-webgl',contextOptions);console.log('Is webgl?:',gl.getContextAttributes,gl.getContextAttributes()) //function(){[native code]} , undefinedconsole.log('alpha:',gl.getContextAttributes.alpha)//undefinedconsole.log('depth:',gl.getContextAttributes.depth)//undefinedconsole.log('stencil:',gl.getContextAttributes.stencil)//undefined//console.log('stencil:',gl.getContextAttributes().stencil) //typeError, all is overconsole.log('antialias:',gl.getContextAttributes.antialias)//undefinedconsole.log('premultipliedAlpha:',gl.getContextAttributes.premultipliedAlpha)//undefinedconsole.log('preserveDrawingBuffer:',gl.getContextAttributes.preserveDrawingBuffer)//undefinedcanvas.width = window.innerWidth;canvas.height = window.innerHeight; //var renderer = new PIXI.CanvasRenderer(canvas.width, canvas.height); // here I see all want to see: Sprites and Graphics but a variable 20-30 FPSvar renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height); //gives me a "perfect" webgl 62 constant FPSrenderer.backgroundColor = 0xBAC16D; //Here I see a marvellous golden screenvar stage = new PIXI.Container();//var stage = new PIXI.Stage(0xBAC16D);document.body.appendChild(/*canvas*/renderer.view);PIXI.loader.add('menu','menu.json').on('complete', start).load();function start() {var sprite = new PIXI.Sprite.fromFrame("Retour.png");sprite.position.x = 300;sprite.position.y = 300;stage.addChild(sprite);//nothing displaysprite = new PIXI.Sprite.fromImage("img.jpg");sprite.position.x = 200;sprite.position.y = 100;stage.addChild(sprite);//nothing displayvar g = new PIXI.Graphics();g.beginFill(0xffffff);g.drawRect(50, 50, 200, 30);stage.addChild(g);//I see a wonderfull white rectangle!.}var mainLoop = function(){requestAnimationFrame(mainLoop);renderer.render(stage);};requestAnimationFrame(mainLoop);})();

 

Ok, with v3, it's a cocoon problem...

 

I don't understand because if stencil is do for draw graphics, why the only thing I see is graphics while getContextAttributes.stencil is undefined?

 

I going to try to getAround this.

[xerver]

http://support.ludei.com/hc/communities/public/questions/202919695-Bug-report-gl-getContextAttributes-returns-undefined-

https://github.com/GoodBoyDigital/pixi.js/issues/1555

 

Forgot about this, but now I remember that cocoonjs actually has a broken implementation of getContextAttributes (which is why auto-detect fails). So you will have to manually create the webgl renderer if you want to use it. As a side note, you shouldn't use "new" with "autoDetectRenderer", it is just a function not a constructor.

 

Thanks for the code, that helps. But without seeing a running example that includes your menu.json and the sprites and all that there is no way to really say what is happening

 

Try setting up a place that reproduces the issue on jsfiddle or codepen.

[JulienB]

Yes, for the "new", I've so much destroy my test code I believe ctrl-c-v got me.

 

I didn't notice this bug report from Ludei though I destroyed Google too, so thank you.

 

I don't manage to do a jsfiddle: I don't know how to load img, I don't manage load .json, I don't manage put the pixiv3 without the gl.getContextAttributes().stencil, I have tried with dropbox, onedrive, gdrive and I don't know what else...

It want https, not http, it want this or that or that or this, I do not usually to do this and I'm fed up.

 

 

By the way, the problem is in cocoonjs...

 

 

And what, it's just a vulgar json:

{"frames": {	"img.jpg": {		"frame": {"x":0, "y":57, "w":32, "h":32},		"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},		"sourceSize": {"w":32,"h":32}	},	"Retour.png": {		"frame": {"x":0, "y":0, "w":196, "h":56},		"spriteSourceSize": {"x":3,"y":0,"w":199,"h":56},		"sourceSize": {"w":199,"h":56}	}},"meta": {	"image": "menu.png",	"size": {"w": 197, "h": 90},	"scale": "1"}}

a vulgar png and a vulgar jpg. There isn't something of special here. I load with loader, I do sprites with Sprite...

All is well loaded.

 

You can't reproduce this in a desktop. And all this code works with anything else than v3 on cocoonjs.

 

If you got cocconjs and you say to me yes, with v3, I can display sprites on a webgl, please give me your code.

 

Is It just cocoonjs or worst,is it just MY cocoon or my code, and what do I wrong?