WebGLで描画した3Dモデルに陰影をつけたい
解決したいこと
Three.jsのPlaneBufferGeometryとShaderMaterialを使って地形を表示するプログラムを作っています。地形は時間軸に沿って変形するようにしています。地形変化のための計算は、計算に必要なパラメータを頂点シェーダに渡して処理しています。頂点シェーダで計算しているため、元のPlainBufferGeometryの法線ベクトルは(0,0,1)が並んでいるだけです。適当な場所に並行光源を配置して陰影をつけてそれらしく見せたいのですが、陰影をつける方法がわからず現在はワイヤーフレームで適当に色付けして表示させています。
このような場合、どのようにして陰影をつけるのでしょうか。現状の記述の要約は下記です。
頂点シェーダの記述
void main () {
//elevationを計算する
//計算したelevationを点の位置のz座標にする
gl_Position = projectionMatrix * modelViewMatrix * vec4( position.xy, elevation, 1.0 );
}
フラグメントシェーダの記述
void main () {
//色を計算する
//計算した色を設定する
gl_FragColor = vec4( outColor.rgb, outAlpha );
}
調べたこと
PlaneBufferGeometryで生成したオブジェクトそのものに対してsetAttributeで頂点を変形させた場合はcomputeFaceNormalsやcomputeVertexNormalsにより、オブジェクトに対して法線ベクトルを再計算させることが出来ますが、全て頂点シェーダ内で計算させているためその方法が使えません。
@aa_debdebさんの【Unity】頂点シェーダーで頂点を変形した後に法線を再計算する
こちらの記事が近いのかと思ったのですが、Unityを使ったことがないのでよく理解できませんでした。
どのように実現したらよいか、初心者（GLSLの1年生）でも参考にできそうな情報がありましたら教えていただけると嬉しいです。
因みに、陰影を実現したいページは下記になります。
西之島海底火山噴火に伴う土地形状変化のアニメーション
0
