Pixi.js: PIXIがカスタムシェーダーコードからのフィルターの作成に失敗する

この例は私にとってはうまくいきますが、どのブラウザでテストしていますか？

Google Chromeバージョン62.0.3202.94（公式ビルド）（64ビット）

Firefox Quantum 57.0（64ビット）

OS：Ubuntu17.10巧妙

@doebiナイスキャッチ！ ええ、最適化は何かを削除しました（私はそのサンプラーに賭けます）そして私たちはそれをチェックするのを忘れました。

今のところ、サンプラーを使用せずにフィルターが必要ですか？ 場合によっては、 https：//github.com/pixijs/pixi-plugin-exampleのようなレンダラープラグインを作成する方が良いですか？

この日2回目、シェーダーとフィルターがv4に含まれていることをご迷惑をおかけして申し訳ありません。 v5で修正します。

正直なところ、私はまだこのトピックを深く掘り下げていません。 先日、その機能を試してみたかっただけです。 レンダラープラグインアプローチを使用していくつかのテストを行います。 ヒントをありがとう。

v5のETAはすでにありますか？

2ヶ月かそこら:)

フィルタには多くのトリックがあります。そのため、私はその記事を作成しました： https ：

@ivanpopelyshevあなたのチュートリアルに続いて、私は同じ問題に遭遇しました。
私はそれが私のために働くようにpixi.jsに本当にハッキーなパッチを適用しました。

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,

これが解決策ではないことはわかっていますが、v5がリリースされるまでv4のシェーダーコードで遊ぶことができます。 （おそらくより良い修正で）:)

それは良いハックです！

あなたはそれを別のjsファイルに移動することができます：

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

同じ問題が発生しました。 また、Ubuntu17.10でも巧妙です。 Pixi.jsではシェーダーはまったく安定していますか？ それらを本番環境で使用できますか？ ピクセルシェーダーをインポートするにはどうすればよいですか？

フィルターとして、またはレンダラープラグインとして。 それらは安定していますが、webglとpixiアーキテクチャの両方についての真剣な知識が必要です。

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

N回目は、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];

これだけのコードがこのエラーにつながります。 たぶん私はフィルターの別のコンストラクターに行くべきですか？ または、nullを何かに置き換える必要がありますか？

フィルタの場合、テクスチャ座標とサンプラーを使用する必要があります。そうしないと、FilterManagerは属性の場所を取得できません。

レンダラープラグインにはその要件はありません。試してみてください。 ええ、その大きな定型文。

そのことを試してください： https ： bindTextureありません。 テクスチャが必要な場合は、pixi-plugin-example全体を取り上げてください。

あなたはそれがテクスチャ座標と「サンプラー」を必要としていると言います。 サンプルまたはサンプラーでしたか？ タイプミス？
私は例の助けを借りてそれを機能させることができました。 ありがとうございます。 このページにこれらの詳細が記載されていないのはなぜですか？
http://pixijs.io/examples/#/basics/custom -filter.js

サンプラー。 しかし、そのユニフォームと私は誰かがそれを見逃すとは思わない。 私たちの問題は属性についてです。

あなたのおかげで、それはします:) https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#cannot -read-property-location-of-undefined

ああ、それはそれがあった場所です。 私はウィキを逃しました。

あなたのおかげで、それはします

今追加しました。

また、フィルターマウスのデモに通知を追加しました。 v4では問題を修正できません。 v5でそれについて何かをします。

これは、FilterManagerに必要な一部のプロパティがシェーダーで使用されていない場合に表示されます。

そこにこれらのプロパティをリストするのはどうですか？

属性のみ、aTextureCoord-> vTextureCoord

これは非常に奇妙になっています。
このコードは正常に機能します。

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;
}

しかし、最後にgl_FragColor.a = 0.0;を追加すると、 Cannot read property 'location' of undefinedます。 せいぜい4つのうち3つしか変更できないようです。 これは何ですか？ なにが問題ですか？

@ germansokolov13この動作は完全に理にかなっています。 考えてみてください。
元の投稿で述べたように、このエラーは、glsifyがシェーダーコードを最適化するために発生します。

gl_FragColor.a = 0.0;を追加すると、 texture2Dへの呼び出しを最適化でき、完全に上書きされますが、それまではtexture2Dからアルファチャネルを使用します

glsifyがtexture2Dの呼び出しを最適化する場合、webglはuSamplerにメモリを割り当てません。したがって、pixiがそのユニフォームにデータをアップロードしようとすると失敗し、割り当てられたスペースがないためです。

あなたはいくつかのオプションを手に入れました：

• 私が（今のところ）行ったのと同じハックを適用します。これは基本的に、データをアップロードする前に属性が割り当てられているかどうかをチェックします。
• uSamplerを使用して、glsifyが最適化しないようにします。
• または、v5を待つだけです。

うまくいけば、これが役立つでしょう。

いいキャッチ、@ doebi！

または、レンダラープラグインを使用します。

ああ、今私はそれを手に入れました！ たぶん、Pixi.jsの次のマイナーリリースにDoebiのパッチを追加する必要がありますか？ PRを作成する必要がありますか？

うん、PR、でも場所は違う。

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

メソッドをオーバーライドし、FilterManagerで使用される追加のクラスをお勧めします。

やあ、
シェーダーコードで同様の問題が発生しています。 これは、デフォルトのBlurYFilterシェーダーコードのバリエーションであり、カーネルが大きく、ガウス変数に少しバリエーションがあるため、なぜ機能しないのか完全にはわかりません。

私がテストした限り、Windows、MacOS、Androidでは問題なく動作しています。iOSでのみ問題が発生します。
シェーダーコードは次のとおりです。
バーテックス：

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);
}

断片：

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;
}

比較のために、デフォルトのBlurYFilterのシェーダーを次に示します。
vert：

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);

}

フラグメント：

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;

}

なぜこれがうまくいかないのか誰かが何か考えを持っていますか？

@tyleet同じ問題でよろしいですか？ コンソールには何が表示されますか？

編集：
気にしないでください、私は問題を見つけました、15のカーネルサイズはiOSには大きすぎるようです、私がカーネルサイズを7に減らすならばそれはうまくいきます。

<-----元の投稿--------->
やあ、
返信が遅れて申し訳ありませんが、週末にスクリーンショットを撮ることができませんでした。 同じ行で失敗したように見えます。 「属性」は未定義です。 リモートコンソールからのスクリーンショットは次のとおりです。

@ivanpopelyshev他の人が同様の問題でウォームアップするのを防ぐために、この問題を閉じますか？
私はあなたの約束を得たので、それはもう問題とは思わないでしょう、それはv5で修正されるでしょう。

@doebiクロージング。

@tyleetテクスチャから取得されるサンプルの数は、さまざまなシステムで制限できます。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。