Jump to content

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


Recommended Posts

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.

Link to comment
Share on other sites

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?




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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites




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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...