WebGL 月食を表現 負のライティング

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

 

 

WebGL月食を表現する際に考えられる方法。

 

テストで作成

 

月食の仕組みは、レイリー散乱によるもの。

http://web.canon.jp/technology/kids/mystery/m_01_10.html

影なので、デプスシャドウを使用するか。

しかし、Three.jsで影の輪郭をぼかせるのだろうか(ソフトシャドウ)。

よりつきつめると、散乱現象も加わる。

 

参考になりそうな記事

https://liginc.co.jp/355670

 

シャドウマッピングの試み

 

投影(射影)テクスチャマッピング技法が使えるかもしれない。

または、逆の発想でマイナスの明るさを持つ点光源とかで負のライティングをしてやる。

 

雲のテクスチャを重ねて表示

 

マイナスの明るさを持つ点光源とかで負のライティング

SpotLight の intensity(光の強さ)をマイナスにすることで黒いライトが作れるよう。