Unity の Hair System（デモ版）を試す

![HairTest2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/380c4882-a994-3bad-9493-82f73106a94a.gif)

# はじめに
本記事は、「[QualiArts Advent Callender 2023](https://qiita.com/advent-calendar/2023/qualiarts)」の14日目の記事となります。

[株式会社QualiArts](https://qualiarts.jp/)で Unity エンジニアをしているトッキーです。
本記事では、Unity Technologies がデモ版として公開している、新しい [Hair System](https://github.com/Unity-Technologies/com.unity.demoteam.hair) の基礎を学ぶことを目的としています。
Hair System でどのようなもの/ことができるかは、以下の動画をみるとわかると思います。

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

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

本記事では、Unity Learn で公開されている、「[Get Started with Hair Simulation](https://learn.unity.com/project/getting-started-with-hair-simulation?uv=2021.2)」を教本とするため、並行して読むことをお勧めします。
（ただし、本記事では「[Test the Hair Simulation](https://learn.unity.com/tutorial/test-the-hair-simulation)」の内容までしか基本的に取り扱いません。）

# 1. 環境構築
まず、何はともあれ環境構築です。
自分は M1 MacBook Pro でテストしているため、以下の内容は、場合によって誤っている可能性があります。

詳細は、Unity Learn の「[Get Started with Hair Simulation](https://learn.unity.com/project/getting-started-with-hair-simulation?uv=2021.2)」内、「[Prepare your project](https://learn.unity.com/tutorial/prepare-your-project?uv=2021.2#)」を参照してください。

<br>
さて、ここで最重要事項です。

「2. Before you begin」の項目で Unity のバージョンを Unity 2021.2 にするように書かれていますが、2023年12月12日現在、このバージョンでは**うまくいきません**。
サンプルのバージョンが上がっているせいか、**サンプルの Scene を開いた瞬間に Unity Editor が落ちます**。
**開き直しても落ちます**。

自分が結果的にうまく試せたバージョンは、以下のバージョンでした。

- **2022.3.15f1**
- **2023.2.3f1**

ダウンロードは [Unity download archive](https://unity.com/releases/editor/archive) から。
特に、[HDRP](https://unity.com/ja/srp/High-Definition-Render-Pipeline) を使用する場合は HDRP 15.0.1 が必要となるため、テストするだけであれば、2023.2.3f1 をお勧めします。

Unity のプロジェクトを新規で作成したら、Unity Learn 通りに以下をインストールしていきます。

- [Hair System](https://github.com/Unity-Technologies/com.unity.demoteam.hair) (Github/Unity パッケージ マネージャー)
- [Alembic Importer](https://docs.unity3d.com/Packages/com.unity.formats.alembic@2.3/manual/index.html) (Unity パッケージマネージャー)
- [mesh-to-sdf](https://github.com/Unity-Technologies/com.unity.demoteam.mesh-to-sdf) (Github/Unity パッケージ マネージャー)
- [Digital Human](https://github.com/Unity-Technologies/com.unity.demoteam.digital-human) (Github/Unity パッケージマネージャー)

最後に、Demo Team Hair System の Minimal Hair Sample をインポートします。

Unity 2022.3.15f1 であれば以下の画像の「Import」ボタンから。
![スクリーンショット 2023-12-12 16.39.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/b86d8f1e-13c6-5ae6-39cd-b5703da09142.png)

Unity 2023.2.3f1 であれば以下の画像の「Import」ボタンから。
![スクリーンショット 2023-12-12 16.25.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/9078a4a4-b6dd-3c3b-e1e4-04977cb38575.png)

ここまでで、「[Prepare your project](https://learn.unity.com/tutorial/prepare-your-project?uv=2021.2#) 」の項目は完了です。

ここから実際にサンプルをさわっていきます。

# 2. Hair System をさわってみる
### 2.1. 動作確認
まずサンプル Scene を開いてみましょう。
サンプル Scene は以下のフォルダにあります。
Assets\Samples\Demo Team Hair System\0.11.0-exp.1\Minimal Hair Sample\Scenes

フォルダには3つの Scene が用意されており、それぞれファイル名の末尾が「Builtin」、「HDRP」、「URP」になっています。
作成したプロジェクトにあったものを選択しましょう。

Scene を開いて、Hierarchy にあるカメラの位置を調整すると、以下のようになるはずです。

Unity 2022.3.15f1 Builtin
![スクリーンショット 2023-12-12 16.44.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/42b3d14f-fa53-cf03-4bd4-962010df612b.png)

Unity 2023.2.3f1 HDRP
![スクリーンショット 2023-12-12 16.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/909125d0-4370-464b-bcc9-64ac6b3c7876.png)

うねうねした髪の毛っぽいのがカーテンのようになっています。
HDRP は流石の綺麗さです。

実行中以外も動いて欲しいので、View Option 内の Effects にある **「Always Refresh」にチェックを入れます**。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/c61ed476-0324-6648-67f7-9e476ce6349c.png)

ここで試しに、Hierarchy で Hair を選択肢し、カーソルなどで適当に動かしてみます。

どうでしょう？
以下のGIFのように、ファッサファッサ動いていれば成功です。
![HairTest2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/380c4882-a994-3bad-9493-82f73106a94a.gif)

### 2.2. Hair Asset
#### 2.2.1. 概要
ここからは自由に Hair を設定する方法について確認していきます。

Hair の設定は、この項で説明する Hair Asset と、後述の Hair Instance の2箇所で設定します。
Hair の形や毛量などは Hair Asset で設定します。
一方、Hair Instance では Hair Asset を参照して実際に Hair を生成し、その特性を決めていきます。

Hair Asset は Project ウィンドウで右クリック（2本指クリック）、「Create」 > 「Hair」 > 「Hair Asset」をクリックしていくことで新規作成することも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/ea68eee9-4e7a-e348-cd27-1453c05b0f03.png)

さて、ここからはサンプルの Hair Asset をさわっていきますが、該当の Hair Asset は CurlyCurtain.asset という名前で以下のフォルダにあります。
Assets\Samples\Demo Team Hair System\0.11.0-exp.1\Minimal Hair Sample\Styles

クリックして Inspector を確認すると以下のようになっているかと思います。
![スクリーンショット 2023-12-13 0.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/63cff2d5-8170-c36a-8e34-f86acbb674c1.png)

Settings Procedural の右下（上記画像内の赤枠の部分）にある「Auto」にチェックを入れていると、Hair Asset に変更を加えるたびに自動で「Build strand groups」がされます。
便利ではあるのですが、Strand Count（毛の量）を変更した時など、ものすごーーくカクついたりします。
そのため、**「Auto」のチェックは外すことをおすすめ**します。
チェックを外す場合は、設定をいじって、適用したい時に「Build strand groups」をクリックしてください。

前準備はここまでです。
ここからは具体的な設定について紹介していきます。

### 2.2.2. Type
Settings Basic 内の Type では Hair の生成方法を指定します。
選択肢は以下の画像のように、「Procedural」、「Alembic」、「Custom」の3つです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/e9272d56-e31c-6075-977d-b372f64289f5.png)

Type: Procedural は手続き型であり、いくつかのパラメータを設定することによって、Hair を生成します。
サンプルも初期状態は Procedural であり、ここまで動作確認で見てきた Hair も  Procedural で設定されています。

Type: Alembic は「Weta Wig」、「Houdini」、「Maya Xgen」などの 3D モデリングソフトウェアで作成した Alembic ファイル形式 (.abc) のデータを用いてリサンプリングし、Hair を生成します。
Alembic ファイルの詳細は [Alembic.io](https://www.alembic.io/) を参照してください。
Alembic ファイルをパッと用意できない場合でも、Unity 公式が配布してくれている、[Hair Sample](https://connect-prd-cdn.unity.com/20230511/f999fbff-82a5-40ff-9df2-508d7dd53854/SampleHair.zip) を使うことによって試すことができます。

試しに [Hair Sample](https://connect-prd-cdn.unity.com/20230511/f999fbff-82a5-40ff-9df2-508d7dd53854/SampleHair.zip) を用いて Alembic にしてみると、以下のような感じで、人の髪の毛のようなものが表示されます。
（この時、「Build strand groups」をクリックし忘れないように。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/49600538-f96e-69ed-6cf6-d21fdff92dec.png)

※おそらく Alembic ファイルに高さデータが含まれる都合上、カメラの位置または、Hair の位置を調整する必要があります。

Alembic については今回はここまでで、これ以降は Type に Procedural を設定した場合の、Settings Procedural について紹介します。

### 2.2.3. Placement
Type を Procedural にした場合の、Settings Procedural には、最初の項目として Placement （Roots 内）があります。
Placement の選択肢は以下の3つです。

- Primitive
- Custom
- Mesh

#### Primitive
「Primitive」を選択した場合、Placement Primitive という項目が表示され、以下の4つが選択できるようになります。

- Curtain
- Brush
- Cap
- Stratified Curtain

それぞれ、以下の感じになります。

Curtain
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/e8691f42-00c9-1ef7-33c6-ace45c3a1acb.png)

Brush
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/4f465281-e22e-3415-83fe-8911ceb7f75d.png)

Cap
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/7e8f59bb-7f59-5e02-65ac-5837aaef743c.png)

Stratified Curtain
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/0538eec7-09a5-9d57-98ec-5a48ed46b76a.png)

Curtain と Stratified Curtain の違いは見た目上わかりませんでした。

#### Custom
Placement で「Custom」を選択した場合、Placement Provider という項目が表示され、asset を設定できるようになります。
ここに、以下のフォルダにある SineWave1D.asset をセットすると、Sin 波のような形に沿った Hair が生成されます。
Assets\Samples\Demo Team Hair System\0.11.0-exp.1\Minimal Hair Sample\Providers
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/596fb098-99c6-c61a-ea3b-2d6c7bcf957d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/c6ba5664-cdcd-bdaa-9d50-989f1c827800.png)

#### Mesh
Placement で「Mesh」を選択した場合、以下の項目が表示されます。

- Placement Mesh
- Placement Mesh Groups
- Mapped Density
- Mapped Direction
- Mapped Parameters

Placement Mesh には Hair を生成したい Mesh を設定することができます。
例えば、Cube を設定してみると以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/8b68354b-8097-160f-87d4-8f48b33e1f5f.png)

なんだかよくわからない感じですが、この後説明する他の設定を整えると、以下のようになります。

![Kapture 2023-12-13 at 12.06.21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/2c845882-a0b9-6fe9-219e-eb5aa8c0cd83.gif)

Mesh に沿って Hair が生成されているのがわかります。
「Placement Mesh Groups」、「Mapped Density」、「Mapped Direction」、「Mapped Parameters」については割愛します。

### 2.2.4. Strands
Settings Procedural 内の Strands には以下の4つの項目があります。

- Strand Count 
- Strand Particle Count
- Strand Length
- Strand Length Variation

#### Strand Count（本数）
「Strand Count」は Hair の量のことで、単純に生成される毛の本数が増えます。

Strand Count: 64（最小）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/73e75a79-7e12-f21f-cd22-199d04e8d3e4.png)

Strand Count: 64000（最大）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/ef32a92f-4cdf-5f66-a18e-e3c4f8f33647.png)

サンプルでは 2322 が設定されています。
64000 本のような大量生成は、Placement を Mesh にして、動物の毛や短髪を表現したい時に適しているかもしれません。
ただし、当然本数を増やすと重くなります。

#### Strand Particle Count（滑らかさ）
「Strand Particle Count」は Hair 1本1本を構成するパーティクルの数で、大きいほど Hair の形や動きの滑らかさが上がります。

Strand Particle Count: 3（最小）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/e53facf3-de92-b674-b78b-5751b96fab5f.png)

Strand Particle Count: 128（最大）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/579719e2-ca6d-8d56-6e90-782c78712a52.png)

サンプルでは 32 が設定されています。
当然数を大きくすると重くなります。
Strand Count と合わせて調整するといいかもしれません。

#### Strand Length（最大の長さ）
「Strand Length」では Hair の**最大**の長さを設定できます。

Strand Length: 0.001（最小）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/bde331f6-9d42-5763-c569-d1ace1093ad5.png)

Strand Length: 5（最大）（Hairの位置を高くし、Scene ビューの方は結構引いて撮影してます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/3f89e2bc-a2ec-91e3-4cb8-79e0f16eef29.png)

サンプルでは 0.8 が設定されています。
単位は unit（m）ですが、まっすぐ伸ばした時の長さなので、Hair が波打っている時は見た目上少し短く見えます。

#### Strand Length Variation（長さのランダム感）
「Strand Length Variation」では Hair の長さのバリエーションを設定できます。
チェックを外す、または 0 に設定すると、すべての Hair が 「Strand Length」で設定した長さになります。

Strand Length Variation: チェック外す または 0（最小）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/cff92aca-2c0d-4e1f-e735-1264c08f32e2.png)

Strand Length Variation: （最大）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/d58deaac-6267-b076-a4b2-0384c2c69e4b.png)

サンプルでは 0.343 が設定されています。
対象物に応じて変更すると良いかもしれません。

### 2.2.5. Curl
Settings Procedural 内の Curl には、以下の3つの項目があります。

- Curl
- Curl Variation
- Curl Sampling Strategy

それぞれ、Hair をどのようにカールさせるかという設定項目です。

「Curl」のチェックを外すとカールしなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/034c340a-30fc-320c-ff27-35f96b2eee00.png)

「Curl」の Radius（半径: 0 ~ 10）が小さいほど、細かいうねりになり、大きいほど大きなうねりになります。
「Curl」の Slope（0 ~ 1）はあまりに小さいと、くるくる回転し続けてしまいます。また、大きくするほど、ゆったりとしたカールになります。

## 2.3. Hair Instance
### 2.3.1. 概要
Hair Instance は Hair Asset を参照して実際に Hair を生成し、その特性を決めていきます。

空のゲームオブジェクトを作成し、「Add Component」から、Hair Instance を選択することによって、生成することができます。

一番上の項目に Hair Asset を割り当てると、その Hair Asset の Hair が生成されます。

サンプルの CurlyCurtain.asset を当てはめると以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/1d8bd155-f744-20d7-369a-74e8519905f1.png)

サンプルと同じ Hair Asset を使っているはずなのに、見た目が違うのがわかるかと思います。

Hair Asset の Curl のチェックを外すと違いはより顕著です。

新しく生成した Hair Instance
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/f57e4f50-b0cd-00fe-ce89-2175d7b71b7f.png)

サンプルの Hair Instance
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/31981c1c-f38a-bb7c-4ef0-d95c50965e35.png)

「System Settings」と「Strand Settings」の設定によるものです。
「Strand Settings」の設定項目が見当たらない場合は、以下の画像の赤枠内のボタンをクリックしてください。
![スクリーンショット 2023-12-13 14.07.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/0b06eb4f-5e75-4cca-c513-3891ed997c7e.png)

すると、以下のような項目が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/738c74d6-0725-1c3c-84b4-f84c4e93c1e2.png)

サンプルの該当箇所と見比べると、以下の4項目が異なることがわかります。

- 「System Settings」の「Simulation」内の「Simulation」
- 「System Settings」の「Simulation」内の「Steps Max」
- 「Strand Settings」の「Settings Strands」内の「Proportions」の「Strand Diameter」
- 「Strand Settings」「Settings Solver」内の「Solver」の「Iterations」

この4つをサンプルに合わせると、サンプルと同じ Hair　が生成されます。

その他にも様々な項目がありますが、今回は最後に当たり判定の設定を簡単に紹介して終わります。

### 2.3.2. Collision
「Strand Settings」の「Constraints」内の「Boundary Collision」にチェックすると、他のオブジェクトにあたるようになります。

Boundary Collision: チェックあり（Friction: 0.5）
![Kapture 2023-12-13 at 14.28.50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/25f4bc4e-0d05-3942-6fc3-7f931353a873.gif)

Boundary Collision: チェックなし
![Kapture 2023-12-13 at 14.43.08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/f58b0945-bb6b-9bba-a973-c6196c99bc53.gif)

「Boundary Collision」内にある「Friction」は摩擦を設定する項目です。
小さいほど摩擦が少なくサラサラとした感じになり、大きくなるとベタついた感じになります。

Friction: 0
![Kapture 2023-12-13 at 14.49.58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/a95e9ca4-bc62-c212-2c37-f0d1022c85de.gif)

Friction: 1
![Kapture 2023-12-13 at 14.52.33.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634766/bbda070d-3984-c16f-5415-d8ad69f1f61d.gif)

# まとめ
今回は Unity がデモとして公開している、Hair System について、環境構築と Hair Asset、ちょっとだけ Hair Instance を中心に紹介しました。
「[Get Started with Hair Simulation](https://learn.unity.com/project/getting-started-with-hair-simulation?uv=2021.2)」の内容的には、まだ半分程度で、特にAlembic キャラクタの髪を綺麗に描画する章である「[Set up Character Hair](https://learn.unity.com/tutorial/set-up-character-hair)」については全くふれれていません。
もし、写実的な人間を作りたい場合は今回の内容ではほとんどカバーできていないかと思います。
そのため、より詳しく学習したい場合は、残りのチュートリアルを見るほか、以下の動画などが役立つかもしれません。

https://www.youtube.com/watch?v=9s-KEhQwcV0

まだ、デモ版であるため、この記事を読む時期によってはだいぶ異なっている可能性がありますが、Hair System を試してみたいという方の一助になれば幸いです。