メタバース空間でグラビア撮影したいのでSofmap背景をモデリングもコーディングもせずにさくっとメタバース空間に持ち込む

はーい、みゅみゅです
メタバースって言葉が流行ってます
やっぱりメタバースといったら、なりたい自分になれる　**やりたいことが出来る**が大切と思ってます
なりたい自分になれるということで、世の中にある定義に当てはめればどう考えてもメタバースな[バーチャルキャスト](https://virtualcast.jp/)でレースクイーンになってみました
![2022061616380383_撮影テスト_みゅみゅ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/4b6337f3-c098-6506-d99c-39a4349e14b0.png)

せっかくレースクイーンになったのでよく見かけるソフマップの背景（例の壁）をバックにグラビア撮影やりたいって唐突に思いました！
今やりたい！　すぐやりたい！！　メタバースなんだからやりたいことをすぐやりたい！！

**なお当方、モデリングの知識はまったくありません。**

## ソフマップの背景とは？
よく[グラビア撮影](https://www.google.com/search?q=sofmap+%E8%83%8C%E6%99%AF%E3%80%80%E3%82%B0%E3%83%A9%E3%83%93%E3%82%A2%E3%82%A2%E3%82%A4%E3%83%89%E3%83%AB&tbm=isch&ved=2ahUKEwiGxOq98rH4AhUJhpQKHb1aAxwQ2-cCegQIABAA&oq=sofmap+%E8%83%8C%E6%99%AF%E3%80%80%E3%82%B0%E3%83%A9%E3%83%93%E3%82%A2%E3%82%A2%E3%82%A4%E3%83%89%E3%83%AB&gs_lcp=CgNpbWcQAzIECCMQJzoGCAAQHhAIUKwIWNYjYN8naABwAHgAgAFpiAG0CZIBBDE0LjGYAQCgAQGqAQtnd3Mtd2l6LWltZ8ABAQ&sclient=img&ei=hherYobpKImM0gS9tY3gAQ&bih=771&biw=1241&rlz=1C1QABZ_jaJP926JP926)などの背景にあるあれですね（例の壁ともいう）
ソフマップさんのホームページに背景素材があって個人での利用は可なので使ってみたいと思います
ソフマップさんありがとう！

https://www.sofmap.com/contents/?id=sofmap&sid=wallpaper

# モデリングとかUnityとかいいから今すぐやりたい
めんどくさいこと抜きで今すぐメタバース空間内でグラビア撮影したい！

## 1.テクスチャのイメージ（背景）をダウンロード
テクスチャの背景を上記URLからダウンロードします。
私は**クラシックver.2**を選択しました。

## 2. THE SEED ONLINEにイメージをアップロード
[バーチャルキャスト](https://virtualcast.jp/)にイメージを持ち込むため、[THE SEED ONLINE](https://seed.online/)にイメージをアップロードします。
（THE SEED ONLINEと連携することで色々なことが出来るようになります）

THE SEED ONLINE でアップロードを選択すると【画像をVCIに変換する場合はこちら】とありますので、こちらをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/dfe088f2-57ed-dfc4-5de7-ce9c3a1c6e98.png)

画像⇒VCI変換の画面になりますので、ここで変換したい画像ファイル（Sofmapの背景）を選択して下にある【変換】ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/34190cfe-b7b3-2f89-d33b-0655948fedcd.png)

そうすると画像がアイテムとして登録されるので、バーチャルキャストで自由に使えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/d80598a1-be79-66d4-31d8-cc1c2b01b778.png)

## 3. バーチャルキャストでアップロードした画像を出す

バーチャルキャスト内でリングメニューからカスタムアイテムを選択して、先程アップロードしたイメージを取り出します。

![2022061616423882_撮影テスト_みゅみゅ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/7839d313-107b-ecaa-9f04-d2f6f856f3ef.png)

出したイメージは両手で大きく引き伸ばしたりできますので、大きくして後ろに置いて撮影

![2022061616441030_撮影テスト_みゅみゅ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/99d56b7c-8c15-f533-ea60-757f079066ad.png)

なんか違うなぁとおもったら、よくあるグラビラ写真は角で撮影してるのが多いので、同じ画像アイテムをもう一枚出して（アイテムは何個でも出せます）大きさと位置を合わせて撮影


![2022061616461368_撮影テスト_みゅみゅ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/15a24c1e-4ffd-b51b-e82b-24478984684f.png)

そうそう、こういう写真を撮りたかったのです。　これをやりたかったのです！
特に**モデリング**や**コーディング**が必要なくサクッと勢いだけでやりたいことができた例でした


# ちゃんとVCIアイテムとして作りたい

バーチャルキャストは一度アイテムを設置しておけば保存される仕組みがあるので自分の部屋に設置しておけば放置でOKなのですが、一度片付けてしまうとまたセッテイングが面倒ってあるので、できれば撮影セットとして一つのアイテムにしてしまいたいです
※お友達の部屋に行って自慢したいというのも理由の一つです

VCIアイテム制作には [Unity](https://unity.com/)が必要となります。
Unityのセットアップに関しては、[検索したら大量に出てくる](https://www.google.com/search?q=unity+%E5%88%9D%E3%82%81%E3%81%A6%E3%80%80%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB&rlz=1C1QABZ_jaJP926JP926&sxsrf=ALiCzsZqP9N_mmaVlaEjdWB4ayb0KnOnxw%3A1655380518483&ei=JhqrYsyUHcSZ-Aau07OIBQ&ved=0ahUKEwjMv5b-9LH4AhXEDN4KHa7pDFEQ4dUDCA4&uact=5&oq=unity+%E5%88%9D%E3%82%81%E3%81%A6%E3%80%80%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB&gs_lcp=Cgdnd3Mtd2l6EAM6BwgAEIAEEAQ6BggAEB4QCDoJCAAQgAQQBBAlOgQIABAeOgUIIRCgAToFCAAQogQ6BgghEAoQKkoECEEYAEoECEYYAFAAWJIZYIMcaABwAHgAgAGuAYgBwhCSAQQxNi41mAEAoAEBwAEB&sclient=gws-wiz)と思いますので割愛します。
Unityのセットアップが完了してる前提で話を進めます。


## 1. UniVCIのダウンロード＆インストール
VCI制作にはUniVCIというUnity Packageが必要となります
UniVCIのダウンロード
https://github.com/virtual-cast/VCI/releases

こちらから最新のUniVCI(UniVCI-???.unitypackage)と付属の**UniVRM**(UniVRM-???.unitypackage)をダウンロードします。

1. UniVRM
2. UniVCI
この順番でインストールします。
（ファイルをダブルクリックするとインストールが始まります）

※途中何か言われたら【Accept All】で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/807caefb-e42b-8c39-5319-f9fcf6c41331.png)

## 2. rootオブジェクトの作成
VCIオブジェクト（アイテム）の一番最初の階層となるオブジェクトを作成します
このオブジェクトにはVCIアイテムそのものの情報が入ります

Hierarchky 左クリックで 【Create Empty】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/0930169c-1d7c-981f-faca-c3c884478441.png)

これがVCIアイテムのrootオブジェクトになるのでわかりやすい名前で
（例では `sofmap-kabe`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/fa70cc98-c250-3c86-eb63-aa6d530bd3f1.png)
このObjectの中に【VCI Object】コンポーネントを追加します。
(このコンポーネントにVCI情報が入ります）
【Add Component】 から 【VCI Object】を追加します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/62bf9c27-0c43-142a-48df-99d08a726be0.png)

コンポーネントの中の必須項目を入れていきます

| 項目 | 内容 |
|:-:|:-:|
|Title   | sofmap-kabe （ソフマップの壁だから）  |
|Version   | 1.0 （なんとなくこの数字）  |
|Author   |miyumiyu （わたしです）   |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/30eb7955-ce6a-97a7-5dc2-c2bbe036ae05.png)

これ以外は必須項目ではないのであとは任意で埋めてください

## 2.SubItemの作成
実際にオブジェクト配置を行うSubItemを作成していきます
SubItemの階層を作り、その下に壁を作っていきます

先程作った【sofmap-kabe】オブジェクトの下にCreate Enptyでオブジェクトを作成し、できたオブジェクトをわかりやすい名前に変更しておきます　
（図では kabe（壁）です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/a045628d-08ee-0664-7709-568a97372657.png)

この作成したSubItemの下に壁を作っていきます
kabeの下に壁になるオブジェクトを作っていきます
kabeを左クリック　→ 【3D Object】 → 【Plane】
これで壁を作っていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/ff9edbdc-9685-289e-653f-422db34bcc25.png)

出した状態ですと大きいので Scaleをすこし小さく（0.5）します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/1f5a98eb-9bff-1ad9-0aad-eac0d72443ee.png)

作成したPlaneを床として、残り2面を作ります
先程作ったPlaneをCtrl-C そして、Ctrl-Vを2回でペーストしていきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/58748317-76e1-0e3f-21b6-6326d7387d7b.png)

これで Planeが３つできたと思います
Plane　→　床にする
Plane(1) →　壁その１
Plane(2) →　壁その２

これでいきます。

# 3. 壁その１、壁その２にSofmapのテクスチャを貼り付ける

ダウンロードを行ったsofmapの壁のイメージファイルをUnityの中に入れます
ProjectのAssetsのところにイメージファイルをドラック＆ドロップするとファイルが格納されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/fd080383-f559-4cf1-4e10-c9f5d7921475.png)

各のされたイメージをドラックしながら、先程作成した【Plane(1)】、【Plane(2)】にドロップします
（これで壁にイメージが張り付きます）

# 4.壁になるように回転と位置を調整します

現状だとすべてのPlaneが地面に床として配置されてるので、起こして壁にしていきます

Plane(1)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/5e205424-4c57-6910-6c20-f6c590bb7e0a.png)

Plane(2)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/4ae0b3bb-618d-c2a0-cbef-263a789b9aaa.png)

するとこんな感じになるかと思います
それっぽくなってきました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/a45b42be-0289-7d5e-66e8-764bb93bd599.png)


## 5.コライダーを仕込む
作成したアイテムは持ち歩いたり拡大、縮小したいので手に持たすために**コライダー**コンポーネントを追加しなくてはいけません。
作成したPlane３つにはすでにMesh ColliderがありますがVCIでは使えないのでMesh Colliderを削除してBox Colliderコンポーネントを追加します。

※Mesh Colliderの削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/55082dc5-aef2-74d0-e84f-0b500a759c0d.png)

※Box Colliderの追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/fa5c1e29-94b4-222b-706f-e15df7d6710d.png)

Plane
Plane(1)
Plane(2)

全部に適用（Mesh Colliderの削除とBox Colliderの追加）します


# 6.VCI SubItemを設定します
SubItemとして設定した`kabe`に【VCI Sub Item】コンポーネントを追加して動き方を指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/52a331ae-c634-c52e-387d-5eec7026aa85.png)

【VCI Sub Item】コンポーネントを追加すると【Rigidbody】コンポーネントも追加されます。
- 持ちたいので **Grabbable** ON
- 拡大、縮小を行いたいので **Scalable**はON
- 拡大、縮小を行うときはすべての辺で同じだけスケール値を変えたいので **Uniform Scaling**はON
- 引き寄せは特に必要ないので**Attractable**はOFF
- 重力は必要ないので **Use Gravity**はOFF
- 物理挙動はいらないので **Is Kinematic** はON
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/523a4e76-30f7-b909-bb34-30874feff32f.png)

こんな設定を行います

## 7.エクスポートしてVCIを作成します
rootオブジェクト(`sofmap-kabe`)を選択して、上のメニューから【VCI】-【Export VCI】を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/a85cff42-7208-1116-1277-27d8d65cbf93.png)
ファイル名と保存場所が聞かれるので自分の好きな場所に置きます

## 8.THE SEED ONLINEにアップロードします
THE SEED ONLINEにVCIアイテムとしてアップロードします
アップロードするとこんな感じでアイテムの状態が見えます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/289ddbca-74a2-f935-fa5a-1564a933f5cb.png)


## 9.バーチャルキャストでアップロードしたVCIを出します
バーチャルキャスト上でカスタムアイテムから先程アップロードしたVCIアイテムを選択します
問題なければ作成したVCIアイテムが出現します

![2022061619462629_撮影テスト_みゅみゅ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/c3284686-9dc6-a11d-f051-fb5ec8ae7a37.png)

拡縮もできますので、出したアイテムを使って自由に記念撮影

![2022061619510095_撮影テスト_みゅみゅ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79067/4f93778e-8158-381f-be81-c86cbf5bb8ab.png)


# おわりに
特にコーディングやモデリングせずに思いついたままやりたいことをやってみました
モデリングの知識やコーディングの知識がなくてもやりたいと思ったことをすぐ実行して形にできる
発想こそが一番のクリエイトと思います
モデリングやコーディングの知識がなくても発想で楽しいことができる、これがバーチャルキャストの面白さなので是非みなさん体験してみてください