Pixi.js: Rendu à l'envers à l'aide de WebGL sur Safari

Créé le 12 janv. 2016 · 15Commentaires · Source: pixijs/pixi.js

Bonjour, voici la situation :

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

Lorsque vous le testez sur Safari (iOS / Mac OS X), renderer_2.view est renversé contre filmObj , tandis que renderer_1.view est naturel. Il semble que renderer_2 rende des coordonnées incorrectes sur renderer_1.view . Pourriez-vous s'il vous plaît vérifier si quelque chose est usé ?

Informations supplémentaires :

Sur Chrome (desktop/mobile) tout va bien ;
En utilisant CanvasRenderer tout va bien aussi, même sur Safari.

Source

holymonson

Commentaire le plus utile

@redsend

Il n'est pas garanti que toDataURL et getImageData renvoient les bons éléments pour WebGL, ce n'est même pas dans la norme. Vous devez utiliser l'API d'extraction PIXI :

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

ivanpopelyshev le 24 sept. 2016

👍6 ❤3

Tous les 15 commentaires

Testé dans Safari / Firefox / Chrome et obtenu ci-dessous :
02 01 46

holymonson le 17 janv. 2016

bizarre! ne manquera pas de jeter un coup d'œil..

GoodBoyDigital le 4 févr. 2016

Il me semble avoir un problème similaire avec le renversement de la toile sur Safari alors que Chrome l'affiche correctement.

Esshahn le 5 févr. 2016

Maintenant, j'ai défini baseTexture.flipY = true sur Safari et j'utilise un hack sale ci-dessous pour le surmonter.

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 le 5 févr. 2016

👍1

J'ai un problème similaire où j'ajoute des Sprites à un Sprites, puis sur l'appel de canevas àDataURL(). L'image renvoyée est retournée verticalement sur le nouveau safari, tandis que l'ancien safari (7.1 testé) et d'autres navigateurs semblent retourner une image non retournée. Des suggestions pour résoudre ce problème ?

@holymonson vaut peut-être la peine d'être testé sur un safari plus ancien pour voir si vous avez un comportement similaire ?

vn222ay le 16 févr. 2016

Curieux de savoir si quelqu'un a trouvé la source de ce problème ?

vn222ay le 26 févr. 2016

pour ne pas laisser mourir ce fil: je n'ai pas trouvé de solution et j'ai dû me rabattre sur le rendu de toile forcé.

Esshahn le 26 févr. 2016

Cela peut être lié au contexte WebGL premultipliedAlpha ; dans mon cas, je ne peux reproduire le problème que si premultipliedAlpha est false pour le deuxième moteur de rendu. Aura besoin de sortir une démo isolée pour vérifier.

jpweeks le 21 juil. 2016

Je déteste l'idée de comment cela pourrait arriver, mais je dois d'abord la reproduire.

ivanpopelyshev le 21 juil. 2016

Voici un cas reproductible ; affecte uniquement les images générées avec toDataURL dans Safari.
https://jsbin.com/qivife/14/edit?js , sortie

jpweeks le 22 juil. 2016

existe-t-il un moyen d'exporter avec l'API toDataURL l'image non retournée ?

redsend le 24 sept. 2016

@redsend

Il n'est pas garanti que toDataURL et getImageData renvoient les bons éléments pour WebGL, ce n'est même pas dans la norme. Vous devez utiliser l'API d'extraction PIXI :

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

ivanpopelyshev le 24 sept. 2016

👍6 ❤3

var base64=renderer.extract.base64(stage); et var canvas =renderer.extract.canvas(stage); résoudre le problème à l'envers Mais la taille de la toile a changé et les couleurs d'arrière-plan ne persistent pas. Aucune suggestion

msrobot0 le 12 juin 2017

J'utilise PIXI.RenderTexture qui résout le problème de taille d'image, mais la couleur d'arrière-plan ne colle toujours pas

msrobot0 le 12 juin 2017

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.