弊社でWeb3Dを制作する際、Three.jsというライブラリを使用します。
今回はそのThree.jsで3Dモデルを表示する際、軽量化に効果的な3つのポイントをご紹介致します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【実際にthree.jsを使用したサービスのご紹介】

①バーチャルギャラリーサービス
GALLERISTIIID（ギャラリスト3D）
https://gallerist3d.com

②3DデータをWebGLに変換。見積シミュレータが作れる
だれでもシミュレータ
https://daredemo-3dsim.com

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

1. 3Dモデルにベーシックマテリアルを使用

Three.js内で3Dモデルを読み込むと、標準ではライティングを反映するマテリアル設定となります。ですがこの方法では毎フレーム ライティングを計算することになり、大きな負荷がかかってしまいます。
マテリアルをライトが反映されないベーシックマテリアルに変更することで、ライティング計算の負荷を省き、大幅な軽量化が可能となります。

ベイクマップの使用
しかしこのままですと、ライトが一切ない、暗く平坦なモデルに見えてしまいます。
そこで、3Dモデルにベイクマップを適用します。

ベイクマップとは
ベイクマップとは、3Dソフト等であらかじめライティングを計算し、擬似的にリアルな陰影を持ったテクスチャマップのことです。
ベイクマップを使用することで、表示を軽量化したまま、モデルのクオリティを保つことができます。

マップサイズについて
その際、マップサイズに気をつける必要があります。
大きすぎるとかえって負荷がかかりますし、逆に小さすぎると表示が汚くなり、モデルのクオリティが下がってしまいます。
また、その際 準備するベイクマップの縦横ピクセル数を2のべき乗（2,4,8,16,32,64…）で準備するのも効果的です。メモリ効率を最適化でき、表示をよりスムーズにできます。

2. カメラ表示領域の設定

Three.js内のカメラで表示領域を設定できますが、むだに広い領域に設定してしまうと、3Dモデルのない部分も描画し続けてしまい、余計な負荷がかかってしまいます。
カメラヘルパーでカメラの表示領域を確認し、3Dモデルを表示する領域より外を描画しないように調節することで、余計な負荷を減らすことができます。

3. ポリゴンの最適化

モデルは基本的に3Dソフト等で制作したものを読み込みますが、
その際モデルのポリゴン数（面の分割数）が多いと、それだけサイズも大きくなり、表示の際の負荷も大きくなってしまいます。

最適化のコツ
平面内の分割数はなるべく少なくし、網目などの複雑な造形はテクスチャで再現することでポリゴン数を大きく節約することができます。

ex. statsの使用

Three.jsには、現在のFPS（秒間フレーム数）等を表示するstats機能があります。
軽量化作業の際、まずstatsを表示し、数値を比較検証すると効果的です。

以上、3つのポイントをご紹介しました。
Web3Dは負荷が高くなりがちですので、最適化しないと 表示が重くなるだけでなく、PCやスマートフォンに大きな負荷をかけ、発熱やクラッシュの原因となりかねません。

上記のような方法で軽量化することにより、安定したWeb3Dコンテンツの制作が期待できると思われます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【実際にthree.jsを使用したサービスのご紹介】

①バーチャルギャラリーサービス
GALLERISTIIID（ギャラリスト3D）
https://gallerist3d.com

②3DデータをWebGLに変換。見積シミュレータが作れる
だれでもシミュレータ
https://daredemo-3dsim.com

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

こんにちは、エージーワークス小倉支店　増本　悟です。

本年も、2016年版として卓上カレンダーをご用意いたしました。
　
　
→ 無料 卓上カレンダー2016 ダウンロード
　
　
上記をA4サイズでプリントアウト後、トリムマークに合わせて切り離すことで

ディスクケース等に収めて使える、コンパクトな卓上カレンダーが出来上がります。

昨年同様、ご利用・編集もフリーとなっておりますので、ぜひご活用ください。

ご無沙汰しております、Ag works 小倉支店 増本 悟です。

少し前になりますが、地元に関して興味深い冊子を見つけましたので、二冊購入しました。
「東洋経済別冊 北九州の主張」、もう一つは「DOBOKU」 という情報誌です。
どちらも北九州市の見どころや歴史を、スタイリッシュな写真とともに紹介しています。

両方読んで感じたことは、エコロジーやハイテクなど、近年急進してきている部分をクローズアップしているな、ということです。
単に都会化しているのではなく、真に未来が地元から近づいて来ている感覚があり、今後への期待感を湧きたてます。
また、自分が気に入っているスポットが紹介されたときは妙な嬉しさを感じることも。小倉駅北口のあさの汐風公園はオススメです！それと、やはり北九州市立美術館が安定のかっこよさですね。

観光スポットや流行のB級グルメ等、エンターテイメント系の情報も多く、地元の人もそうでない人も楽しめる二冊です。

北九州の主張はインタビュー、DOBOKUは名前の通り建築関連のトピックが多いので、好みで選ぶのも良いかもしれません。

どちらも刊行してしばらく経っていますが、今年は市政50周年ということで、市内の本屋さんでは北九州コーナーを設けて長く置いているところも多いようです。興味等ありましたら、ご一読してみてはいかがでしょうか。

初めまして。Ag works内で主にCG・ムービー制作を担当しております、小倉支店の増本 悟と申します。
今後、制作課程での気がついたことやちょっとしたノウハウ、または身の回りのあれやこれ等記していければと思いますので、
以後よろしくお願いします。
さて、初回は一冊の本をご紹介したいと思います。実は先日社長から頂いた本でして(クリスマスプレゼント！)、
とても興味深く読み返させて頂いております。

「絵と言葉の一研究」寄藤文平著

寄藤氏は「大人たばこ養成講座」東京メトロ「家でやろう。」シリーズなどを手がけたグラフィックデザイナーさん。
本作では、自身の思い出からデザインや情報、もっと分解して
「絵」「言葉」「文字」をどう考えてきたか、
本の装丁を考える時のデザインアプローチ(30例以上！)
さらには書評まで、バラエティ溢れる内容になっております。

文体も絶妙なゆるさでとっても読みやすい、しかし着眼点が鋭く愉快で、
何度も読み返したい内容となっております。(ていうかデザインアプローチ覚えたい・・・)

素敵な本をいただいた社長に感謝です。
しかしこの表紙なんともいえない インパクト・・・みょうにツボにはまる。