以前も何度か書いたことがありますが、フォトリアルな表現が好きでもっとスキルをつけたいと思っています。
今回は最終的にBabylon.jsできれいな表現を試すため、Blenderを中心に調べたことをまとめました。
試した環境
Blender 2.93
Babylon.js 5.5.5 (後編の記事で使います)
1. Babylon.jsできれいな表現をする方法の１つとしてpre-baked lightingが提案されている
Babylon.js forumを色々調べていたところ、pre-baked lighting (=ライトマップ) をすることで見た目をきれいにしたよ、という投稿がありました。
こちらは直接デモサイトに飛びますが、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モデルの配布サイトより、家具を入手して配置しました。
SmartTV
www.turbosquid.com
SmartTVの棚
www.turbosquid.com
この時点ではこうなります。
次にテクスチャを貼りました。テクスチャは、Blenderで対象の3DCGモデルを選択してからShadingという表示に変更し、ノードを表示してから設定していきます。
Shadingが表示された直後は、Principled BSDFという１つのノードだけが表示されています。このノードに対して、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
なお、机については単一メッシュだったので机の板部分とそれ以外で分割、分離しています。分割と分離については以下の記事を参考にして実施しました。
このような作業をしてそれぞれにテクスチャを割り当てると、このようになります。
先ほどよりはそれっぽく見えるようになりました。しかし、まだのっぺりした印象があります。
3. おわりに
きりがよいので、いったんここで終えます。次回はライトマップをベイクすることで、よりリアルな印象を出す方法とBabylon.jsで表示させた結果について解説予定です。
