立體浮雕圖像中的顏色

Question

我正在嘗試探索如何製作3D立體圖像（帶有紅色/青色）。我使用HTML5 <canvas>元素來完成繪圖。

問題是我找不出應該使用什麼顏色。另外，我不太確定如何組合顏色。

當前我有以下代碼：http://jsfiddle.net/eGjak/15/。問題是我無法設法爲紅色部分使用正確的顏色。無論我選擇多少紅色，我的眼鏡仍然透過眼鏡的紅色部分讓紅色。然而，青色不會穿過我的眼鏡的青色部分。看起來這也取決於背景顏色 - 有人可以對此有所瞭解嗎？其次，我應該如何結合紅色和青色？我目前將顏色加起來，但是這會導致白色，因爲紅色是(255,0,0)，青色是(0,255,255)。在sample image上，似乎他們加起來就是黑色 - 這怎麼可能？

那麼，我應該使用什麼顏色的紅色部分？如何將紅色和青色部分相互重疊？

Answer 1

好第一關，這裏有一些開源的浮雕圖像實現，你可以看看：

http://www.schrammel.org/stereo-plascolin.php

http://www.leebyron.com/else/redblue/#redblue

---

這麼說，我不認爲看在一些代碼是解決這個問題的最好方法。你需要在更高的層次上理解代碼背後發生了什麼。

所以我建議看看這個頁面上的教程;這些都是如何在圖像編輯程序手動創建一個立體照片圖像的解釋：

http://graphicssoft.about.com/od/3danaglyphs/Making_3D_Anaglyphs.htm

首先嚐試做在Photoshop或GIMP或任何教程，以確保產生的圖像是你想要的，然後嘗試以編程方式實現該技術。

Answer 2

您首先必須考慮3D圖像：您想讓左眼看到什麼圖像，以及您想讓右眼看到什麼圖像？然後，您可以使用一些技術將圖像合併爲3D圖像。

組合圖像的紅/青眼鏡並不像看起來那麼簡單;例如紅色塑料實際上會讓一些綠光通過。幸運的是，Eric Dubois考慮瞭如何最好地創建3D紅/青色浮雕的問題，Eric Dubois開發了一種將左/右圖像合併爲單個紅/青色浮雕的數學優化技術。

該算法的細節在another question中討論過。您可能還想要工作JavaScript demo，該工作將兩個圖像合併到HTML5畫布上的單個浮雕上。