pixijsにpngマスキングを適用するには？

Question

他のレイヤのマスクとしてpngスプライトを適用しようとしています。 私はpixi.js公式サイトからデモを得て、このバイオリンを作った：

https://jsfiddle.net/raphadko/ukc1rwrc/

これは私が使用しているマスキングのためのコアコードです：

var brush = PIXI.Sprite.fromImage('http://i.imgur.com/LtSbbSP.png'); 
brush.anchor.set(0.5); 
app.stage.addChild(brush); 
brush.x = app.renderer.width/2; 
brush.y = app.renderer.height/2; 

var thing = new PIXI.Graphics(); 
app.stage.addChild(thing); 
thing.x = app.renderer.width/2; 
thing.y = app.renderer.height/2; 
thing.lineStyle(0); 

container.mask = thing; 

をあなたはそれを見ることができますスプライトではなくGraphics（）要素である「もの」オブジェクトが適用されたときにマスキングがうまく機能するようになりました。マスクをオン/オフする）

pngスプライトのマスキングの仕方は？

Answer 1

私はこの問題を同じ問題の解決策を探して見つけましたが、それは古い問題だと思いますが、将来のPixi、erm、pixiesを助けるかもしれません。

アルファマスキングとして知られていて、アルファとカラーの両方で動作するという問題があります.GLSLについての知識は限られていますが、マスクを実行するシェーダが赤いチャネルを取るように見えます。各RGBピクセルの真の光度が高価になる。

したがって、透明領域（アルファ= 0）と同じように、PNGの黒色領域（赤色= 0）がターゲット表示オブジェクトをマスクします。これにより、JPGも使用できます。

thisの「公式」確認。 シェーダの定義here。

Answer 2

スプライトをマスクとして使用すると、暗い部分が隠されている間は明るい部分が表示されます。白い色の画像を使用すると、PNGマスクが正しく機能します。

var brush = PIXI.Sprite.fromImage('https://0201.nccdn.net/1_2/000/000/11a/e17/house-xxl.png'); 

される次の更新フィドル： https://jsfiddle.net/ukc1rwrc/4/