Pixi.js: Рендеринг в перевернутом виде с помощью WebGL в Safari

Созданный на 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 */

При тестировании в 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, даже не в стандарте. Вы должны использовать API извлечения PIXI:

//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 Комментарий

Протестировано в Safari / Firefox / Chrome и получено ниже:
02 01 46

holymonson 17 янв. 2016

странный! обязательно посмотрю ..

GoodBoyDigital 4 февр. 2016

Кажется, у меня аналогичная проблема с перевернутым холстом в Safari, тогда как Chrome отображает его правильно.

Esshahn 5 февр. 2016

Теперь я устанавливаю 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 5 февр. 2016

👍1

У меня аналогичная проблема, когда я добавляю спрайты в спрайты, а затем на холсте вызываю toDataURL (). Возвращенное изображение переворачивается по вертикали в более новом сафари, в то время как более старое сафари (проверено 7.1) и другие браузеры, похоже, возвращают неперевернутое изображение. Есть предложения, как это исправить?

@holymonson, возможно, стоит протестировать на старом сафари, чтобы узнать, есть ли у вас подобное поведение?

vn222ay 16 февр. 2016

Интересно, нашел ли кто-нибудь источник этой проблемы?

vn222ay 26 февр. 2016

чтобы не дать этому потоку умереть: я не нашел решения и вынужден был вернуться к принудительному рендерингу холста.

Esshahn 26 февр. 2016

Это может быть связано с контекстом WebGL premultipliedAlpha ; в моем случае я могу воспроизвести проблему только в том случае, если premultipliedAlpha равно false для второго средства визуализации. Для проверки нужно будет вытащить изолированную демонстрацию.

jpweeks 21 июл. 2016

Я ненавижу идею о том, как такое могло случиться, но сначала мне нужно воспроизвести ее.

ivanpopelyshev 21 июл. 2016

Вот воспроизводимый случай; влияет только на изображения, созданные с помощью toDataURL в Safari.
https://jsbin.com/qivife/14/edit?js , вывод

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 (этап); и var canvas = renderer.extract.canvas (stage); исправить проблему перевернутого изображения. Но затем размер холста изменился, и цвета фона не сохраняются. Какие-либо предложения

msrobot0 12 июн. 2017

Я использую PIXI.RenderTexture, который устраняет проблему с размером изображения, но цвет фона по-прежнему не прилипает

msrobot0 12 июн. 2017

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.