Pixi.js: Renderice al revés usando WebGL en Safari

Creado en 12 ene. 2016 · 15Comentarios · Fuente: pixijs/pixi.js

Hola, aquí está la situación:

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

Cuando lo prueba en Safari (iOS / Mac OS X), renderer_2.view se invierte contra filmObj , mientras que renderer_1.view es natural. Parece que renderer_2 representa una coordenada incorrecta en renderer_1.view . ¿Podrías comprobar si algo funciona?

Información adicional:

En Chrome (escritorio / móvil) todo está bien;
Usando CanvasRenderer todo está bien también, incluso en Safari.

Fuente

holymonson

Comentario más útil

@redsend

No se garantiza que toDataURL y getImageData devuelvan las cosas correctas para WebGL, ni siquiera están en el estándar. Tienes que usar la API de extracción PIXI:

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

ivanpopelyshev en 24 sept. 2016

👍6 ❤3

Todos 15 comentarios

Probado en Safari / Firefox / Chrome y obtuve a continuación:
02 01 46

holymonson en 17 ene. 2016

¡extraño! se asegurará de echar un vistazo ...

GoodBoyDigital en 4 feb. 2016

Parece que tengo un problema similar con el lienzo al revés en Safari, mientras que Chrome lo muestra correctamente.

Esshahn en 5 feb. 2016

Ahora configuro baseTexture.flipY = true en Safari y uso un truco sucio a continuación para superarlo.

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 en 5 feb. 2016

👍1

Tengo un problema similar en el que agrego Sprites a Sprites y luego en el lienzo llamo a DataURL (). La imagen devuelta se voltea verticalmente en un safari más nuevo, mientras que el safari anterior (probado en 7.1) y otros navegadores parecen devolver una imagen no volteada. ¿Alguna sugerencia de cómo solucionar este problema?

@holymonson tal vez valga la pena probarlo en un safari anterior para ver si tiene un comportamiento similar.

vn222ay en 16 feb. 2016

¿Tiene curiosidad por saber si alguien ha encontrado la fuente de este problema?

vn222ay en 26 feb. 2016

por el bien de no dejar morir este hilo: no he encontrado una solución y tuve que recurrir a la representación forzada del lienzo.

Esshahn en 26 feb. 2016

Esto puede estar relacionado con el contexto WebGL premultipliedAlpha ; en mi caso, solo puedo reproducir el problema si premultipliedAlpha es false para el segundo renderizador. Necesitará sacar una demostración aislada para verificar.

jpweeks en 21 jul. 2016

Odio una idea de cómo pudo suceder eso, pero primero necesito reproducirla.

ivanpopelyshev en 21 jul. 2016

Aquí hay un caso reproducible; solo afecta a las imágenes generadas con toDataURL en Safari.
https://jsbin.com/qivife/14/edit?js , salida

jpweeks en 22 jul. 2016

¿Hay alguna manera de exportar con toDataURL API la imagen no volteada?

redsend en 24 sept. 2016

@redsend

No se garantiza que toDataURL y getImageData devuelvan las cosas correctas para WebGL, ni siquiera están en el estándar. Tienes que usar la API de extracción PIXI:

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

ivanpopelyshev en 24 sept. 2016

👍6 ❤3

var base64 = renderer.extract.base64 (escenario); y var canvas = renderer.extract.canvas (escenario); Solucione el problema al revés. Pero luego el tamaño del lienzo ha cambiado y los colores de fondo no persisten. Alguna sugerencia

msrobot0 en 12 jun. 2017

Estoy usando PIXI.RenderTexture que soluciona el problema del tamaño de la imagen, pero el color de fondo aún no se pega

msrobot0 en 12 jun. 2017

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para errores relacionados.