Pixi.js: PIXI gagal membuat Filter dari kode shader khusus

Contohnya berfungsi untuk saya, di browser apa Anda menguji Anda?

Google Chrome Versi 62.0.3202.94 (Builan Resmi) (64-bit)

Firefox Quantum 57.0 (64-bit)

OS: Ubuntu 17.10 berseni

@doebi tangkapan yang bagus! Ya, pengoptimalan menghapus sesuatu (saya yakin samplernya) dan kami lupa memeriksanya.

Untuk saat ini, apakah Anda yakin membutuhkan filter tanpa menggunakan sampler? Dalam beberapa kasus lebih baik membuat plugin penyaji seperti https://github.com/pixijs/pixi-plugin-example ?

Kedua kalinya hari ini, saya minta maaf atas kekacauan shader dan filter di v4. Kami akan memperbaikinya di v5.

Sejujurnya, saya belum terlalu mendalami topik ini. Hanya ingin bereksperimen dengan fitur itu tempo hari. Saya akan melakukan beberapa pengujian dengan pendekatan plugin renderer. Terima kasih atas petunjuknya.

Apakah sudah ada ETA untuk v5?

2 bulan lebih :)

Ada banyak trik tentang filter, itu sebabnya saya membuat artikel itu: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

@ivanpopelyshev Mengikuti tutorial Anda, saya mengalami masalah yang sama.
Saya menerapkan patch yang benar-benar hacky ke pixi.js untuk membuatnya bekerja untuk saya.

diff --git a/js/pixi.js b/js/pixi.js
index 363f09c..d0a321b 100644
--- a/js/pixi.js
+++ b/js/pixi.js
@@ -2344,6 +2344,9 @@ VertexArrayObject.prototype.activate = function()
  */
 VertexArrayObject.prototype.addAttribute = function(buffer, attribute, type, normalized, stride, start)
 {
+  if (!attribute) {
+    return this;
+  }
     this.attributes.push({
         buffer:     buffer,
         attribute:  attribute,

Saya tahu ini bukan solusi, tetapi ini memungkinkan saya untuk bermain dengan kode shader di v4 sampai v5 keluar. (dengan kemungkinan perbaikan yang lebih baik) :)

Itu peretasan yang bagus!

Anda dapat memindahkannya ke file js terpisah:

PIXI.glCore.VertexArrayObject.prototype.addAttribute = ...

Saya mendapat masalah yang sama. Juga dengan Ubuntu 17.10 berseni. Apakah shader sama sekali stabil di Pixi.js? Bisakah saya menggunakannya dalam produksi? Bagaimana cara mengimpor pixel shader?

Baik sebagai filter maupun sebagai plugin penyaji. Mereka stabil tetapi membutuhkan pengetahuan yang serius baik tentang webgl dan tentang arsitektur pixi.

https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters
https://github.com/pixijs/pixi-plugin-example/

Untuk ke-N kali saya meyakinkan orang bahwa itu akan lebih mudah di v5.

const filterCode = `void main(){
   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}`;
const filter = new PIXI.Filter(null, filterCode);
someSprite.filters = [filter];

Kode sebanyak ini menyebabkan kesalahan ini. Mungkin saya harus menggunakan konstruktor Filter yang berbeda? Atau haruskah saya mengganti null dengan sesuatu?

Untuk filter, Anda harus menggunakan texture coord dan sampler , jika tidak FilterManager gagal mendapatkan lokasi atribut.

Plugin Renderer tidak memiliki persyaratan itu, cobalah. Ya, boilerplatenya besar.

Coba hal itu: https://github.com/TazOen/createShaderPlugin . Namun itu mengabaikan tekstur, tidak ada bindTexture sana. Jika Anda membutuhkan tekstur, ambil seluruh pixi-plugin-example.

Anda mengatakan itu membutuhkan koordinat tekstur dan "sampler". Apakah sampel atau sampler? Salah ketik?
Saya berhasil membuatnya bekerja dengan bantuan contoh. Terima kasih tapi. Mengapa halaman ini tidak menyebutkan detail ini?
http://pixijs.io/examples/#/basics/custom -filter.js

sampel. Namun seragamnya dan saya tidak berpikir seseorang akan melewatkannya. Masalah kita adalah tentang atribut.

Terima kasih kepada Anda, ya :) https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#cannot -read-property-location-of-undefined

Oh, jadi itu tempatnya. Saya merindukan wiki.

Terima kasih padamu, itu benar

Saya telah menambahkannya sekarang.

Juga menambahkan pemberitahuan dalam demo filter-mouse. Kami tidak dapat memperbaiki masalah di v4. Kami akan melakukan sesuatu tentang itu di v5.

Itu muncul ketika beberapa properti yang diperlukan oleh FilterManager tidak digunakan di shader.

Bagaimana kalau daftar properti ini di sana?

hanya atributnya, aTextureCoord -> vTextureCoord

Ini menjadi sangat aneh.
Kode ini berfungsi dengan baik:

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;
uniform vec4 uTextureClamp;
uniform vec4 uColor;

void main(void)
{
    gl_FragColor = texture2D(uSampler, vTextureCoord);
    gl_FragColor.r = 0.0;
    gl_FragColor.g = 0.0;
    gl_FragColor.b = 0.0;
}

Tetapi jika saya menambahkan gl_FragColor.a = 0.0; ke bagian akhir maka dikatakan Cannot read property 'location' of undefined . Sepertinya saya hanya bisa mengubah 3 koordinat dari 4 paling banyak. Apa ini? Apa yang salah?

@germansokolov13 perilaku ini sangat masuk akal. Pikirkan saja:
Seperti yang saya sebutkan di posting asli kesalahan ini terjadi karena glsify mengoptimalkan kode shader.

Jika Anda menambahkan gl_FragColor.a = 0.0; itu dapat mengoptimalkan panggilan Anda ke texture2D , karena itu akan ditimpa sepenuhnya, tetapi sampai saat itu dibutuhkan saluran alfa dari texture2D

Jika glsify mengoptimalkan panggilan ke texture2D, webgl tidak mengalokasikan memori untuk uSampler , maka ketika pixi ingin mengunggah data ke seragam itu gagal, karena tidak ada ruang untuk yang dialokasikan.

Anda punya beberapa opsi:

• Terapkan peretasan yang sama seperti yang saya lakukan (untuk saat ini), yang pada dasarnya memeriksa apakah suatu atribut dialokasikan sebelum mengunggah data ke sana.
• Gunakan uSampler, jadi glsify tidak mengoptimalkannya.
• Atau tunggu saja v5.

Semoga, ini membantu.

Tangkapan yang bagus, @doebi!

Atau gunakan plugin penyaji.

Oh, sekarang aku mengerti! Mungkin kita harus menambahkan patch Doebi ke rilis minor berikutnya dari Pixi.js? Haruskah saya membuat PR?

Iya, PR, tapi beda tempat.

https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/utils/Quad.js#L93
https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L242

Saya menyarankan kelas tambahan yang menimpa metode dan yang digunakan di FilterManager.

Hai, yang di sana,
Saya mengalami masalah serupa dengan kode shader saya. Ini adalah variasi dari kode shader BlurYFilter default hanya dengan kernel yang lebih besar dan sedikit variasi pada variabel gaussian, jadi saya tidak sepenuhnya yakin mengapa itu tidak berfungsi.

Ini berfungsi dengan baik di Windows, MacOS, dan Android sejauh yang saya uji, saya hanya memiliki masalah di iOS.
Berikut kode shadernya:
puncak:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float strength;
uniform mat3 projectionMatrix;
varying vec2 vBlurTexCoords[15];
void main(void){
   gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);
   vBlurTexCoords[0] = aTextureCoord + vec2(0.0, -7.0 * strength);
   vBlurTexCoords[1] = aTextureCoord + vec2(0.0, -6.0 * strength);
   vBlurTexCoords[2] = aTextureCoord + vec2(0.0, -5.0 * strength);
   vBlurTexCoords[3] = aTextureCoord + vec2(0.0, -4.0 * strength);
   vBlurTexCoords[4] = aTextureCoord + vec2(0.0, -3.0 * strength);
   vBlurTexCoords[5] = aTextureCoord + vec2(0.0, -2.0 * strength);
   vBlurTexCoords[6] = aTextureCoord + vec2(0.0, -1.0 * strength);
   vBlurTexCoords[7] = aTextureCoord + vec2(0.0, 0.0 * strength);
   vBlurTexCoords[8] = aTextureCoord + vec2(0.0, 1.0 * strength);
   vBlurTexCoords[9] = aTextureCoord + vec2(0.0, 2.0 * strength);
   vBlurTexCoords[10] = aTextureCoord + vec2(0.0, 3.0 * strength);
   vBlurTexCoords[11] = aTextureCoord + vec2(0.0, 4.0 * strength);
   vBlurTexCoords[12] = aTextureCoord + vec2(0.0, 5.0 * strength);
   vBlurTexCoords[13] = aTextureCoord + vec2(0.0, 6.0 * strength);
   vBlurTexCoords[14] = aTextureCoord + vec2(0.0, 7.0 * strength);
}

pecahan:

varying vec2 vBlurTexCoords[15];
uniform sampler2D uSampler;
void main(void){
   gl_FragColor = vec4(0.0);
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[0]) * 0.013068780984604511;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[1]) * 0.013907007172070673;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[2]) * 0.017439264394216315;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[3]) * 0.028762309061254498;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[4]) * 0.05603114255667656;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[5]) * 0.10421702583793174;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[6]) * 0.163461199220823;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[7]) * 0.2062265415448454;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[8]) * 0.163461199220823;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[9]) * 0.10421702583793174;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[10]) * 0.05603114255667656;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[11]) * 0.028762309061254498;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[12]) * 0.017439264394216315;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[13]) * 0.013907007172070673;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[14]) * 0.013068780984604511;
}

untuk perbandingan di sini adalah shader dari BlurYFilter default:
belukar:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float strength;
uniform mat3 projectionMatrix;
varying vec2 vBlurTexCoords[5];
void main(void)
{
  gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);
  vBlurTexCoords[0] = aTextureCoord + vec2(0.0, -2.0 * strength);
  vBlurTexCoords[1] = aTextureCoord + vec2(0.0, -1.0 * strength);
  vBlurTexCoords[2] = aTextureCoord + vec2(0.0, 0.0 * strength);
  vBlurTexCoords[3] = aTextureCoord + vec2(0.0, 1.0 * strength);
  vBlurTexCoords[4] = aTextureCoord + vec2(0.0, 2.0 * strength);

}

pecahan:

varying vec2 vBlurTexCoords[5];
uniform sampler2D uSampler;
void main(void)
{
    gl_FragColor = vec4(0.0);
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[0]) * 0.153388;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[1]) * 0.221461;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[2]) * 0.250301;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[3]) * 0.221461;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[4]) * 0.153388;

}

Adakah yang punya ide mengapa ini bisa salah?

@tyleet apakah Anda yakin ini masalah yang sama? Apa yang Anda lihat di konsol?

EDIT:
Nevermind, saya menemukan masalah, sepertinya ukuran kernel 15 terlalu banyak untuk iOS, jika saya mengurangi ukuran kernel menjadi 7 itu berfungsi dengan baik.

<-----Postingan asli--------->
Hai,
maaf atas keterlambatan respons, saya tidak dapat membuat beberapa tangkapan layar selama akhir pekan. Sepertinya saya gagal pada baris yang sama. "atribut" tidak terdefinisi. Berikut adalah tangkapan layar dari konsol jarak jauh:

@ivanpopelyshev akankah kita menutup masalah ini untuk mencegah orang lain memanaskannya dengan masalah serupa?
Saya tidak akan menganggapnya sebagai masalah lagi, karena saya mendapat janji Anda, bahwa itu akan diperbaiki di v5.

@doebi tutup.

@tyleet jumlah sampel yang diambil dari tekstur dapat dibatasi pada sistem yang berbeda.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.