編集部が厳選した「いま、みんなに見てほしいまとめ」をイチオシとして紹介しています!グサッと刺さる良質まとめはこちら!

3Dヘルボーイの技術解説

僕がファンメイドムービーとして制作して1月30日に公開したヘルボーイの短編映像で使われた技術を解説してまとめました。 基本的には「絵として良い3D」をモットーに作られたものです。 良ければ見てください!
シェーダー ヘルボーイ アート Hellboy UNITY 3D
10194view 11コメント
95
ログインして広告を非表示にする
奈良だけど千葉 @naraken3655
ヘルボーイファンの皆様!お待たせしました! 本日ヘルボーイ・イン・ヘルの発売の盛り上がりに合わせて15秒の短編アニメを公開します!! 「破滅の種子」のワンシーンです。かなりカッコよく仕上がったと思うので是非とも見てください!!! pic.twitter.com/7Hryd5q6uW
奈良だけど千葉 @naraken3655
ヘルボーイでやった線画の解説をしてみようと思います。 実はその線画ですが集大成はこの蛙人間君だったりします。 以下の動画は僕がイイ感じの出来になったと思ってる蛙人間君の口周りと壺です。 #hellboy #3dart pic.twitter.com/6RKyFcEOA1
奈良だけど千葉 @naraken3655
この絵を構成している要素は以下の5つの要素です。 ①、内側の線画 ②、影に隣接した線画 ③、アウトライン ④、影 ⑤、色 この中の①~③について解説いたします。 pic.twitter.com/cCjtvy8pY2
 拡大
 拡大
 拡大
奈良だけど千葉 @naraken3655
①、内側の線画 これは線画専用の白黒テクスチャを用意しています。 この線画は条件によって太さが変化します。その基準となるのが 線のボケ幅で、これが広いと強弱が大きく変化します。 逆にボケのない状態で線を描くと、強弱の変化はつきません。 pic.twitter.com/gEfXafTi3r
 拡大
奈良だけど千葉 @naraken3655
①、内側の線画の続き… そしてその線の強弱は以下の2つの条件で変化します。 ・カメラから正面に近いほど太く、遠いほど細く。 ・ライトが正面から当たると太く、影に近いほど細く。 つまりカメラ×ライト×線のボケ幅の三要素で強弱が変化するようになっています。 pic.twitter.com/qqvUa0I2sV
奈良だけど千葉 @naraken3655
②、影に隣接した線画 この表現はヘルボーイではやっていません。 蛙人間やツボでこの表現をしました。原作の描写で、影に隣接する部分のみにでる線があったのでそこだけに表示する白黒テクスチャを別途に描いて描画しました。 pic.twitter.com/2rE38YUfkT
 拡大
奈良だけど千葉 @naraken3655
②、影に隣接した線画の続き… 動画にするとこんな感じです。見やすくするために影を薄くしています。 非常に分かりにくいですが、この線画は輪郭に近い部分の線をマスクして消しています。理由としてはアウトラインと合流してゴチャつくのを防ぐためです。動画の最後の方でわかります。 pic.twitter.com/5UHhps5arE
奈良だけど千葉 @naraken3655
【①、②のテクスチャについて】 専用の白黒テクスチャをRGBチャンネルを利用して以下のような構成でまとめています。 ・R →線画情報 ・G →影に隣接した部分のみに表示される線画情報 ・B →エミッション設定 一つにまとめる事でテクスチャ枚数も減り、容量も抑えられます。 pic.twitter.com/CrfM7E1I7u
 拡大
奈良だけど千葉 @naraken3655
【①、②のテクスチャについて】の続き… このテクスチャはSubstance Painter 2で描いており、以下のようにチャンネルで分けて描いています。 ・Ambient occlusion  → R → 線画情報 ・Roughness → G → 影に隣接した部分のみに表示される線画情報 ・Metallic → B → エミッション設定 pic.twitter.com/Qe7KTQxsj0
 拡大
奈良だけど千葉 @naraken3655
【①、②のテクスチャついて】の続き、その2… Substance Painterを使用した理由としては… ・ノーマルマップが焼けて便利 ・直接モデルを見ながら描ける ・アクションのブラーやレベル補正が便利 ・自分でテクスチャの形式を自由に編集できる(RGBテクスチャの形式など) などがあります。
奈良だけど千葉 @naraken3655
【①、②のテクスチャについて】の続き、その3… 個人的にSubstance Painterはビューワーが物理ベースだというだけで、自分が求めているテクスチャが製作、出力できるならかなり便利だと考えています。 特に直接ペイントできる事とアクションやフィルターを使用して描く事ができるのは大きいです。
奈良だけど千葉 @naraken3655
③、アウトライン ヘルボーイ関連のモデルを見るとアウトラインにガタツキがあるのが見て取れます。 これは、リムライトで使用するシェーディング(モデルの輪郭にそった陰影)を物凄く細くして二階調化したものを使用しています。これにより法線情報の歪みがそのままアウトラインに反映されます。 pic.twitter.com/EOfb1rICap
 拡大
 拡大
奈良だけど千葉 @naraken3655
③、アウトラインの続き、その1… このアウトラインはノーマルマップの影響を受ける事で強弱がよりしっかりついたり、内側に食い込んだようなラインを発生させたりします。 pic.twitter.com/1HNHeatn2q
 拡大
 拡大
奈良だけど千葉 @naraken3655
③、アウトラインの続き、その2… この方法だとモデル法線とカメラの影響で線に強弱がでますが、場所によって場全く線がでません。 そこで法線反転のラインを一律の太さで出すことで最低限のアウトラインを確保して、どの角度からみてもいい感じのアウトラインが表示されるようにしています。 pic.twitter.com/Cw3GtQqhiO
 拡大
奈良だけど千葉 @naraken3655
一通りの解説を読んだ方は、僕が以前投稿したヘルボーイの動画を見てみてください。 今までまとめた要素がどの様に動いているか確認できます。 twitter.com/naraken3655/st…
奈良だけど千葉 @naraken3655
先ほどの動画や以下のスクショを見たとき、パッと見た感じでどこからどこまでが①~④の要素なのか分かりにくいのではと思います。 個人的にこの絵の複雑さが「絵っぽさ」「アナログっぽさ」の一つではないかと考えています。 pic.twitter.com/7iwUlouDAl
 拡大
 拡大
 拡大
 拡大
奈良だけど千葉 @naraken3655
例えば漫画を見たときに様々な画材を使っている事がなんとなく見て取れますが、具体的にどこまでがどの画材で描かれているか判断しにくいと思います。 僕が製作したヘルボーイの場合は①~④までの要素を最終的に黒ベタの情報としてまとめる事で、その曖昧さ複雑さが表現できればと考えていました。
奈良だけど千葉 @naraken3655
そこに線画が変化する要素をプラスする事で「毎フレームごとに人が描いているかのような強弱のある線画」を表現できれば非常に自然な絵で動かせると考えました。 これらが①~④までの要素の狙いです。
奈良だけど千葉 @naraken3655
純粋なトゥーンというよりかなりコミックの絵を意識して組み立てた絵作りですが、読んでいただいた方々の何か役に立てれればと思います。 かなり長くなってしまいましたが読んでいただき、ありがとうございました!

コメント

奈良だけど千葉 @naraken3655 2018-05-16 06:44:51
ありがとうございます! 今後またSubstance Painterを具体的にどう使ったの?とか、ノードの組み合わせは?など細々した所などが解説できればな~って考えてます!
水天 一碧 @takuomizuno 2018-05-16 08:55:01
Substance Painterはこれから勉強を始める予定だけれど、これはホント凄い!
奈良だけど千葉 @naraken3655 2018-05-16 09:44:57
takuomizuno ありがとうございます! Substance Painterに関しては本来の使い方と逸脱してるんですけどねw ですが、ビューアーを見ながら直感的に描けるのは非常に便利です! また今度その辺の解説をあっぷしようと思います!
たけ @Eo554IijYfHOQqw 2018-05-16 13:10:26
すごいなぁ、どこで止めても絵になる。
奈良だけど千葉 @naraken3655 2018-05-16 19:52:10
Eo554IijYfHOQqw ありがとうございます! 絵っぽさを追及できたらと思って試行錯誤しました!
tarako @AodamaSuika 2018-05-17 00:21:20
おおーすごい!仕組みは「なんかすごいことしてる」くらいしかわからないけど、アメコミの一枚絵がそのまま動き出したみたいだ。ただこの絵らしい絵柄で3DCGの動画らしいヌルヌル感?って言われてるやつだろうか、コマ数多いというか、手書きなら省略されそうな動きの省略がない状態というのか、でアニメーションするのが目に慣れてなくて、2次元?3次元?とすごく混乱するw
奈良だけど千葉 @naraken3655 2018-05-17 01:06:59
AodamaSuika 鋭いですね…本当にアニメに寄せるなら一秒あたり24枚で描写しないといけないのですが、この動画は30枚で描写しているので若干動きが多いんですよね。ちょっとしたヌルっと感はその影響ですね。 これは僕がゲーム業界の人間で、その方が作りやすかったという事情があります。恐らくその辺をちゃんとやってるドラゴンボールファイターズはヌルっとした印象はほぼ無いのではと思います。
たけ @Eo554IijYfHOQqw 2018-05-17 08:43:13
着地シーンだけ違和感があるなと思ってたけどやっと言語化できた。最初は地面にコートがピタッと地面に貼りつくことが気になってたんだけど、他の部分では大体滑らかに動いてる(落下中に腕が上がって足が伸びてるとか)けど着地の瞬間だけ完全に静止してて一枚絵的になってるからだ。 叩きつけられたコートの先が跳ねてよれる動きか、着地の衝撃で上半身が沈んで戻る時にコートが引っ張られる動きのどちらかが欲しい。
たけ @Eo554IijYfHOQqw 2018-05-17 08:45:13
(数時間かけて着地シーンを調整して最終的に「やってみたら微妙だな・・・これなら動かさないほうがよかったな」となっても責任は取らない)
奈良だけど千葉 @naraken3655 2018-05-17 08:58:03
Eo554IijYfHOQqw なんかずっと作業監視してたのでは?って感じのコメントですね(^^; そこに関してはマントの動きを入れると、マントが止まるまで次のシーンにいけないんですよね。一度動きをつけたら流として微妙で消しましたw もう少しアニメーターとして腕があったら同じ尺で自然に動かせたかもです。
ログインして広告を非表示にする
ログインして広告を非表示にする