普段 Adobe Illustrator や Photoshop を使ってデザイン制作をしている、あるいはそれと同等のPCスキルがある方向けの Blender というアプリケーションを使った3DCG制作の入門チュートリアルを公開しました。
こちらのページで体験できます。
Blenderとは
Blender とは、オープンソースで公開され無償で利用できる統合型3DCGソフトウェアです。
※統合型3DCGソフトウェア: 要するに色々なことができる3DCGソフトのこと。「モデリング」とよばれる形を作る機能はもちろん、アニメーションやレンダリング、動画編集など色々なことができる。
無償というと「低機能ではないのか」と思われる方もいらっしゃるかもしれませんが、Blender は数十万円の有償ソフトと比べても劣らないほど多機能なソフトウェアです。
おそらく、一生かけてもすべての機能を使いこなすことは難しいでしょう。
このチュートリアルについて
このチュートリアルは、アドベンチャーゲームのようにクリックするとキャラクターの会話が進行していきます。
下のセリフ部分をクリック（またはタップ）すると進行します。選択肢はありません。
ほとんどのスクリーンショットは Retina ディスプレイで撮影しているため、Retina ディスプレイの Mac や iPad などでは細部まで鮮明に見えます。
会話シーン風 JavaScript ライブラリは MessageView.jsを使用し、独自に以下の機能を JavaScript ライブラリに追加して使用しています。
- 背景画像の表示
- 背景画像のプリロード（MacやPCなどメモリの多い環境で有効）
- ページ切り替え（1ページに全部をまとめると重いため、6ページに分割し自動遷移するようにしています）
- セリフの文字がクリックやドラッグで選択されないように制限
キャラクターの立ち絵は ジュエルセイバーFREE を使用しています。
チュートリアルの内容
- Blender ってなに？
- Blender のインストールと初期設定
- 視点の移動・XYZ軸・オブジェクトの移動
- オブジェクトの追加・立方体や球とは
- オブジェクトのサイズ変更
- 視点の切替・Pie Menus Official アドオン
なぜ「Adobeユーザーのための」なのか
このチュートリアルは「3DCG制作をしたことは全く無いけど興味がある方」で「Adobe Illustrator や Photoshop でデザイン制作をしたことがある方」向けに作っています。
3DCGへのとっかかりとして、
- Illustrator や Photoshop のツールは Blender ではここ
- Illustrator や Photoshop ではX,Y軸があるが、Blender ではZ軸もある
- 「バウンディングボックスでサイズ変更」と似た感覚で立方体のサイズを変更する
のように、なるべく似た感覚で操作できるよう説明しています。
Blender は、初期設定では独特な UI になっているため「使いづらい」と感じる方が多いようですが、ほんのちょっとの設定変更で Adobe ユーザーにも使いやすくなると思っています。
なぜWeb制作者がBlenderの使い方を知る必要があるのか
これまで、Webページで3D表現をしようとすると Flash Player などのプラグインに頼るしかありませんでしたが、現在は WebGL がスマートフォンを含むほとんどのWebブラウザーでサポートされたため、プラグイン無しでWebページで3D表現ができるようになりました。
また、ソーシャルゲームでも3D表現のものが増えてきましたが、下記の記事にあるように3DCG制作会社ではソーシャルゲームの仕事は単価があわないことが多く、これからWeb制作会社が自分たちで作らなければならないことも増えてくると思います。
そうなった時、高価な統合型3DCGソフトウェアではなく、オープンソースで無償で使用できる Blender はWeb業界でも広まる可能性があると考えています。
参考: ソーシャルゲーム開発担当者さまへ その条件では良い3DCG会社は見つかりません！ ｜ アニメゲームマンガ専門求人サイトラクジョブのブログ
このチュートリアルの方針
その他、以下のやり方で説明しています。
- キーボードショートカットは Windows・Mac 両方掲載
- UI は日本語
- テンキーのないPCのために、テンキーを使わずアドオンで視点変更
- 「ポリゴンとは何か」から解説
- オブジェクトの選択は右クリック
既知の不具合
画像の読み込みが遅れて、立ち絵が切り替わらなかったり背景画像が表示されないことがあります。
数秒待つと、正しい立ち絵や背景が表示されるはずです。
特にスマートフォンやタブレットではそうなりやすいため、安定した高速なネット回線に接続した PC からご覧になることをおすすめします。
その他不具合を発見した場合は @Stocker_jp まで教えていただけると幸いです。
