Pixi.js: 在 Safari 上使用 WebGL 进行颠倒渲染

创建于 2016-01-12 · 15评论 · 资料来源: pixijs/pixi.js

你好，情况是这样的：

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 */

在 Safari (iOS / Mac OS X) 上测试时， renderer_2.view与filmObj颠倒，而renderer_1.view是自然的。似乎renderer_2在renderer_1.view上呈现不正确的坐标。你能检查一下是否有任何磨损吗？

附加信息：

在 Chrome（桌面/移动）上一切正常；
使用CanvasRenderer一切都很好，即使在 Safari 上也是如此。

资料来源

holymonson

最有用的评论

@redsend

它不能保证 toDataURL 和 getImageData 为 WebGL 返回正确的东西，它甚至不在标准中。您必须使用 PIXI 提取 API：

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

ivanpopelyshev 于 2016-09-24

👍6 ❤3

所有15条评论

在 Safari / Firefox / Chrome 中测试并得到以下结果：
02 01 46

holymonson 于 2016-01-17

奇怪的！一定会去看一看..

GoodBoyDigital 于 2016-02-04

我似乎有一个类似的问题，画布在 Safari 上被颠倒了，而 Chrome 显示它是正确的。

Esshahn 于 2016-02-05

现在我在 Safari 上设置baseTexture.flipY = true并使用下面的肮脏黑客来克服它。

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 于 2016-02-05

👍1

我有一个类似的问题，我将精灵添加到精灵然后在画布上调用 toDataURL()。返回的图像在较新的 safari 上垂直翻转，而较旧的 safari（7.1 测试）和其他浏览器似乎返回非翻转图像。任何建议如何解决这个问题？

@holymonson也许值得在较旧的 safari 上进行测试，看看您是否有类似的行为？

vn222ay 于 2016-02-16

想知道是否有人找到了这个问题的根源？

vn222ay 于 2016-02-26

为了不让这个线程消亡：我还没有找到解决方案，不得不退回到强制画布渲染。

Esshahn 于 2016-02-26

这可能与 WebGL 上下文premultipliedAlpha ；就我而言，如果premultipliedAlpha是第二个渲染器的false ，我只能重现该问题。需要拿出一个单独的演示来验证。

jpweeks 于 2016-07-21

我讨厌这怎么可能发生的想法，但我需要先重现它。

ivanpopelyshev 于 2016-07-21

这是一个可重现的案例；仅影响在 Safari 中使用toDataURL生成的图像。
https://jsbin.com/qivife/14/edit?js ,输出

jpweeks 于 2016-07-22

有没有办法使用 toDataURL API 导出未翻转的图像？

redsend 于 2016-09-24

@redsend

它不能保证 toDataURL 和 getImageData 为 WebGL 返回正确的东西，它甚至不在标准中。您必须使用 PIXI 提取 API：

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

ivanpopelyshev 于 2016-09-24

👍6 ❤3

var base64=renderer.extract.base64(stage); 和 var canvas =renderer.extract.canvas(stage); 修复颠倒的问题但是随后画布的大小发生了变化，背景颜色不再存在。有什么建议

msrobot0 于 2017-06-12

我正在使用修复图像大小问题的 PIXI.RenderTexture，但背景颜色仍然不粘

msrobot0 于 2017-06-12

由于关闭后没有任何近期活动，因此该线程已自动锁定。请为相关错误打开一个新问题。

lock[bot] 于 2019-02-24

此页面是否有帮助？

0 / 5 - 0 等级

Pixi.js: 在 Safari 上使用 WebGL 进行颠倒渲染

最有用的评论

所有15条评论

相关问题