Duckathon ar kumamoto

Duckathon

#AR_Kumamoto

おねがい

本日利用させていただいている駅前スペース

へのFacebookチェックインをお願いします。

運営の紹介

duckathon開催に関する運営を紹介します

自己紹介

名前：宮田　尚行

仕事：IT系のフリーランス

FBアイコン→

必要なもの

・blender (Ver 2.75以降)・3つボタンマウス・gimp (Ver 2.8.10以降)

アジェンダ

+ blenderの説明

+ 初期設定を行う

+ メッシュを配置してみる

+ メッシュを変形してみる

+ メッシュを動かしてみる

+ メッシュを切ってみる

+ メッシュの押し出し

+ メッシュの形を整える

+ ミラーを付ける

+ マテリアルとカラーを入れる

+ テクスチャを張り付ける

+ レンダリングする 6

duckly

low

high

どんな感じで進むか

+ blenderの説明












duckly

low

high


+ blenderの説明












duckly

low

high

+ blenderの説明











+ レンダリングする


9

duckly

low

high

+ blenderの説明













10

duckly

low

high

+ blenderの説明













11

duckly

low

high

+ blenderの説明













12

duckly

low

high

+ blenderの説明













13

duckly

low

high

+ blenderの説明













14

duckly

low

high

+ blenderの説明













15

duckly

low

high

+ blenderの説明













16

duckly

low

high

blenderの説明

blenderは高機能でかつ無料の3Dモデリングソフト。

マスターするとこんなこともできる。(宮田はまだここまでできません）

https://www.youtube.com/watch?v=i4ySFm4ey9U

17

https://www.youtube.com/watch?v=NZIJOdU5ceU

https://www.youtube.com/watch?v=i4ySFm4ey9U

https://www.youtube.com/watch?v=NZIJOdU5ceU

blenderの説明

3Dモデリングソフトとは

3DCGを作成するソフトには、3DCADと3Dモデリングの2つがある。

+ 3D CAD

　位置や大きさなどを指定しながら作成する。主に部品の作成などで利用する。

+ 3Dモデリング

　視覚的に操作しながら作成する。キャラクターの作成などで利用する。

18

blenderの説明

よく出る単語：ワールド。作成する3Dモデルすべてを含む全体の座標系を指す。

19

ワールドを表す平面

ローカル座標。ワールドと反対に、オブジェクトの座標を表す。

「ワールド＝全体、ローカル＝作ってるモデル」と考えておけばOK

blenderの説明

早速blenderをひらいてみましょう！！

20

スプラッシュ画面は[esc]キーで閉じる。

blenderの説明

画面の各部品を軽く説明。

21

blenderの説明

各項目の名称ヘッダ

3Dビュー

アウトライナ

プロパティエディタ

22

blenderの説明

3Dビューへの操作はキーボードだけではなく、ツールシェルフからも行える。

ツールシェルフ

23

blenderの説明

blenderの3Dビューで使う2つのカーソル

24

3Dカーソル : ワールド全体の中の位置指定

オブジェクトカーソル : 選択されているオブジェクトの中心位置を表す。

blenderの説明

ツールシェルフが表示されていない場合は、+ボタンをドラッグして表示する。

+ボタンは最小化時に表示される

25

blenderの説明

右側のパネルは、選択した点や面に対しての操作が行える。今回の勉強会ではあまり使わないが、次第に使うようになる。

26

表示されていない場合は、”+”のドラッグで引き出せる。

blenderの説明

http://www.blender3d.biz/basis_windowlayout_defaultlayout.html

まだまだ盛りだくさんの項目があるので、興味のある方は下記リンクを参照。

27



初期設定を行う

duckathon事前準備で行ってもらったキーコンフィグに関する補足。キーコンフィグの変更を行った理由は、キーボードの組み合わせをミスするとblender上、別操作と見なされるため。

28

辺の移動([g]->[y]の組み合わせ)を誤って、[y]のみを押してしまった為に、辺が分離してしまった例。

メッシュを配置してみる

29


まずは画面をぐりぐり動かして感覚をつかむ。

その１：視点の拡大・縮小 : 真ん中ボタンスクロール

30

1.スクロールして拡大。

2.逆スクロールで縮小



その２：視点の回転 : 真ん中ボタンを押したままドラッグ

31

1.真ん中ボタンを押下

2.押下したままマウス移動で回転



その3：視点の横移動 : [Ctrl]押しながらスクロール

32

1.[Ctrl]を押下

2.押下したままスクロール



その4：視点の縦移動 : [Shift]押しながらスクロール

33

1.[Shift]を押下

2.押下したままスクロール



その5：3Dカーソルの移動

34

左クリックで位置指定

[Shift]+[c]でワールドの中心位置へ移動


左クリックで場所を指定して、プリミティブメッシュをクリックすると追加できる。

1.3Dビュー上の、メッシュを配置したい箇所を左クリック

2.ツールシェルフの作成タブをクリック

3.メッシュの中から好きなものをクリック35


視点を動かしながら、いろんな場所に配置してみる。

視点の拡大・移動

+ 拡大・縮小 : スクロール

+ 回転 : 真ん中ボタン押したままドラッグ

+ 横移動 : Ctrl押したままスクロール

+ 縦移動 : Shift押したままスクロール

+ 3Dカーソルを原点へ移動 : Shift + C

36


次の章に入る前に、追加したメッシュを削除する。

1.削除したいメッシュを右クリックで選択

2.[x]を押下して削除メニューを出す。

3.削除の項目をクリック

37


blenderに戻り、[Ctrl]+[s]を押下してファイル保存ダイアログを開く。

1.[Ctrl]+[s]を押下

38

注意 : Blenderに限らず、モデリングソフトは落ちやすいので、こまめに保存をする事！

Save Point


ファイル保存ダイアログで保存先・ファイル名を指定して保存。

39

1.デスクトップ直下のduckディレクトリを選択する。 2.ファイル名は”duck.blend”

3.”blendファイルを保存”をクリック

メッシュを変形してみる

40


アヒルの胴体となるメッシュを追加する。

Shift+Cで原点へ移動し、プリミティブの立方体メッシュを追加する。

1.[Shift]+[c]を押下して原点へカーソルを移動させる。

2.プリミティブメッシュの立方体を左クリックして追加

41


まずはy軸方向に拡大する。

1.[s]押下後に[y]を押下して、y軸方向の拡大・縮小を指定する

2.[2]を入力して拡大する。

3.[Enter]を押下して決定する。

42


次にx軸方向に拡大する。

1.[s]押下後に[x]を押下して、x軸方向の拡大・縮小を指定する。

2.[1.5]を入力してx軸方向に拡大する。

3.[Enter]を押下して大きさを決定する。43


次にz軸方向に縮小する。

1.[s]押下後に[z]を押下して、z軸方向の拡大・縮小を指定する。

2.[0.5]を入力してz軸方向に縮小する。

3.[Enter]を押下して大きさを決定する。44


補足：数値の入力を行う代わりに、マウスで拡大・縮小が行える。

1.[s]押下後に[x]を押下して、x軸方向の拡大・縮小を指定する。

2.マウスを移動してx軸方向に拡大する。

3.左クリックで大きさを決定する。

例）x軸の拡大

45


下図の様になっていればＯＫ。

46

Save Point

メッシュを動かしてみる

最後にz軸の上方に移動する。

1.[g]押下後[z]押下で、[z]軸移動を指定する。

2.[0.5]を入力してz軸上方に移動する。

3.[Enter]を押下して位置を決定する。47


補足：移動も数値の入力を行う代わりに、マウスで行える。

1.[g]押下後[z]押下で、[z]軸移動を指定する。

2.マウスを移動させて立方体をz軸方向に移動する。

3.底面がz軸と重なるぐらいで左クリックして決定。

例)z軸方向の移動

48


下記の様になっていればＯＫ

49

Save Point

メッシュを切ってみる

50


先ほど変形させたメッシュに切れ目をいれて、不要な面を削除してゆく。

まずは、3Dビューのモードを編集モードへ変更。

モードをクリックし、出てきたリストの中から編集モードをクリックする。

51


視点を回転させてy軸(緑の矢印)が手前を向く状態にする。

視点の回転 : 真ん中ボタン押したままドラッグ

y軸の矢印が手前を向いている状態

52


ツールシェルフから「ループカットとスライド」を選択。

1.ツールシェルフからツールのタブをクリック

2.ループカットとスライドをクリック

53


まずは切る方向を決定する。マウスカーソルをメッシュに合わせて、図のようにピンクの

ラインがy軸(緑の矢印)と合う位置を見つける。

ループカットとスライドは、マウスカーソルの位置により、縦/横の指定が切り替わる。

54


ピンクのラインとy軸があった状態でEnterを二回押下。この操作でy軸に沿った中間位置

で切り込みを入れる事ができる。

ピンクのラインを緑の矢印(y軸)と沿う様に合わせてEnterを二回。

55


3Dビューのフッタ部から点選択を選び、点の選択を行えるようにする。

点選択モードへ変更

56


ループカットを切った直後は切った箇所が選択状態になっているため、

選択を解除する。

57

ループカットのラインが選択されている状態で、[a]押下。選択が解除される。


[Shift]を押下しながらx軸のプラス側の4点を右クリックで選択してゆく。






4点を選択すると、1面が選択されている状態になる。

58X軸(赤矢印)が手前を向くように視点を回転させる。


[x]を押下し、削除メニューを出す。メニューの中から「頂点」を選択。

59


切った結果が下記の様になっていればＯＫ。

60

Save Point


胴体を半分に切れたので、次に頭の半分を作成する。

[a]を押下してメッシュを全選択する。

61


ツールシェルフから「ループカットとスライド」を選択。

1.ツールシェルフからツールのタブをクリック

2.ループカットとスライドをクリック

62


下記図を参考に、ピンクの線がy軸と平行になるような個所へマウスカーソルを動かす。

63


切る方向が決まったら、左クリックで方向を確定する。その後、下図を参照に切る位置を

決定し、再度左クリックする。

1.切る方向を決定して左クリック。

2.マウスを動かし、切る位置を決定し左クリック。

この切れ目が首の左側のラインになる。

64


同じ要領で今度は首の前後のラインを切ってゆく。

1.切る方向をx軸と平行になるように決定

2.マウスを動かし、切る位置を決定し左クリック。

首の前後2箇所の切れ目を入れる。

65


こんな感じになってればOK

66

メッシュの押し出し

67


首の面を切り出し終わったので、今度は首を出してゆく。

選択モードを面選択へ切り替える。

面選択モード切替

68


首を出す面を右クリックで選択する。

69


押し出しを利用して首を伸ばす。胴体の倍位を目安に位置を決定する。

1.[e]を押下して押し出しを開始する。

2.マウスカーソルを動かして高さを調整し、左クリックで決定する。

70


下記図の様になっていればＯＫ。

71

Save Point

メッシュの形を整える

大まかな形ができた。ここからは、下記の操作を使ってすこしずつアヒルへ近づけてゆ

く。

+ ループカットとスライド。

+ 点・辺・面の選択。及び[Shift]押しながら選択(複数選択)。

+ 移動([g]押下後[x or y or z]。マウスカーソル移動で一調整後左クリックで決定。

72


尻尾を出す。ループカットで切れ目を入れ、新しくできた2面を押し出す。

ループカット押し出し

73

新しい2面を選択

注意: 1面ずつ押し出しではなく、2面を選択して同時に押し出しを行う。


嘴(くちばし)を出す。

ループカット押し出し

74


面の押し出しにより、不要な面が出来ている事を確認する。

マウスの真ん中ボタン+マウス移動で、視点を回転させてると

内側に不要な面が出来ている事がわかる。75


不要な面を削除する為、辺の選択モードへ切り替える

76

辺の選択へ切り替え


不要な下記5辺を右クリックで選択する。

77頭側の4辺尻尾の1辺


[x]キー押下後、”辺”を選択。

78


胴体が四角のままなので、丸みを持たせてゆく。

まずは、視点の回転を使って下記の様に胴体の外側が見えるようにする。

79マウスの真ん中ボタン+マウス移動


ループカットとスライドを利用して胴体に切れ目を入れる。

80

1.ツールシェルフからループカットとスライドをクリック

3.一回左クリックで方向を確定させた後、[esc]で切れ込み位置を確定させる。

2.ピンクのラインが図の様に表示されるようマウスを移動させる


点選択モードへ切り替える。

81

点の選択へ切り替え


丸みを出す点を選択する

82

1.[a]を押下して選択を解除する。

2.[Shift]を押しながら下記3箇所を右クリックで選択する。


点の移動で丸みを出してゆく

83

1.[g]押下後に[x]押下で、X軸の移動を指定する。

2.マウスを移動させて丸みを出す

3.ちょうどよい箇所で左クリックして位置を確定させる。


胴体を丸っぽくする。

前面も同様に背面も同様

84


頭を丸っぽくする。

ループカット点の移動

85


頭をさらに丸っぽくする。

ループカット点の移動ループカット

86


そのほか気になる部分を調整してゆく。

嘴の切れ目尻尾87


こんな感じ

後からでも調整は可能なので、ある程度形になっていればOK。 88

Save Point

ミラーを適用する

89


この章では、左側に対しミラーを適用し、左右対象のメッシュを作成する。

また、ミラー適用後にメッシュをなめらかにする処理を加える。

まず、編集モードへ切り替える。

90

編集モードへの切り替え


次にメッシュを全選択する。

どこか一か所を右クリックで選択後、[a]押下で全選択。

91

全体がオレンジ色になっていればＯＫ。


プロパティエディタのモディファイアータブをクリックする。

モディファイアータブ

92


追加をクリックし、出てきた候補からミラーを選択する。

93


アヒルの向かって左側が表示される。

94


続いて追加から細分割曲面を選択

95


曲面がなめらかになる

96



97


全体の形がつかめたので、点・辺・面の移動とループカットを駆使してモデルに近づけ

る。

98

Save Point

マテリアルとカラーを追加する

このままでは灰色のアヒルのままなので、体に色を付けてゆく。

まずは編集モードに切り替わっている事を確認し、メッシュの全選択を行う。

1.編集モードに変更

2.[a]押下で全選択

99


プロパティエディタからマテリアルを選択する。

マテリアルを選択

100


名称をダブルクリックして”Material”を”body”へ変更する。

また、”F”ボタンをクリックしてblenderファイルへの取り込みを指定する。

1.名前をダブルクリックしてbodyへ変更 2.”F”ボタンをクリック

(“F”ボタンに関しては最後に補足します)

101※”Material”が無い時は、新規ボタンをクリック


ディフューズをクリックし、カラーパレットから黄色を選択する。

1.ディフューズをクリック

2.黄色を選択

102


下図の通り、全体に黄色が適用されればＯＫ。

103


次に嘴へカラーを適用する。面選択へ切り替える。


104


嘴の部分を右クリックで選択する。

嘴を面選択

105


プロパティエディタのマテリアルスロットを追加する。

“+”ボタンをクリック

マテリアルスロットが増える。

106


新規マテリアルを作成し、名前をbeakへ変更する。

名称をダブルクリックしてbeakへ変更

1.新規ボタンクリック

107


作成したbeakマテリアルのディフューズを赤に設定する。

1.ディフューズをクリック2.赤色をクリック

108


選択されている嘴の面にマテリアルを割り当てる。

1.割り当てボタンクリック

109


下図の様に嘴に赤が適用されていればＯＫ。

110


こんな感じ

111

Save Point

テクスチャを貼り付ける

現段階でだいぶんアヒルに近づいたものの、このアヒルには目がない。

オブジェクトのポリゴンを一枚の絵と対応させる”テクスチャ”を利用して、

アヒルに目を追加する。

112


まずはオブジェクトモードへ切り替える。

113


メッシュを右クリックで選択し、[Ctrl]+[a]で適用メニューを出し、縮小拡大を選択する。

1.メッシュを右クリックで選択

3.拡大縮小をクリックで選択

2.[Ctrl]+[a]で適用メニューを出す。

この操作がないと後々のUV展開でエラーが発生します。

114


再び編集モードへ変更する。

115


メッシュが全選択されている場合は、[a]押下で全選択を解除する。

[a]押下で全選択解除

116


辺選択へ切り替える。

辺選択への切り替え

117


目の位置を縁取る辺を、Shiftを押しながら全て選択する。

118


ツールシェルフのシェーディング/UVタブをクリック

シェーディング/UVタブをクリックして表示する。

119


UVマッピングの”シームを付ける”をクリック

テクスチャを適用する際の切り取り線を指定している。

120


[a]押下で選択を解除した時に、下図の通り赤枠になっていればＯＫ．

シームが適用されている辺は赤枠になる。

121


再度メッシュを全選択する。

[a]押下で全選択

122


ツールシェルフから展開をクリックし、メニューから展開を選択する。

123


ビューをUVへ切り替える。

1.ビューの切り替えをクリック

2.UV/画像エディタをクリック

124



展開されていない場合は、3Dビューのオブジェクトモードに切り替えて拡大縮小(P75)を行う。

125

シームを付けた部分が切り離されてマッピングされている事が確認できる。


新規画像の作成を行う。

新規ボタンをクリック

126


新規画像をduck_textureとして作成する。

1.名前をduck_textureへ変更。そのほかはデフォルトでＯＫ。

2.”OK”ボタンをクリック

127


作業しやすい様に画面の分割を行う。

ビューの端を左にドラッグして画面を分割する。

128



129


右側のビューを3Dビューへ切り替える。

1.ビューの切り替えをクリック

2.3Dビューをクリック

130


UVの面と3Dの面がどのようにマッピングされているかを確認する為に、

3Dビューの選択モードを面に変更する。

131



3Dビューの面選択を利用し、どの方向に面が展開されているかを確認する。

1.目の面をクリック2.どのようにマッピングされているかを確認

132


レンダータブを選択する。

133

レンダーをクリック


ベイクを行う。

134

1.ベイクモードを”テクスチャ”へ変更

2.ベイクをクリック


UV/画像に色がつくことを確認

135


画像の保存を行う。

136

1.”画像”メニューをクリック

2.”コピーを保存”を選択


デスクトップ直下のduckディレクトリへ保存

137

ファイル名:duck_texture.png※表示されている名前が上記以外の場合

Save Point


textureを編集する。まずはgimpを起動する。

138


ファイルメニューから”開く/インポート”を選択。

1.ファイルメニューをクリック 2.”開く/インポート”をクリック。

139


先ほど保存したデスクトップ\duck\duck_texture.pngを選択する。

1.duck_texture.pngを選択。

2.”開く”をクリック

140


先ほど保存したイメージが表示されればＯＫ。

141


ツールボックスの設定など、画像を編集する為の準備を行う。

142

ツールボックス


まずは、ツールボックスを表示する。

143

1.ウィンドウメニューをクリック

2.ツールボックスをクリック

既に表示されている場合はそのままでOK。


ツールオプションを表示する。

144

1.ウィンドウメニューをクリック 2.ドッキング可能なダイアログ

-> ツールオプションをクリック

既に表示されている or ツールボックスにツールオプションが表示されている場合はそのままでOK。


ツールオプションをツールボックスに統合する

145

1.ツールオプションのタブ部分をドラッグする

2.ツールボックスの下の方でドロップ

ツールボックスにツールオプションが表示されている場合はそのままでOK。


再びgimpに戻り、鉛筆を選択する。

鉛筆をクリック

146


鉛筆サイズのデフォルトが20で大きいので、4に変更する。

2.サイズを4へ変更。

1.ツールオプションタブを選択。

147


ドラッグ操作で目を書く。

ドラッグ中に着色される。

GIMP操作について

+ キャンバスの拡大・縮小

　　＝＞ [Ctrl] + スクロール

+ キャンバスフォーカスの移動

　　＝＞ [真ん中ボタン] + マウス移動

148


Ctrl+Shift+Eで画像としてエクスポートする

保存先はデスクトップ直下のduckディレクトリ

149

ファイル名:duck_texture.png


分割を解除して3Dビューのみにする。

手順1.左側ビューの右上をいったん右側にドラッグ（ドロップしない)2.そのまま左側へドラッグしてドロップする。

150

統合操作時は薄い白の矢印が表示される。


編集モードである事を確認し、全選択する。

151


プロパティエディタのbodyマテリアルを選択する。

bodyマテリアルを選択。

152


そのままテクスチャタブをクリック

1.テクスチャタブをクリック

153

2.新規ボタンをクリック

既にテクスチャが存在する方はそのままでOK。


タイプから”画像または動画”をクリック

2.”画像または動画”をクリック

1.タイプをクリック

154


先ほど保存した画像を開く

2.”開く”をクリック

1.画像セクションまでスクロール

3.表示されたダイアログで先ほどエクスポートした画像を選択。

155


選択した画像をblenderに取り込む。

“F”ボタンクリック

156


テクスチャのマッピング形式をUVへ変更する。

2.”座標”をクリック

1.マッピングセクションまでスクロール

3.UVを選択

157


マップを先ほど展開したUVマップに設定する。

2.”UVMap”をクリック

1.マップをクリック

158


テクスチャが貼られているかを確認するため、モードをテクスチャペイントへ切り替える。

159

テクスチャペイントを選択


こんな感じになっていればOK。

160

Save Point

レンダリングする

ついに目がついたアヒルが完成した。ここでは”レンダリング”という機能を使って、光源

などを考慮した3DCGの描画を行う。

161


オブジェクトの表示モードをレンダリングへ切り替える

162

2.”レンダー”をクリック

1.オブジェクトのモードを変更


163

こんな感じ






+ 3Dカーソルを原点へ移動 : Shift + C


164

今の状態では面と面の境目がなめらかではない。

これから、角をなめらかにする。一旦シェーディングをソリッドへ戻す。

2.”ソリッド”をクリック

1.シェーディングのモードを変更

編集モードを選択


165

モードもテクスチャペイントから編集モードへ変更する。


166

ツールシェルフのシェーディング/UVから面のスムーズを指定する。

2.面のスムーズをクリック

1.シェーディング/UVのタブを選択


再度オブジェクトの表示モードをレンダリングへ切り替える

167

2.”レンダー”をクリック

1.オブジェクトのモードを変更


168

完成！！

Save Point

最後に

最初に行った誤操作対策の設定を戻す。ウィンドウメニューからユーザー設定を選択す

る。

169

2.ユーザー設定をクリック1.ファイルメニューをクリック

最後に

ユーザー設定から入力のタブを選択し、キーコンフィグのインポートをクリック

170

2.キーコンフィグをインポートをクリック

1.入力タブをクリック

最後に

ファイルを開くのダイアログが開いたら、事前でエクスポートした

default_keyconfig.pyをインポートする。

171

1.duckディレクトリのdefault_keyconfig.pyを選択

2.「キーコンフィグをインポート」をクリック

最後に

デフォルト状態を保持するため、ユーザ設定の保存をクリックする。

172

ユーザー設定の保存をクリック

ご清聴ありがとうございました！！

173

補足

・保存して再度開くと、マテリアル・テクスチャが消える。

　->マテリアル・テクスチャプロパティにある”F”をクリック。blenderのファイルにリソース

が取り込まれる。

・ミラーとくっついていない。

　-> 頂点を点選択し、x位置を0へ修正。

174

補足

・何か暗い。

　->光源の位置とプロパティを調整。

175

Duckathon ar kumamoto

Design