【WebGL2】3DモデルをBlenderで編集して、自分のWebアプリに表示する

## やりたいこと
「右腕のみの3Dモデルをライブラリを使わずに自分のWebアプリに表示させる」です。
この手のことをググると、THREE.js の記事ばかり出てきます。
本記事はTHREE.jsは使いません。使うのは WebGL2 のみです。
お手軽にやりたい場合は、THREE.js を使ってください。

## 前提知識
WebGL2, Blender の両方を少し触ったことがある人を対象としています。

## 3Dモデル
今回使用する3Dモデルは、<a href="https://www.reallusion.com/character-creator/free-3d-character-base.html">CC Character Base - Free 3D Character Model</a>です。
ボーンがすでに仕込まれています。
こちらは個人的な使用と商業的な使用の両方に利用できます。

## Blenderにインポート
Blenderのバージョンは4.2です。ちなみに3.6,4.1でも大丈夫なことを確認しております。
C:\blender\download\CC_character_base\CC Character Base\FBX\03_Neutral_M\03_Neutral_M.fbxをインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/9f034456-f2bc-c784-249b-513feb453551.png)

## メッシュの削除
私の場合、右腕だけが必要なので、不要な箇所は削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/b8ef25e7-6247-3119-351a-31e75fc1aebf.png)

## Node名、マテリアル名の変更
下記のように名称を変更します。（勿論しなくてもよいです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/05844106-81c7-52c6-3972-75a928fca979.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/aa7d877c-46cf-0269-8c4f-280c744fcb56.png)

## 腕のねじれを解消
腕のモデルではねじれに対応しなくてはなりませんが、このモデルは既に対応してあります。
ボーンコンストレイントは出力されませんので設定してみましょう。
わざわざここで設定するのは、ねじれのボーンのウェイトが正しいか確認するためです。
以下のように5つ設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/b3490181-6584-d071-5334-5b5cfa110a9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/ebce413c-83da-d364-d605-f694e57d2895.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/427b46eb-36f4-2998-8f93-fcd9c12b145f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/ad152ca1-663b-1348-b422-a795795aa5c1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/09e98b89-3741-b5d7-4388-d9fa746c4ec8.png)

左がボーンコンストレイント対応前、右が対応後です。forearm を y 軸に回転させた時のねじれが解消されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/6b9477b7-57b0-4c0c-93e7-2ff7fdb5dc56.png)

## マテリアル設定
arm と nails の2つマテリアルを設定します。
arm の元の名前は Std_Skin_arm で、 nails の元の名前は Std_Nails です。
元々 Base Color Map と Normal Map は存在します。
AO, roughness はフォルダにあるものを使いましょう。
Metallic ですが、黒色で塗りつぶしたものを今回使いました。Metallic の値は 0.0 にするので黒色です。わざわざ画像ファイルにしたのは、AO, roughness, Metallic はglTF2.0では1つの画像として出力されるためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/02519e8f-50f5-820c-ca7c-65dca2899eab.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/71374bd4-b3ac-d058-02d3-cba85fdc9d83.png)

## glTF2.0で出力
glTF2.0で出力します。
下記のように設定して出力します。
Formatを glTF Separate にするのは、自分で読み込むときに解凍するのが面倒なためです。
+Y Up のチェックを外すのは、見た目をBlenderと同じにするためです。チェックを入れるとY軸がZ軸になります。
Tangentsにチェックを入れるのは、接線ベクトルを出力するためです。接線ベクトルは計算もできるので、計算できる人は出力不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/cfdc181a-6902-9c4a-abe8-f3023c514ea3.png)

## 自作アプリで読み込む
glTF2.0 の読み込みで一番面倒なのは、Armature (スキニング)のところだと思います。
一番参考になるのは、<a href="https://webgl2fundamentals.org/webgl/lessons/webgl-skinning.html">webgl2fundamentals - WebGL2 Skinning</a> です。この作者は本当にプログラムがうまいので、非常に参考になります。スキニング以外も非常に参考になります。
あと、glTF2.0 の仕様ですが、<a href="https://www.khronos.org/files/gltf20-reference-guide.pdf">本家の資料</a>が非常にわかりやすいです。

ボーンコンストレイントは自身のプログラムで行ってください。

後はどのような見た目にするか(PBR, Normal Map, Shadow Map)ですが、自身の好きにしてください。

自作のアプリに組み込んだものを貼り付けておきます。どうもお疲れさまでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163605/f5e8f679-8d8a-414f-fd03-2c607c2a402d.png)

## 最後に
3Dモデルを表示するところまで、備忘録として書きました。