three.js でlightmapを試す

概要

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

lightmapとは

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

デモ

実際にthree.jsでlightmapを使用したデモを作成しました。
猿に陰影がありますが、シーンに光源は一切置いていません。
バージョンはr93
https://arihide.github.io/demos/lightmap/

ソースコードはこちら
https://github.com/Arihide/demos/tree/master/lightmap

解説

ここではBlenderを用いてLightmapを作成し、three.jsで表示する方法を説明します。

lightmapの作成

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

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

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

次に、Lightmap出力先のテクスチャを作成するために「UV ImageEditor」上で適当に画像を作成し…

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

その結果、このようなテクスチャを得ることができればLightmap作成完了です！

three.jsでlightmapを使用する

最後に先ほど作成したlightmapをthree.jsで使用する方法を説明します。
といっても設定はとても簡単で、

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を与えるだけです。