Pixi.js: التقديم رأساً على عقب باستخدام WebGL في Safari

تم إنشاؤها على ١٢ يناير ٢٠١٦ · 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

التعليق الأكثر فائدة

تضمين التغريدة

ليس مضمونًا أن تقوم toDataURL و getImageData بإرجاع الأشياء الصحيحة لـ WebGL ، فهي ليست حتى في المعيار. يجب عليك استخدام PIXI extract API:

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

ivanpopelyshev في ٢٤ سبتمبر ٢٠١٦

👍6 ❤3

ال 15 كومينتر

تم اختباره في Safari / Firefox / Chrome وحصل على ما يلي:
02 01 46

holymonson في ١٧ يناير ٢٠١٦

عجيب! سوف نتأكد من إلقاء نظرة ..

GoodBoyDigital في ٤ فبراير ٢٠١٦

يبدو أن لدي مشكلة مماثلة في قلب اللوحة رأسًا على عقب في Safari بينما يعرضها Chrome بشكل صحيح.

Esshahn في ٥ فبراير ٢٠١٦

الآن قمت بتعيين baseTexture.flipY = true على Safari واستخدم الاختراق القذر أدناه للتغلب عليه.

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 في ٥ فبراير ٢٠١٦

👍1

لدي مشكلة مماثلة حيث أقوم بإضافة Sprites إلى Sprites ثم على لوحة الرسم إلى DataURL (). يتم قلب الصورة التي تم إرجاعها عموديًا في رحلات السفاري الأحدث ، بينما يبدو أن رحلات السفاري الأقدم (التي تم اختبارها 7.1) والمتصفحات الأخرى تقوم بإرجاع صورة غير مقلوبة. أي اقتراحات كيفية إصلاح هذا؟

holymonson ربما يستحق الاختبار في رحلات السفاري القديمة لمعرفة ما إذا كان لديك سلوك مماثل؟

vn222ay في ١٦ فبراير ٢٠١٦

هل تشعر بالفضول إذا وجد أي شخص مصدر هذه المشكلة؟

vn222ay في ٢٦ فبراير ٢٠١٦

من أجل عدم ترك هذا الخيط يموت: لم أجد حلاً له واضطررت إلى الرجوع إلى العرض القسري للقماش.

Esshahn في ٢٦ فبراير ٢٠١٦

قد يكون هذا متعلقًا بسياق WebGL premultipliedAlpha ؛ في حالتي ، لا يمكنني إعادة إظهار المشكلة إلا إذا كان premultipliedAlpha هو false للعارض الثاني. سوف تحتاج إلى سحب نسخة تجريبية معزولة للتحقق.

jpweeks في ٢١ يوليو ٢٠١٦

أنا أكره فكرة كيف يمكن أن يحدث ذلك ، لكني بحاجة إلى إعادة إنتاجه أولاً.

ivanpopelyshev في ٢١ يوليو ٢٠١٦

هذه حالة قابلة للاستنساخ ؛ يؤثر فقط على الصور التي تم إنشاؤها باستخدام toDataURL في Safari.
https://jsbin.com/qivife/14/edit؟js ، الإخراج

jpweeks في ٢٢ يوليو ٢٠١٦

هل هناك طريقة للتصدير باستخدام toDataURL API ، الصورة لم تنقلب؟

redsend في ٢٤ سبتمبر ٢٠١٦

تضمين التغريدة

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

ivanpopelyshev في ٢٤ سبتمبر ٢٠١٦

👍6 ❤3

var base64 = renderer.extract.base64 (مرحلة) ؛ و var canvas = renderer.extract.canvas (stage) ؛ إصلاح المشكلة المقلوبة ولكن بعد ذلك تغير حجم اللوحة القماشية ، ولا تستمر ألوان الخلفية. أي اقتراحات