スーパーの鮮魚売場でお魚くわえた３Dドラ猫を出現させたい

こんにちは。
最近初めてARに触れる機会がありまして、
自分でも何かつくってみたいなと思い、実装してみました。


## お魚くわえたどら猫を見たことがないから自分で作る！

私は小売業で働いているのですが、ＡＲ技術を学んだときに
自分の家で飼っている猫がスーパーに現れると
日々のお仕事が楽しくなるんじゃないか考えました。

で、飼っている猫がスーパーのどこに行くかと考えたときに
お魚売場だなと・・・

そこでふと出てきたこの曲！
お魚くわえたドラ猫 追っかけて～♪
サザエさんの曲！！！！

歌の出だしの1フレーズですが、そもそもお魚くわえたドラ猫見たことないなと思ったので
ＡＲ使ってお魚売場で魚くわえてる猫を実装してみようと思います。



## 一旦完成した作品がこちら

https://twitter.com/nghrhtm1/status/1526926394802188289






### 実際に使用することもできます！
このQRコードをスマートフォンで読み取って、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/f8a57562-cba8-47c1-d7c9-f34f94141d10.png)


マーカー画像をカメラで読み取ってください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/62d8d6c4-f193-1a42-c978-fa138d59675e.png)

猫が出てくるはずです！



## 実装にあたり使用したもの
* [CGTrader](https://www.cgtrader.com/)
* Blender（version:3.1）
* [Netlify](https://www.netlify.com/)
* [CodePen](https://codepen.io/your-work)



## 実装方法

### CGTraderを使用して３Dモデルをダウンロードする方法

今回はこのような猫をダウンロードしました。
（本当は）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/ab32f24c-277b-1950-0304-5a34a585904e.png" width="600" height="200">



:::note info
今回使用した３Dモデルは有料です。
glTFの３Dモデルをインストールすると変換作業を省くことができて楽です。
「Free glTF」で検索してみてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/0d9496d3-f12a-b45e-8c07-ba914620c8de.png" width="600" height="200">
:::



ログインをして、ほしい３Dモデルをダウンロードします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/6ff8051b-4fd7-9ae5-9c4d-9481e49c7999.png" width="400" height="200">




私は、BLEND CAT.rarをダウンロードしました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/ffb70c4f-ae01-58cb-9859-c066180e2419.png" width="600" height="200">


### 7zipで解凍
展開を押して先ほどダウンロードしたrarファイルを解凍をします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/432cf9dc-60bb-6d90-0224-323354701da3.png" width="600" height="200">


### Blenderを使用してダウンロードしたものを色付けしていく方法

先ほど解凍したファイルをBlendeで見つけて、色付けし、glTFに変換する作業を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/d546fbab-168f-4f63-0f6d-cdacad646b90.png" width="400" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/42bd9fd3-f5f5-c7c8-2e21-84b484c574d7.png" width="600" height="200">

このような猫が出てきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/42d42820-8d8e-c8f6-d823-c9112e353d2e.png" width="600" height="200">

猫をクリックするとオレンジ色で囲まれるので、ここから猫に色をつける作業になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/9da76edd-b3b8-5820-a4b0-1b3184e73b9d.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/eec57e7f-d561-e173-eacd-cf450f318641.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/cb99d3b2-3c97-821f-c611-da1466c249ee.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/ca9c6efd-efa3-34da-efba-196e05621592.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/688e52b6-d131-5e74-c261-2a2469730b43.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/fdf7b05d-afd0-7b6e-9969-d7c48d04a3d3.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/3aafe4d7-b786-8f2f-a622-e95305addf2b.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/e464cf0c-2d71-4672-d304-32085729f58c.png" width="600" height="200">
CAT_BUMP.jpgを保存しましたが、残りの2つ（CAT_COLOR.jpgとCAT_NRM.jpg）も同様に作業をします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/51370f52-0f5b-dda8-46e9-a4e0e187f717.png" width="600" height="200">

するとこのように反映されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/f0e7a434-12d5-5fa1-2717-3f2b020eceeb.png" width="600" height="200">




猫に色づいてきましたが、元の画像とは少し色が違うので
右下にあるマークをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/30e33b17-61c9-df0d-2b69-71db8a9d5800.png" width="600" height="200">
次に下矢印もクリックして
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/3153c81f-f1c6-7b0f-1437-05632b7a5989.png" width="600" height="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/3860570c-be1d-49ac-868b-184d86366250.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/73130481-45e7-dc55-4f79-ee73f1039636.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/e3109d8a-53eb-caf8-ff4e-624a9d4e27ad.png" width="600" height="200">

てことで完成。最初にダウンロードしたものとは少し違うけれども、
これで良しとする！

### glTFに変換し保存する方法

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/c53f4d36-f544-c889-f96f-c6ff33f099f3.png" width="600" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/0deb0633-2823-acc2-c96e-477db560bdad.png" width="600" height="200">

自分の作ったファイルに保存してください。
**その際、ファイル名に半角スペースがある場合はスペースを削除しておきます。**



### 3DモデルをNetlifyにアップロードする方法

 [netlify](https://www.netlify.com/)を準備して下さい。
Sltesをクリックしてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/cbac648c-74aa-7b10-e9a0-a109d618fe2d.png" width="600" height="200">
先ほど作成したフォルダーを入れてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/183fd310-7f51-475a-9728-51561248f7e7.png" width="600" height="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/51bf8249-79e3-8309-89ff-3ce163053fb7.png" width="600" height="200">

URLをクリックしてもなにもでてきませんが、
**URLの後ろに先ほど作ったglTFファイルの名前を入れてください。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/d05fb330-e0dc-96bd-9673-7b920a0cc7a5.png)
glTFファイルを入れられたらEnterを押してください。
するとモデルがダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811930/205f1e28-68a5-1ac6-46e2-d8b3697de0c5.png)


### Codepenで試してみる方法

HTMLの12行目を自分のURLに書き換えて使用してみてください。

```html
gltf-model="https://arjs-cors-proxy.herokuapp.com/[この部分をモデルアップロード直リンクと置き換え]"
```

実際に使用できるCodePenはこちら

https://codepen.io/nagaharahitomi/pen/jOZBBdL





## 実際に使ってもらった感想
**今回は小売業で働いている方に**
**作成したものを実際に使ってもらってコメントをもらいました。**

**同期の沖中さん**
せっかくスーパーの魚売り場で表示させるなら、スーパーの他の売場でも出現させて、
スーパーのなかで子供向けに、3Dモデル宝探しゲーム考えた！とか
スーパーの中でサザエさん一家を探してもらうゲーム考えた！だと広がりがでるかな～と

あとPCにペイント3Dというものが入っていれば
3Dモデルめっちゃ簡単に作ることが出来ます(僕もそれで作りました！)とのこと！



**同期の伊藤さん**
ARを使用できるのであれば、スーパーで実施する有人抽選会の際の
当選演出をARによって代替したら人件費削減もできて良さそう！

従業員側→レシート抽選会の人時を各部門から捻出しなくてはならず非常に負担になっている
お客様側→友人抽選会では大体待たされる・・・

抽選結果という強力な動機付けがある為、従業員、お客様がARという技術に
触れられる可能性が非常に高い！
ARでアニメーションとかを流せるのであれば広告も混ぜるとなお良い！とのこと！

**会社の上司**
猫を出没できるのであれば、魚を出す事出来ないかな～？
お刺身・短冊の商品に丸魚の３Dモデルを出す事ができれば面白いよね！
あと産地情報とか、生産者の紹介とか出せたらお客さまの安心感につながりそう！とのこと！

**3人ともコメントありがとうございました。**






## 実装してみての感想
飼っている猫で３Dモデル出したかったとか、
お魚くわえさせたかったとか、
マーカー画像を変更したかったとか・・・

色々やりたかったことがあったけれども
これから修正することできるよね！と思って一旦記事にしました。

今までは従業員の仕事の効率化できる実装しか考えてなかったので、
今回はお客さまと従業員が楽しめるものを作れている気がして嬉しい・・・

早く店舗で使ってみたいなと思います。

最後まで読んでいただきありがとうございました。



## 追記
やっぱり早く店舗で使ってみたくて今日早速使ってもらいました(笑)
みんなでワイワイできて楽しかった～

https://twitter.com/nghrhtm1/status/1527234807490834433