Pixi.js: Safari पर WebGL का उपयोग करके उल्टा रेंडर करें

को निर्मित 12 जन॰ 2016 · 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 */

जब परीक्षण यह सफारी (आईओएस / मैक ओएस एक्स) पर, renderer_2.view उल्टा के खिलाफ नीचे fliped है filmObj , जबकि renderer_1.view स्वाभाविक है। ऐसा लगता है कि renderer_2 पर गलत निर्देशांक प्रस्तुत करना renderer_1.view । क्या आप कृपया जांचेंगे कि क्या कुछ खराब है?

अतिरिक्त जानकारी:

क्रोम (डेस्कटॉप/मोबाइल) पर सब कुछ ठीक है;
CanvasRenderer का उपयोग करना सफारी पर भी सब कुछ ठीक है।

स्रोत

holymonson

सबसे उपयोगी टिप्पणी

@redsend

इसकी गारंटी नहीं है कि toDataURL और getImageData WebGL के लिए सही सामग्री लौटाते हैं, यह मानक में भी नहीं है। आपको पिक्सी एक्सट्रैक्ट एपीआई का उपयोग करना होगा:

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

ivanpopelyshev 24 सित॰ 2016

👍6 ❤3

सभी 15 टिप्पणियाँ

सफारी/फ़ायरफ़ॉक्स/क्रोम में परीक्षण किया गया और नीचे मिला:
02 01 46

holymonson 17 जन॰ 2016

अजीब! एक नज़र डालना सुनिश्चित करेंगे ..

GoodBoyDigital 4 फ़र॰ 2016

मुझे लगता है कि सफारी पर कैनवास को उल्टा फ़्लिप करने के साथ एक ही समस्या है जबकि क्रोम इसे सही प्रदर्शित करता है।

Esshahn 5 फ़र॰ 2016

अब मैं सफारी पर 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 5 फ़र॰ 2016

👍1

मुझे एक समान समस्या है जहां मैं स्प्राइट्स को स्प्राइट्स में जोड़ता हूं और फिर कैनवास कॉल टूडाटायूआरएल() पर जोड़ता हूं। लौटाई गई छवि नई सफारी पर लंबवत रूप से फ़्लिप की जाती है, जबकि पुरानी सफारी (7.1 परीक्षण) और अन्य ब्राउज़र एक गैर फ़्लिप छवि लौटाते हैं। कोई सुझाव इसे कैसे ठीक करें?

@holymonson शायद पुरानी सफारी पर परीक्षण के लायक है यह देखने के लिए कि क्या आपके पास समान व्यवहार है?

vn222ay 16 फ़र॰ 2016

उत्सुक अगर किसी को इस समस्या का स्रोत मिल गया है?

vn222ay 26 फ़र॰ 2016

इस धागे को मरने नहीं देने के लिए: मुझे इसका कोई हल नहीं मिला और मुझे मजबूर कैनवास प्रतिपादन पर वापस जाना पड़ा।

Esshahn 26 फ़र॰ 2016

यह WebGL प्रसंग से संबंधित हो सकता है premultipliedAlpha ; मेरे मामले में, मैं केवल इस मुद्दे को पुन: उत्पन्न कर सकता हूं यदि premultipliedAlpha दूसरे रेंडरर के लिए false । सत्यापित करने के लिए एक पृथक डेमो निकालने की आवश्यकता होगी।

jpweeks 21 जुल॰ 2016

मुझे इस विचार से नफरत है कि यह कैसे हो सकता है, लेकिन मुझे इसे पहले पुन: पेश करने की आवश्यकता है।

ivanpopelyshev 21 जुल॰ 2016

यहाँ एक प्रतिलिपि प्रस्तुत करने योग्य मामला है; केवल सफारी में toDataURL से उत्पन्न छवियों को प्रभावित करता है।
https://jsbin.com/qivife/14/edit?js ,output

jpweeks 22 जुल॰ 2016

क्या छवि को फ़्लिप नहीं करने के लिए toDataURL API के साथ निर्यात करने का कोई तरीका है?

redsend 24 सित॰ 2016

@redsend

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

ivanpopelyshev 24 सित॰ 2016

👍6 ❤3

var base64=renderer.extract.base64(stage); और वर कैनवास =renderer.extract.canvas(stage); उल्टा समस्या को ठीक करें लेकिन फिर कैनवास का आकार बदल गया है, और पृष्ठभूमि का रंग बना नहीं रहता है। कोई सुझाव

msrobot0 12 जून 2017

मैं PIXI.RenderTexture का उपयोग कर रहा हूं जो छवि आकार की समस्या को ठीक करता है, लेकिन पृष्ठभूमि का रंग अभी भी चिपकता नहीं है

msrobot0 12 जून 2017

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।

lock[bot] 24 फ़र॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Pixi.js: Safari पर WebGL का उपयोग करके उल्टा रेंडर करें

सबसे उपयोगी टिप्पणी

सभी 15 टिप्पणियाँ

संबंधित मुद्दों