Pixi.js: Render upside down using WebGL on Safari

Created on 12 Jan 2016 · 15Comments · Source: pixijs/pixi.js

Hi, here is the situation:

const filmObj = _getFilmObj() /* draw obj somewhere else */
const renderer_1 = PIXI.autoDetectRenderer(width, height)
renderer_1.render(filmObj)
const filmTexture = new PIXI.Texture(new PIXI.BaseTexture(renderer_1.view))
renderer_1.destroy()

const artboardObj = new PIXI.Sprite(filmTexture)
const renderer_2 = PIXI.autoDetectRenderer(width, height)
renderer_2.render(artboardObj)
const artboardTexture =new PIXI.Texture(new PIXI.BaseTexture(renderer_2.view))
renderer_2.destroy()

/* render artboardTexture somewhere else */

When test it on Safari (iOS / Mac OS X), renderer_2.view is fliped upside down against filmObj, while renderer_1.view is natural. It seems like renderer_2 rendering incorrect coordinate on renderer_1.view. Would you please check if anything worng?

Addtional Info:

On Chrome (desktop / mobile) everything is fine;
Using CanvasRenderer everything is fine too, even on Safari.

Source

holymonson

Most helpful comment

@redsend

Its not guaranteed that toDataURL and getImageData returns right stuff for WebGL, its not even in the standard. You have to use PIXI extract API:

//if you want canvas
var canvas =renderer.extract.canvas(stage);
//if you want base64
var base64=renderer.extract.base64(stage);

ivanpopelyshev on 24 Sep 2016

👍6 ❤3

All 15 comments

Tested in Safari / Firefox / Chrome and got below:
02 01 46

holymonson on 17 Jan 2016

weird! will make sure to take a look..

GoodBoyDigital on 4 Feb 2016

I seem to have a similar problem with canvas being flipped upside down on Safari whereas Chrome displays it correct.

Esshahn on 5 Feb 2016

Now I set baseTexture.flipY = true on Safari and use a dirty hack below to get over it.

diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js
index 05258f6..82b1c84 100644
--- a/src/core/renderers/webgl/WebGLRenderer.js
+++ b/src/core/renderers/webgl/WebGLRenderer.js
@@ -396,6 +396,9 @@ WebGLRenderer.prototype.updateTexture = function (texture)

     gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);

+    if (texture.flipY) {
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+    }
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);

holymonson on 5 Feb 2016

👍1

I have a similar problem where I add Sprites to a Sprites and then on the canvas call toDataURL(). The image returned is flipped vertically on newer safari, while older safari (7.1 tested) and other browsers seems to return a non flipped image. Any suggestions how to fix this?

@holymonson maybe worth testing on older safari to see if you have a similar behaviour?

vn222ay on 16 Feb 2016

Curious if anyone have found the source to this problem?

vn222ay on 26 Feb 2016

for the sake of not letting this thread die: I haven't found a solution to it and had to fall back to forced canvas rendering.

Esshahn on 26 Feb 2016

This might be related to WebGL context premultipliedAlpha; in my case, I can only reproduce the issue if premultipliedAlpha is false for the second renderer. Will need to pull out an isolated demo to verify.

jpweeks on 21 Jul 2016

I hate an idea of how could that happen, but i need to reproduce it first.

ivanpopelyshev on 21 Jul 2016

Here is a reproducible case; only affects images generated with toDataURL in Safari.
https://jsbin.com/qivife/14/edit?js,output

jpweeks on 22 Jul 2016

is there a way to export with toDataURL API the image not flipped?

redsend on 24 Sep 2016

@redsend

Its not guaranteed that toDataURL and getImageData returns right stuff for WebGL, its not even in the standard. You have to use PIXI extract API:

//if you want canvas
var canvas =renderer.extract.canvas(stage);
//if you want base64
var base64=renderer.extract.base64(stage);

ivanpopelyshev on 24 Sep 2016

👍6 ❤3

var base64=renderer.extract.base64(stage); and var canvas =renderer.extract.canvas(stage); fix the upside down issue But then the size of the canvas has changed, and background colors do not persist. Any suggestions