在HTML5畫布上創建立體浮雕3D圖像

Question

我正在使用HTML5畫布對象創建簡單的3D引擎。它運行良好，但我想實施紅色/藍色浮雕處理，以便使用紅色/藍色眼鏡可以真正看到3D。目前，我已經將3D對象渲染了兩次，第二次從位於第一個攝像頭位置旁邊的攝像頭位置開始渲染。

我面臨的問題是如何組合呈現的兩個對象，以獲得立體圖的正確顏色。現在我使用globalAlpha = 0.5，並將第一個渲染爲紅色，第二個渲染爲藍色。然而，這並不完全奏效，因爲僅受紅色物體影響的像素應保持紅色，但由於我的背景顏色爲黑色，因此它們變成黑色和紅色之間的顏色。

當考慮看看一個立體浮雕創建應用程序，我注意到，紅色和藍色像素一起被如下計算：

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

使用alpha HTML5的畫布然而計算所有像素，因此如果背景顏色爲黑色，紅色像素變爲深紅色，同時應保持紅色。基本上我需要紅色物體的像素隻影響每個像素的紅色分量，而藍色物體的像素隻影響每個像素的藍色分量。

我可以在每個像素的基礎上工作，但這是可能的，而不是性能突破？我每秒渲染20幀，所以我猜它不會有任何實際用途。任何建議，將不勝感激。

我希望這個形象闡明全：

Answer 1

有，你可以改變影響此行爲畫布上下文的globalCompositeOperation財產。具體來說，將其設置爲「較亮」會將任何繪圖操作的顏色添加到源圖像。這也將尊重阿爾法值。如果它是一個複雜的場景，則可能需要將場景兩次繪製到一個隱藏的畫布上，然後將其複製到可見畫布上，並將複合操作設置爲「較亮」。