CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 前編

以前も何度か書いたことがありますが、フォトリアルな表現が好きでもっとスキルをつけたいと思っています。

www.crossroad-tech.com

www.crossroad-tech.com

www.crossroad-tech.com

www.crossroad-tech.com

今回は最終的にBabylon.jsできれいな表現を試すため、Blenderを中心に調べたことをまとめました。

試した環境

  • Blender 2.93

  • Babylon.js 5.5.5 (後編の記事で使います)

1. Babylon.jsできれいな表現をする方法の1つとしてpre-baked lightingが提案されている

Babylon.js forumを色々調べていたところ、pre-baked lighting (=ライトマップ) をすることで見た目をきれいにしたよ、という投稿がありました。

forum.babylonjs.com

こちらは直接デモサイトに飛びますが、pre-baked lightingをした結果の3DCG空間を確認することができます。

Babylon.js - Glowing Espilit demo

実際はきれいな表現をするには、以前Unityで試したときのようなライティングを調整する、Babylon.js のglow layer、bloom、PBRを使うなどの手段も考えられます。今回はフォーラムの情報を参考にして、pre-baked lightingをBlenderで試してみました。

2. 3DCGモデルを準備する

ゼロから作った環境でpre-baked lightingが試す方法を知りたかったので、部屋っぽいものを作りました。
壁と床はBlenderのCubeを加工して表示し、TurboSquidという3DCGモデルの配布サイトより、家具を入手して配置しました。

椅子 www.turbosquid.com


www.turbosquid.com

SmartTV
www.turbosquid.com

SmartTVの棚
www.turbosquid.com

ソファ
www.turbosquid.com

この時点ではこうなります。

Just aligned 3dmodels on Blender

次にテクスチャを貼りました。テクスチャは、Blenderで対象の3DCGモデルを選択してからShadingという表示に変更し、ノードを表示してから設定していきます。

Shading mode on Blender 2.93

Shadingが表示された直後は、Principled BSDFという1つのノードだけが表示されています。このノードに対して、Texture Coordinate、Mapping、Image Textureというノードを追加して繋いでいきます。
Image Textureノードで使用したいテクスチャファイルを選び、Image TextureノードとPrincipled BSDFノードを接続すると、3DCGモデルにテクスチャが割り当てられます。

下記の記事がわかりやすかったです。
modelinghappy.com

今回使用させていただいたテクスチャは以下の通りです。

ソファーカバーとして使用
www.pakutaso.com

フローリングとして使用
www.pakutaso.com

壁として使用
www.pakutaso.com

テレビに映った画面として使用
github.com

なお、机については単一メッシュだったので机の板部分とそれ以外で分割、分離しています。分割と分離については以下の記事を参考にして実施しました。

www.magicalayanajp.com

このような作業をしてそれぞれにテクスチャを割り当てると、このようになります。

Aligned 3Dmodels with textures

先ほどよりはそれっぽく見えるようになりました。しかし、まだのっぺりした印象があります。

3. おわりに

きりがよいので、いったんここで終えます。次回はライトマップをベイクすることで、よりリアルな印象を出す方法とBabylon.jsで表示させた結果について解説予定です。