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日

Chromeで正しく表示されるのに対し、Safariでキャンバスが上下逆さまになるという同様の問題があるようです。

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（）を呼び出すという同様の問題があります。返される画像は新しいサファリでは垂直方向に反転しますが、古いサファリ（7.1テスト済み）や他のブラウザは反転していない画像を返すようです。これを修正する方法の提案はありますか？

@holymonsonは、古いサファリでテストして、同様の動作があるかどうかを確認する価値がありますか？

vn222ay 2016年02月16日

誰かがこの問題の原因を見つけたかどうか興味がありますか？

vn222ay 2016年02月26日

このスレッドを死なせないために：私はそれに対する解決策を見つけられず、強制的なキャンバスレンダリングにフォールバックしなければなりませんでした。

Esshahn 2016年02月26日

これは、WebGLコンテキストpremultipliedAlpha関連している可能性があります。私の場合、2番目のレンダラーのpremultipliedAlphaがfalseである場合にのみ、問題を再現できます。確認するには、分離されたデモを引き出す必要があります。

jpweeks 2016年07月21日

それがどのように起こるのかという考えは嫌いですが、最初にそれを再現する必要があります。

ivanpopelyshev 2016年07月21日

これが再現可能なケースです。 SafariでtoDataURLで生成された画像にのみ影響します。
https://jsbin.com/qivife/14/edit?js、output

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）; およびvarcanvas = 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件

関連する問題