Pixi.js: Render terbalik menggunakan WebGL di Safari

Dibuat pada 12 Jan 2016 · 15Komentar · Sumber: pixijs/pixi.js

Hai, inilah situasinya:

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

Saat mengujinya di Safari (iOS / Mac OS X), renderer_2.view terbalik terhadap filmObj , sedangkan renderer_1.view adalah alami. Sepertinya renderer_2 merender koordinat yang salah pada renderer_1.view . Tolong periksa apakah ada yang usang?

Info Tambahan:

Di Chrome (desktop / seluler) semuanya baik-baik saja;
Menggunakan CanvasRenderer semuanya juga baik-baik saja, bahkan di Safari.

Sumber

holymonson

Komentar yang paling membantu

@redsend

Itu tidak menjamin bahwa toDataURL dan getImageData mengembalikan hal-hal yang tepat untuk WebGL, bahkan tidak dalam standar. Anda harus menggunakan API ekstrak PIXI:

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

ivanpopelyshev pada 24 Sep 2016

👍6 ❤3

Semua 15 komentar

Diuji di Safari / Firefox / Chrome dan dapatkan di bawah:
02 01 46

holymonson pada 17 Jan 2016

aneh! akan pastikan untuk melihat..

GoodBoyDigital pada 4 Feb 2016

Saya sepertinya memiliki masalah yang sama dengan kanvas yang terbalik di Safari sedangkan Chrome menampilkannya dengan benar.

Esshahn pada 5 Feb 2016

Sekarang saya mengatur baseTexture.flipY = true di Safari dan menggunakan hack kotor di bawah ini untuk mengatasinya.

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 pada 5 Feb 2016

👍1

Saya memiliki masalah serupa di mana saya menambahkan Sprite ke Sprite dan kemudian pada panggilan kanvas toDataURL(). Gambar yang dikembalikan dibalik secara vertikal pada safari yang lebih baru, sementara safari yang lebih lama (7.1 diuji) dan browser lain tampaknya mengembalikan gambar yang tidak dibalik. Ada saran bagaimana cara memperbaikinya?

@holymonson mungkin layak untuk diuji pada safari yang lebih lama untuk melihat apakah Anda memiliki perilaku serupa?

vn222ay pada 16 Feb 2016

Ingin tahu apakah ada yang menemukan sumber masalah ini?

vn222ay pada 26 Feb 2016

demi tidak membiarkan utas ini mati: Saya belum menemukan solusi untuk itu dan harus kembali ke rendering kanvas paksa.

Esshahn pada 26 Feb 2016

Ini mungkin terkait dengan konteks WebGL premultipliedAlpha ; dalam kasus saya, saya hanya dapat mereproduksi masalah jika premultipliedAlpha adalah false untuk penyaji kedua. Perlu mengeluarkan demo terisolasi untuk memverifikasi.

jpweeks pada 21 Jul 2016

Saya benci ide bagaimana itu bisa terjadi, tetapi saya harus mereproduksinya terlebih dahulu.

ivanpopelyshev pada 21 Jul 2016

Berikut ini adalah kasus yang dapat direproduksi; hanya memengaruhi gambar yang dihasilkan dengan toDataURL di Safari.
https://jsbin.com/qivife/14/edit?js ,output

jpweeks pada 22 Jul 2016

apakah ada cara untuk mengekspor dengan toDataURL API gambar tidak dibalik?

redsend pada 24 Sep 2016

@redsend

Itu tidak menjamin bahwa toDataURL dan getImageData mengembalikan hal-hal yang tepat untuk WebGL, bahkan tidak dalam standar. Anda harus menggunakan API ekstrak PIXI:

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

ivanpopelyshev pada 24 Sep 2016

👍6 ❤3

var base64=renderer.extract.base64(tahap); dan var canvas =renderer.extract.canvas(tahap); perbaiki masalah terbalik Tapi kemudian ukuran kanvas telah berubah, dan warna latar belakang tidak bertahan. Ada saran?