こんにちは。web3d開発リーダーの増本悟です。

今やWEB3Dに欠かせない3DCGソフトウェア「Blender」。
その「Blender」を使用したweb3d開発方法をシリーズとしてご案内してまいります。

【Blenderってなに？】

Blenderとは〜
モデリングから高品位なレンダリングやアニメーション、多種多様なデータ形式の入出力が行えるWinでもMacでも使用できる、無料の3DCGソフトウェアです。
現在は最新の3.2.2バージョンが公式サイトからダウンロードできます。

【Blenderを使用した主なWEB3D開発の流れ】

Blenderを使った、web用3Dデータ制作は主に以下の様な流れになります。

立方体・UV球・円柱といった基本形状や押し出し、回転体、ポリゴンなどで形状データを作る
もしくは他のアプリで制作した3Dモデルをインポートする
↓
テクスチャ画像を用意しマテリアルを作成
↓
そのマテリアルを形状データにマッピング設定
↓
「obj」「dae」「gltf」など、web3dで利用できる形式に形状データをエクスポート
↓
形状データのエクスポートと同時に、各形式に応じたマテリアル設定がエクスポートされる
↓
three.jsなど、web3dのライブラリに読み込む

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

【Blenderの画面とメニュー】

Blenderの主な画面とメニューは以下になります。

①移動・回転・スケール等の操作を行うツールのパネルです。

②ファイルを開く・保存する、各種変種や設定を行うメニューです。

③ウィンドウやその他パネルのレイアウトを設定するメニューです。

④オブジェクトの編集モードの切り替えや、オブジェクトの追加や編集を行うメニューです。

⑤基準点やスナップなど操作と選択の詳細を設定するメニューです。

⑥3Dビューポート上での表示を設定するメニューです。

⑦オブジェクトの階層構造を表すパネルです。Blenderでは「アウトライナー」と呼びます。

⑧シーン内の各項目の詳細を設定するパネルです。

⑨選択したオブジェクトや3Dビューポート、ツールの設定を編集するパネルです。

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

【Blenderの主な操作法】
①選択
選択はオブジェクトを直接「左クリック」で行います。

ポリゴンなどを選択したい場合は、オブジェクトを「編集モード」に切り替えます。

ここで「ポリゴン」「エッジ」「ポイント」と選択要素を選びます。

複数のオブジェクトをまとめて選択する場合は「ボックス選択ツール」を使用します。選択ツールには他にも「長押し」「サークル選択」「投げ縄選択」と種類があり、選択範囲の形等が変わります。詳しくは公式マニュアルをご確認ください。

②移動・回転・スケール
操作したオブジェクトの位置・回転・スケール等の状態は、右上矢印ボタンを押して展開したプロパティウィンドウで確認できます。

③コピー
オブジェクトを選択したまま「右クリック」でコンテクストメニューを開きます。
「オブジェクトをコピー」でコピー、「オブジェクトを貼付」でコピーしたオブジェクトを同位置に貼り付けます。
「右クリック」のかわりにショートカット「コマンドキー+Cキー（コピー）」「コマンド+Vキー（貼付）」でも同様です。

④複製
同じくオブジェクトを選択したままコンテクストメニューを開き、
「オブジェクトを複製」を選ぶと、複製したオブジェクトがカーソルに追従し、その後クリックで任意の場所に配置することができます。
「右クリック」のかわりにショートカット「shiftキー + Dキー」でも同様です。

⑤削除
同コンテクストメニューを開いた状態で「削除」を選ぶと削除できます。
ショートカット「Xキー」「deleteキー」でも同様です。

以上、「Blenderとは」「Blenderの画面とメニュー」「Blenderの主な操作法」のご案内でした。
次回は「Blenderで操作するオブジェクト」「マテリアルの準備」についてご案内します。

blenderクリエイターにおすすめ情報！

blenderデータでARシミュレータが作れる！
だれでもシミュレータ
https://daredemo-3dsim.com

弊社で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例以上！)
さらには書評まで、バラエティ溢れる内容になっております。

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

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