2017-07-02 1 views
1

PIXI.jsを使用してアプリケーションを作成し、WebGLRendererを使用しています。PIXI.jsとWebGLRendererで黒く塗りつぶすフェード後

私は描画バッファを維持し、レンダリングする前にクリアしていないよ:

{ preserveDrawingBuffer: true, clearBeforeRender: false } 

これは、物体が動き回るように私は、証跡を作成することができます。 時間の経過とともにトレイルをフェードアウトさせたいので、すべてのレンダリングで透明な黒い四角形を上に適用します。これは機能しますが、フェードアウトは最終的にはグレーに丸まります。私は完全な退色を黒にしたい。

私はルートコンテナの明度を下げたフィルタColorMatrixFilterを使用して、フェード効果が生じることを期待しています。代わりに、すべてがわずかに暗くなるだけでなく、フェード効果は生じませんでした。それがうまくいけば、カスタムフィルターがその仕事をするのに役立つかもしれません。

どのように私のレンダリングされたオブジェクトのトレイルのための黒を完了するのに緩やかな徐々のフェードを得ることができますか?

編集:ここに私が試したもののいくつかの例を示します。これらのメソッドは、グレーの道を私に残し

// `this` being my app object. 
this.fadeGraphics   = new PIXI.Graphics() 
this.root.addChild(this.fadeGraphics) 

// Blend Mode 
this.fadeGraphics.blendMode = PIXI.BLEND_MODES.MULTIPLY 
this.fadeGraphics.beginFill(0xf0f0f0) 
this.fadeGraphics.drawRect(0, 0, this.screenWidth, this.screenHeight) 
this.fadeGraphics.endFill() 

// Transparent black rectangle. 
this.fadeGraphics.beginFill(0x000000, .05) 
this.fadeGraphics.drawRect(0, 0, this.screenWidth, this.screenHeight) 
this.fadeGraphics.endFill() 

どちらも私の値が十分に強力であれば、道は消えます。しかし、私は非常に長期的なトレイルが必要なので、小さな値を使用しなければならず、場合によってはn番目のフレームごとに適用する必要があります。

私はSUBTRACTブレンドモードが私が必要とすることができるかもしれないと思う。
残念ながらPixi.jsでは使用できないようです。

答えて

0

私は結局、白への退色が素晴らしいことを理解しました。

したがって、1つの解決策は、白にフェードインし、次に色を反転させ、色相を180度回転させることです。

キャンバス上のCSSフィルタでこれを行うことはできますが、すべてのブラウザで機能するわけではなく、パフォーマンスが低下し、すべての色の強度が反転します。

0

同じことを一度試してみましたが、同じ問題がありました。どのくらい遅く私がピクセルを退色したかに応じて、灰色の領域は多かれ少なかれ見えるでしょう。

私はあなたがやっていることは、各フレームループでキャンバスをクリアすることだと思いますが、黒だけを使用するのではなく、透明度を使用します。その結果、すべての透明シートの合計が決して純粋な黒色に達することはありません。

サンプルコードを投稿できますか?

関連する問題