HTML5キャンバスでアナグリフ3Dイメージを作成

Question

私はHTML5キャンバスオブジェクトを使用して単純な3Dエンジンを作成しています。うまくいきましたが、赤/青のアナグリフ処理を実装したいので、赤/青のメガネを使用して3Dを実際に見ることができます。現時点では、3Dオブジェクトが2回レンダリングされています.2回目は、最初のカメラ位置のすぐ隣のカメラ位置からです。

私が直面している問題は、アナグリフに正しい色を表示するためにレンダリングされた2つのオブジェクトを結合する方法です。今私はglobalAlpha = 0.5を使用して、最初は赤でレンダリングし、2番目は青でレンダリングします。しかし、これは完全には機能しません。なぜなら、赤いオブジェクトの影響を受けるピクセルは赤色を維持する必要がありますが、背景色が黒色であるため、黒色と赤色の間の色になります。

アプリケーションを作成する3Dアナグリフを見て撮影する場合、私は一緒にピクセル赤色と青色は、以下のように計算されていることに気づいた：

255 0 0 
0 0 255 
------------- + 
255 0 255 

背景ので、もしHTML5キャンバスしかし、アルファを使用して、すべてのピクセルを計算しています色は黒色で、赤色のピクセルは赤色のままである必要がありますが、暗赤色になります。基本的には、赤いオブジェクトのピクセルは、各ピクセルの赤のコンポーネントにのみ影響を与え、青いオブジェクトのピクセルは各ピクセルの青のコンポーネントにのみ影響します。

私はピクセル単位で作業している可能性がありますが、これは可能であり、パフォーマンスの低下ではありませんか？私は20フレームを1秒間レンダリングしているので、実用的ではないでしょう。任意の提案をいただければ幸いです。

私はこの画像全体を明確に願っています：

Answer 1

あなたはこの動作に影響を与えるように変更することができますキャンバスコンテキストのglobalCompositeOperationプロパティがあります。具体的には、「より明るい」に設定すると、描画操作の色がソース画像に追加されます。これはアルファ値も尊重します。複雑なシーンの場合は、シーンをそれぞれ2つずつ非表示のキャンバスに描画し、複合操作を「明るい」に設定して表示キャンバスにそれぞれコピーする必要があります。