ドキ♡ドキ †テクスチャ† 講習会

23
ドド ドド †ドドドドド†ドドド

Transcript of ドキ♡ドキ †テクスチャ† 講習会

Page 1: ドキ♡ドキ †テクスチャ† 講習会

ドキ♡ドキ†テクスチャ†講習会

Page 2: ドキ♡ドキ †テクスチャ† 講習会

自己紹介名前: Lineaやってること:ゲームつくったもの:

Armed CoreInfinity Masakari

とか

Page 3: ドキ♡ドキ †テクスチャ† 講習会

テクスチャ (texture)とは 3DCGの表面に画像ファイルを貼り付けることで模様や質感を表現する技法 正確には”テクスチャマッピング”

本来は織物の質感を意味する語テクスチャなし テクスチャあり

Page 4: ドキ♡ドキ †テクスチャ† 講習会

UV座標 テクスチャをモデルの表面の位置と対応させる座標 横軸 U,縦軸 Vで表す 3Dモデルの展開図に近い

対応してる

Page 5: ドキ♡ドキ †テクスチャ† 講習会

UV展開 モデルのUV座標を決める作業 UVの歪みは見た目の歪み

歪むと汚いし、テクスチャ作りにくい汚い UV

解像度のバランスが悪い

歪んでる

この UVに神はいない…

Page 6: ドキ♡ドキ †テクスチャ† 講習会

UV展開 UVの切れ目がテクスチャの切れ目

無理な展開にならないよう切れ目をつける

解像度が均一

歪んでない

UVを讃えよ !!!

キレイな UV

Page 7: ドキ♡ドキ †テクスチャ† 講習会

テクスチャマッピングの種類 カラー

表面の色情報を扱う基本的なテクスチャ 法線 (ノーマル )

凹凸を表現するための法線情報 自己発光

発光表現の色 ,明るさを扱う 環境

周囲からの映り込みや背景を扱うパノラマのテクスチャ

Page 8: ドキ♡ドキ †テクスチャ† 講習会

テクスチャマッピングの効果Unity5使用カラー カラー +ノーマル

カラー +ノーマル+自己発光

カラー +ノーマル+自己発光 +環境マップ

凹んでる

明るい 空の色が映り込む

Page 9: ドキ♡ドキ †テクスチャ† 講習会

テクスチャ塗ろうなテクスチャ(カラー)の作り方1. 画像加工2. KIAI でイカする(塗る)3. 3D ペイント(チート)

Page 10: ドキ♡ドキ †テクスチャ† 講習会

1.画像加工 既存の Sozaiを切り貼りして作る

このドアのテクスチャを作るにゃ

全国のシアンちゃんゴメンな

Page 11: ドキ♡ドキ †テクスチャ† 講習会

画像加工で作るにゃ

1.下地の木目画像を貼るにゃ 2.解像度が低いので縮小するにゃ

3.コピペで枠部分全体に貼るにゃ 4.適当な窓付きドア画像を貼るにゃ

Page 12: ドキ♡ドキ †テクスチャ† 講習会

画像加工で作るにゃ

5.窓を切り抜いて UVの枠に合わせるにゃ 6.ドアノブ用画像を貼るにゃ

7.ドアノブを切り抜いて配置するにゃ 完成にゃ !!

Page 13: ドキ♡ドキ †テクスチャ† 講習会

2.闇(塗る) 要はお絵かき オタクの好きな女の子作るなら多分必須 まぁ闇(作業量的に)

月並みですが箱にサイコロの目でも描いてみましょうSAIベースで話すので適当に自分の使うペイントソフトで読み替えてね

Page 14: ドキ♡ドキ †テクスチャ† 講習会

2.闇のゲーム(陰影の塗り方)

1.下地の白と赤を描く 2.乗算レイヤーで暗く塗る

3.消しゴム(濃度 7,80)で左上を少し残すように削る4.二段目の凹み用に乗算レイヤーで塗る

Page 15: ドキ♡ドキ †テクスチャ† 講習会

2.闇のゲーム(陰影の塗り方)

5.3と同様に消しゴムで削る(ちょっと暗めに )

6. 右下 (光が当たる )をスクリーンレイヤーでなぞり、明るくする

7.明るくした部分の端を消しゴムで薄くしてなじませる 8.スクリーンレイヤーでハイライトを大きめに描く

Page 16: ドキ♡ドキ †テクスチャ† 講習会

2.闇のゲーム(陰影の塗り方)

9.ぼかしツールでハイライトをぼかす 10.溝になる線を乗算で描く

11.消しゴムで右下を削る 12.スクリーンで溝の (光が当たる側 )にハイライトを描く

薄い消しゴムでムラをつけるとそれっぽい

Page 17: ドキ♡ドキ †テクスチャ† 講習会

2.闇のゲーム(陰影の塗り方)

13.境界線に乗算で暗い線を引く 14.ぼかしで中心側に伸ばす

15.影になる右 ,下の境界に線を引き直す 16.暗い部分と明るい部位分の境界にハイライト線を引く

Page 18: ドキ♡ドキ †テクスチャ† 講習会

2.闇のゲーム(陰影の塗り方)

17.ぼかし、消しゴムでハイライトをなじませる

光の当たる部分は強く残す

ムラを付ける

凸凹を感じる

Page 19: ドキ♡ドキ †テクスチャ† 講習会

3.3Dペイント モデルに直接塗る方式

結果を見ながら描ける UV展開が適当でも良い

有名なソフト (有料 ) Substance Painter MARI

Page 20: ドキ♡ドキ †テクスチャ† 講習会

法線テクスチャの作り方1.ヘイトマップから変換

ヘイトマップ(高低を白黒で表したテクスチャ )を変換する Unityなどのエンジン内でできる Gimpのプラグインもオススメ

2.ハイポリゴンで作った凹凸を焼きこむ ローポリモデルに凹凸情報を焼きこむ MayaなどのCGソフトで行う

3.強い (有料 )ソフトを使う 陰影のあるカラー画像を解析してノーマルを作るソフトが有る

BitMap2Material,MindTex

Page 21: ドキ♡ドキ †テクスチャ† 講習会

テクスチャとモデルの使い分け モデルで細かい凹凸を表現するのは高コスト

ゲームなどリアルタイム処理では向かない モデルで細かい色分けをするのも高コスト

色ごとにマテリアルが必要になる マテリアル数は描画命令数に直結

細かい部分はテクスチャで

Page 22: ドキ♡ドキ †テクスチャ† 講習会

最後に テクスチャはこわくない

お絵かきです、お絵かきしましょう 課金すれば楽になります !!

テクスチャはいいやつ テクスチャでしかできない表現は多い 複数マッピングを組み合わせて豊かな表現ができる

† なかよし†

Page 23: ドキ♡ドキ †テクスチャ† 講習会

カラーと法線マップの補足Q.カラーで陰影描かなくても法線マップだけで凹凸は表現できるのでは ?A.法線マップの影は強く出ないので遠くからや強調したい場所では目立たなくなる

カラー +法線 法線のみ