Render upside down using WebGL on Safari

[holymonson]

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:

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

[holymonson]

Tested in Safari / Firefox / Chrome and got below:

[GoodBoyDigital]

weird! will make sure to take a look..

[Esshahn]

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

[holymonson]

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);

[vn222ay]

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]

Curious if anyone have found the source to this problem?

[Esshahn]

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.

[jpweeks]

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.

[ivanpopelyshev]

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

[jpweeks]

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

[redsend]

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

[ivanpopelyshev]

@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);

[msrobot0]

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

[msrobot0]

I am using PIXI.RenderTexture which fixes the image size issue, but the background color still does not stick

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.