LookingGlassでの表示を綺麗にするために、three.jsのdisplacement mapの階調を8ビット256から24ビット16777216に拡張する

displacement mapは、画像データを元にお手軽に3次元(2.5次元)形状を表現する手法として知られています。これを使ってLookingGlassの表示アプリを作っている方がいたりして､なるほど簡単で良いなと感心しました。
stereo.jpn.org
ただグレーは通常256階調しか持ちませんので、Looking Glassの奥行表現の性能を表現しきれません。そこで、256階調を3色分の情報を使ってもっと細かに奥行を表現できるようにしたいと思います。

var displacementmap_vertexを改造する

three.jsではdisplacement mapをvar displacementmap_vertexという変数の中に定義した式で計算しています。そこで、この式の記述を探して中を書き換えてしまいます。

デフォルトのグレー256階調をコメントアウトします。

//var displacementmap_vertex = "#ifdef USE_DISPLACEMENTMAP\n\ttransformed += normalize( objectNormal ) * ( texture2D( displacementMap, uv ).x * displacementScale + displacementBias );\n#endif";

その下に、3色1677階調版を記述します。チャンネル毎に256倍のオフセットを与えているだけです。

var displacementmap_vertex = "#ifdef USE_DISPLACEMENTMAP\n\ttransformed += normalize( objectNormal ) * ( (texture2D( displacementMap, uv ).x + 256. * texture2D( displacementMap, uv ).y + 256. * 256. * texture2D( displacementMap, uv ).z ) * displacementScale + displacementBias );\n#endif";

データは、手前から奥へRGBの並びになります。