HTML5 キャンバス オブジェクトを使用して単純な 3D エンジンを作成しています。うまく機能していますが、赤/青のメガネを使用して 3D を実際に見ることができるように、赤/青のアナグリフ処理を実装したいと考えています。現時点では、3D オブジェクトを 2 回レンダリングしています。2 回目は、最初のカメラ位置のすぐ隣のカメラ位置からです。
私が直面している問題は、レンダリングされた 2 つのオブジェクトを組み合わせて、アナグリフの正しい色にする方法です。現在、globalAlpha=0.5 を使用して、最初を赤で、2 番目を青でレンダリングしています。ただし、赤のオブジェクトの影響を受けるピクセルのみが赤のままであるため、これは完全には機能していませんが、背景色が黒であるため、黒と赤の間の色になっています。
3D アナグリフ作成アプリケーションを見ていると、赤と青のピクセルが一緒に次のように計算されることに気付きました。
255 0 0
0 0 255
------------- +
255 0 255
ただし、HTML5 キャンバスはアルファを使用してすべてのピクセルを計算しているため、背景色が黒の場合、赤のままのはずの赤のピクセルが濃い赤になります。基本的に、赤のオブジェクトのピクセルは各ピクセルの赤の成分にのみ影響し、青のオブジェクトのピクセルは各ピクセルの青の成分にのみ影響する必要があります。
ピクセルごとに作業することもできますが、これは可能であり、パフォーマンスを損なうことはありませんか? 1秒間に20フレームをレンダリングしているので、実用的ではないと思います。任意の提案をいただければ幸いです。
この画像で全体が明確になることを願っています。
