Pixi.js: Renderizar de cabeça para baixo usando WebGL no Safari

Criado em 12 jan. 2016 · 15Comentários · Fonte: pixijs/pixi.js

Olá, aqui está a situação:

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

Ao testar no Safari (iOS / Mac OS X), renderer_2.view é virado de cabeça para baixo contra filmObj , enquanto renderer_1.view é natural. Parece que renderer_2 renderizando coordenadas incorretas em renderer_1.view . Você poderia verificar se alguma coisa está desgastada?

Informações adicionais:

No Chrome (desktop / celular) está tudo bem;
Usando CanvasRenderer está tudo bem também, mesmo no Safari.

Fonte

holymonson

Comentários muito úteis

@redsend

Não é garantido que toDataURL e getImageData retornem coisas certas para WebGL, nem mesmo no padrão. Você deve usar a API de extração PIXI:

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

ivanpopelyshev em 24 set. 2016

👍6 ❤3

Todos 15 comentários

Testado no Safari / Firefox / Chrome e segue abaixo:
02 01 46

holymonson em 17 jan. 2016

estranhas! vai dar uma olhada ..

GoodBoyDigital em 4 fev. 2016

Parece que tenho um problema semelhante com a tela sendo virada de cabeça para baixo no Safari, enquanto o Chrome exibe corretamente.

Esshahn em 5 fev. 2016

Agora eu defino baseTexture.flipY = true no Safari e uso um truque sujo abaixo para superar isso.

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 em 5 fev. 2016

👍1

Eu tenho um problema semelhante onde adiciono Sprites a um Sprites e, em seguida, chamo toDataURL () na tela. A imagem retornada é invertida verticalmente no safari mais recente, enquanto o safari mais antigo (7.1 testado) e outros navegadores parecem retornar uma imagem não invertida. Alguma sugestão de como consertar isso?

@holymonson talvez valha a pena testar em safáris mais antigos para ver se você tem um comportamento semelhante?

vn222ay em 16 fev. 2016

Curioso para saber se alguém encontrou a origem deste problema?

vn222ay em 26 fev. 2016

para não deixar esse thread morrer: eu não encontrei uma solução para ele e tive que voltar para a renderização forçada da tela.

Esshahn em 26 fev. 2016

Isso pode estar relacionado ao contexto WebGL premultipliedAlpha ; no meu caso, só posso reproduzir o problema se premultipliedAlpha for false para o segundo renderizador. Será necessário retirar uma demonstração isolada para verificar.

jpweeks em 21 jul. 2016

Odeio a ideia de como isso pôde acontecer, mas primeiro preciso reproduzi-lo.

ivanpopelyshev em 21 jul. 2016

Aqui está um caso reproduzível; afeta apenas as imagens geradas com toDataURL no Safari.
https://jsbin.com/qivife/14/edit?js , saída

jpweeks em 22 jul. 2016

existe uma maneira de exportar com a API toDataURL a imagem não invertida?

redsend em 24 set. 2016

@redsend

Não é garantido que toDataURL e getImageData retornem coisas certas para WebGL, nem mesmo no padrão. Você deve usar a API de extração PIXI:

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

ivanpopelyshev em 24 set. 2016

👍6 ❤3

var base64 = renderer.extract.base64 (estágio); e var canvas = renderer.extract.canvas (stage); corrigir o problema de cabeça para baixo Mas então o tamanho da tela mudou e as cores de fundo não persistem. Alguma sugestão

msrobot0 em 12 jun. 2017

Estou usando PIXI.RenderTexture que corrige o problema de tamanho da imagem, mas a cor de fundo ainda não pega

msrobot0 em 12 jun. 2017

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.