3DCG制作：【ZEPETO:1月リリースアイテム】Latex spherical green bag＆Fluorescence Green Dress
Jan 31, 2024
はじめに
こんにちは ☺
先日新たにリリースしましたアイテムの制作内容について簡単にご紹介できればと思います。
アイテムはこちらから↓ 今回はバッグとウェアを同時に紹介します！
バック（グリーン）：Latex spherical green bag
バック（シルバー）：Sparkling Spherical Silver bag
ドレス（グリーン）：Fluorescence Green Dress
ドレス（シルバー）：Sparkling Silver Dress
アイテムのテーマとデザイン
テーマ
今回の作品はaccelerando.Ai CONTEST #5 -Coordinated Bag-のコンテストで選ばれた作品です。
コンテストの内容は「既存のデザインウェアに合うバック」です。
ウェア：bright color
光沢のある素材感と特徴的なネオンカラーがテーマです。
全体のフォルムはシンプルながらも華やかさを感じさせられます。
バッグ：Handbag Designs
透明な素材と丸みのある形状はとてもユニークで可愛らしさを感じます。
未来的な印象もありますが、外側にファスナーで開閉できる大きなポケットやストラップの長さを調整できるバックルもあり実用的な面も見られます。
デザイン
シルエット
＜バッグ＞
丸いシルエットといっても、綺麗な球体状ではなく少し面があるような形にしています。
ポケットを付けたときの状態がより自然に見えるように、CLOでのシミュレーションと組み合わせながら最終的な形を決めていきました。
また肩紐の部分は当初そのまま引き延ばした状態で進めていましたが、その場合肩に通すのが難しく動きを付けたときに根本が歪んでしまうことがわかり、束ねる方法を採用しました。
＜ウエア＞
左右どちらの袖のシルエットを再現するのか、どちらとも面白いシルエットだったので悩みどころでした。
画像右側の袖はデザインが特徴的なのか、左右対称にしたときに全体のデザインの印象が変わったように思いました。
逆に画像左側の方はパフスリーブをたくし上げ、バンドで留まっているようなイメージが沸き、ボリュームのメリハリがあってバランスが良さそうだったので、そちらを採用することにしました。
ディティール
＜バッグ＞
バッグの中身にはギャザーを寄せたチュールのようなフリル形状を配置しています。
こちらはブログ中盤の制作のポイントにて少し触れていますが、なるべく布らしい動きになるように最後にアニメーションを設定しました。
＜ウエア＞
生成画像では巾があるベルトがウエストに収まっていますが、ZEPETO内で動かしたときに少し動きがある方が良さそう！という意見があり、ベルトをあえて垂らしその部分がすこし揺れるイメージで制作しました。
マテリアル
＜バッグ＞
ボディ部分・中のフリルの透過、バックルの金属感、ポケットや肩紐の質感など複数の要素が1つのアイテムに含まれているのでマップやシェーダーの使い分けが重要でした。
またボディの透過部分にもノーマルマップを入れて単調な質感にならないように調整しています。
＜ウェア＞
マテリアルは今回のデザイン要素として非常に重要なポイントだったので、質感を各プロセスの中でキープし、印象を変えないように気を付けながら作業を行いました。
このブログの後半部分で、シェーダーについて触れています。
こちらが今回制作したZEPETOのモデルになります。
今回の制作のポイント
バッグ：アニメーション
バックの中に作ったフリルを、少し揺れるようにするために最初にClothシミュレーションを試してみました。
Clothシミュレーションはその名の通り、ゲームやアプリ内で布のリアルな表現をする際に使われる方法です。
ただClothシミュレーションを設定する際には、実際にメッシュに対してシミュレーション範囲をペイントしてあげる必要があります。
今回の場合フリルがメッシュ内に配置している為、フリルだけにペイントすることが困難だったため断念しました。まだ検証できていませんが、部分的に非表示にできる方法などがもしかしたらあるかもしれません。
次にシェイプキーを使用してアニメーションさせる方法をやってみました。
1回目は全部の先端に対してDisplaceモディファイヤーを使用し、２つのバリエーションを作成しました。
ただ、この方法だとすべて同時に動いてしまい布の表現からはまだ遠い状態です。
2回目に行った方法は、交互の頂点を選択するようにしました。
これもまた機械的な動きになってしまっています。
そして3回目に行った方法はプロポーショナル変形を使用して意図的に動きをつけました。
これによって動きに少し複雑さが加わり良い感じになりました。
最終的にUnity内で微調整を行い、実際はこのような仕上がりになっています。
海藻みたいに水中でユラユラしているような動きになりました。
ウェア：シェーダーについて
今回のウェアで使用したシェーダーについて触れてみたいと思います。
そもそもシェーダーとは3Dモデルの表面の見た目や質感を決定するためのプログラムや命令で、Unityの中に多くのシェーダーが存在しています。
表現したい質感を再現するためにはどのシェーダーを使うべきなのかを決めるのは重要なポイントです。
改めていくつかのシェーダーを試してみたところ、Builtlnシェーダーが非常に適していることがわかりました。
これまで多くのアイテムで使用してきたStandardシェーダーとBuiltlnシェーダーをいくつかの視点にわけて比較してみます。
※Builtlnシェーダーは今回Builtln_Litを使用しています。
光の当たり方
| 光の強さ・コントラスト | |
| Standard | 強め |
| Builtln_Lit | Standardよりも抑えめ |
比較してみると、Standardの光の強さがかなり目立っているのがわかります。とくに白黒画像でみると明るさにはっきりと違いがあります。
色
| Unityでの色の見え方 | |
| Standard | マップより青みが強くでている |
| Builtln_Lit | マップとの差は少ない |
カラー（Albedo）のマップを読み込んだとき、どのくらい色差があるのか見てみました。
Standardは青みが強調されていますが、Builtlnの方は差が少ないです。
※色差に注目したかったので、左側のマップの明るさは右のUnityに持ち込んでいるものより明るくしています。
↓Standard
↓Builtln
Cull
| CullOff | |
| Standard | 自分で追加する必要がある |
| Builtln_Lit | 元々機能が内蔵されている |
シェーダーを決めるポイントは質感以外にもいくつかりますが、その中でもCullOffの機能があるか、または追加可能かどうかはとても重要です。
CullOffとはポリゴンのカリング「Culling」をオフにすることを意味します。カリングとは特定の条件下でポリゴンを描画から省略するプロセスのことです。
通常、3Dレンダリングではパフォーマンスを向上させるために、カメラから見えないポリゴン（特に背面にあるポリゴン）を描画しないようにします。
この機能はすべてのシェーダーに対応していないので、もしCullOffを適応できない場合はモデルの背面になる箇所のポリゴンを予め作る必要があります。
モデルごとにポリゴン数の制限が決まっている為、ケースバイケースなところもありますが基本的にはシェーダーで背面を表示させることを前提に制作を行っています。
BuiltlnシェーダーではCullの表示方法をOff、Back、Frontから選択できるので使い分けが可能です。
その他
今回はBuiltln_Litを使用していますが他にもBuiltlnシェーダーにいくつか種類があるので、さまざまな質感の表現に対応できます。
色違いで制作したシルバーでは、バッグ・ウェア共にBuiltln_Sparkleを使用してグリッターのようなキラキラを表現しています。
※より詳細な内容についてはこちらのZEPETO公式サイトに記載されています！
※また後に知りましたが、マップのRGAのチャネルにそれぞれマップを入れることができるので、マテリアル容量の削減にもつながります。
おわりに
新しくリリースしましたウエアの制作内容についてご紹介しました。
個人的に、使いやすいシェーダーを見つけられたことは今後の制作にも生かせるので非常に良かったなと思います！
弊社では、月１回のペースで開催しているaccelerando.AIデザインコンテストで選ばれた作品からzepetoのモデル制作を行っております。
今回のコンテスト概要：https://jp.open-fashion.com/blogs/news/accelerando-bags-matching-brand-design
だいたい月１回のペースで開催しておりますので興味があれば是非ご参加下さい。
※詳細はOpenFashion公式サイトからご確認下さい。
引き続きみなさんのアイディアと一緒に多様なアイテム制作ができればと思います。
次回も是非楽しみにしていただけると嬉しいです☺