three.js でlightmapを試す

three.jsに限らず、3DCGのアプリケーションでは少しでも計算量を減らしてパフォーマンスを上げたいという要求があります。今回はそれに対する一つのアプローチであるlightmapを試したいと思います。

lightmapとは

lightmapを簡単に説明すると、物体の陰影をあらかじめ計算した結果の画像(テクスチャ)のことです。これを使用することで、光源の計算をする必要がなくなり、パフォーマンスが向上します。ただし、あらかじめ計算しておくという性質上、物体や光源が大きく動く場合には使用できません。

デモ

今回はthree.js以下のようなデモを作成しました。猿に陰影がありますが、シーンに光源は一切置いていません。

ソースコード

デモの解説

lightmap作成

まず始めに、Blenderでlightmap用のテクスチャとUVを作成する必要があります。例としてcyclesレンダラーで以下のような猿と光源の板を用意します。

次にdiffuseとは異なる、lightmap用のUVMapを用意します。

lightmapのUVを選択した状態で、猿を選択してEditモードに入り、「u」キーを押して「Lightmap Pack」を選択してUV展開します。

「UV ImageEditor」上で適当に画像を作成し…

その後、Node editor上でimage textureノードを作成し、右のBakeを実行します。

その結果、このような画像を得ることができます。

最後にこのlightmapと猿のモデルをエクスポートすれば下準備は完了です。

three.jsでlightmapを使用する

最後にモデルとlightmapを使用します。といっても設定はとても簡単で、

loader.load('./monkey.json', function (geo) {

    var lightmap = new THREE.TextureLoader().load('./lightmap.png');

    var mat = new THREE.MeshBasicMaterial({ color: 0x0000ff, lightMap: lightmap })

    var mesh = new THREE.Mesh(geo, mat);
    scene.add(mesh);
   
    render();
});

という風にコードを見ればわかるように、3行目でlightmapを読み込んで5行目でマテリアルの引数にlightmapを与えるだけです。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL