3D写真の機能をアプリに組み込める「Fyuse SDK」

[Fyuse SDK](https://fyusion.com/integration-pricing)を使うと、<b>3D写真（=Fyuse）を撮る／見る機能をアプリに組み込む</b>ことができます。

本記事では、3D写真「Fyuse」とは何か、その使いどころ、アプリへ組み込む際の実装方法について解説します。[^1]

[^1]: ちなみに公平を期すために最初に宣言しておきますと、私はこのFyuseを開発・提供するFyusion社の社員です。

ちなみに私はiOSエンジニアなのでiOSの実装を紹介しますが、Fyuse SDKは<b>iOS, Android, Webをサポート</b>しています。


## Fyuseとは

3D写真フォーマット「Fyuse」は、静止画とも動画ともポリゴンベースの3Dモデルとも違うものです。App Storeにある同名のアプリでどんな感じかお試しいただくことができます。

- [Fyuse - 3D Photos on the App Store](https://itunes.apple.com/app/id862863329?mt=8)

<img src="https://qiita-image-store.s3.amazonaws.com/0/3180/3128706c-c822-1e09-68d5-8d032dd9b0ce.gif" width="250">

例えば私はこんな場面でFyuseを撮ってます。[^2]

- https://fyu.se/v/3scadzhud9

![2018-02-11 00_46_17.gif](https://qiita-image-store.s3.amazonaws.com/0/3180/a949ac08-7820-e8d7-ade4-5e0462ea4705.gif)

[^2]: Qiitaの制約で、ビューアを埋め込むことができなかったので、アニメーションGIFに変換して載せています。ぜひリンクからFyuseビューワで見てみてください。

普通の写真だと、片面だけとか、前からだけになりますが、Fyuseでは<b>立体物をマルチアングルで記録</b>できます。


Fyuseアプリのタイムラインを見ていて、

- 人（ファッション・コスプレ）
- 車
- 像、彫刻、フィギュア、プラモデル

あたりはFyuseフォーマットが非常にマッチするなぁと思います。これらは静止画では一面しか記録できず、動画では時系列の記録になってしまうので、私はFyuseを普通に<b>記録フォーマットとして[日常使い](http://fyu.se/u/shu223)</b>してます。（もちろん静止画も動画も使います。適材適所です）


## SDK導入事例

モノをいろんな角度から見れる、というところからEC系とは非常に相性が良く、<b>車業界、ファッション業界、大手総合ECサイト</b>等ですでにご愛顧いただいてます。


公開OKを確認できた国内事例ですと、"d fashion"さんの<b>360°アングルでのコーディネート紹介</b>ページがあります。

- [d fashion](https://fashion.dmkt-sp.jp/information/special/360dfashion/index.html)

![d-fashion copy.jpg](https://qiita-image-store.s3.amazonaws.com/0/3180/8edb9459-c293-a705-8a33-7e05570993b8.jpeg)


また中古車販売のガリバーさんにご利用いただいております。

- [業界初！新しいクルマ選びの提案。画像販売『ドルフィネット』と空間写真『Fyuse』がコラボ |（株）ガリバーインターナショナル](https://221616.com/idom/news/press/20150722-16513.html)
- [「Dolphinet(ドルフィネット)」×「Fyuse」開始](https://221616.com/idom/news/blog/20150722-16488.html)


車向けには「Car Mode」という専用の撮影モードがあり、**車をあらゆる角度からオンデバイスで認識**し、非常にきれいに車のFyuseを取れるようになっています。

<img width="480" alt="Screen Shot 2018-02-09 at 13.33.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/3180/2c840263-b6f7-5eff-d270-c1ab531c47e6.png">


またFyuse同士をタグで関連付ける機能もあるので、たとえば車全体のFyuseのタイヤ部分に、タイヤにフォーカスして撮ったFyuseを関連付けたり、といったことも可能です。

<img width="480" alt="Screen Shot 2018-02-09 at 13.29.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/3180/08618ccd-50a7-f024-c87e-7400cd987094.png">


このあたりは会社のサイトでも詳しく紹介されてるのでぜひ見てみてください。

- [Fyusion - Products](https://fyusion.com/products)



## SDKの使い方

Fyuseを「撮る」「見る」というFyuseの二大基本機能の実装方法を紹介します。

### Fyuseを撮影する機能を組み込む

Fyuseを撮影する機能の実装は、

```
Fyuse用のカメラを起動する → 撮影を開始する → 保存する
```

という流れになります。AV FoundationやAsset Libraryといったフレームワークを利用してカメラを使う機能を実装したことがある方であれば、違和感なく・・・というかそれらを扱うよりも遥かに簡単に実装できるかと思います。


#### カメラの起動

- 1. `FYCamera`オブジェクトを作成する

```swift
private let camera = FYCamera()
```

- 2. `prepare`して、`startPreview`する

```swift
camera.prepare()
camera.startPreview(with: previewLayer)
```

`startPreview`には`AVCaptureVideoPreviewLayer`オブジェクトを渡します。

これでFyuse撮影準備完了です。


#### 撮影開始／停止

それぞれメソッドを1つ呼ぶだけです。

```swift
camera.startRecording()
```

```swift
camera.stopRecording()
```

#### 保存

撮影したFyuseをローカルに保存するにあたって、まずは撮影の完了イベントを受けるために`FYCaptureEventListener`プロトコルへの準拠を宣言しておき、

```swift
class ViewController: UIViewController, FYCaptureEventListener
```

FYCameraのリスナーとして追加しておきます。

```swift
camera.add(self)
```

すると、撮影中・完了時・失敗時に`fyuseCamera(_:captureEvent:)`が呼ばれるようになります。

```swift
func fyuseCamera(_ camera: FYCamera, captureEvent event: FYCaptureEvent) {
    switch event.captureStatus {
    case .inProgress:
        // 撮影中
    case .completed:
        // 撮影完了
    case .failed:
        // 撮影失敗
    }
}
```

ここで、保存する際には内部的に様々な処理を行うため、それらを非同期で実行するクラス`FYProcessingQueue()`を使用します。

```swift
private let processingQueue = FYProcessingQueue()!
```

```swift
processingQueue.processEntry(path) { 
    print("Fyuse is saved at \(path)")
}
```

これで撮影機能は完成。

<img src="https://qiita-image-store.s3.amazonaws.com/0/3180/6c8233d8-37c6-23f5-d50d-d76cd1ca0011.jpeg" width="250">


### Fyuseを見る機能を組み込む

Fyuseフォーマットを見る、いわゆるビューワ（Viewer）機能です。基本的には<b>たったの2ステップ</b>。

- 1. FYFyuseViewオブジェクトを作成する

```swift
@IBOutlet private weak var fyuseView: FYFyuseView!
```

ちなみにIBを使用せず次のようにコードから初期化してaddSubviewしてもokです。

```swift
private let fyuseView = FYFyuseView()
```


- 2. 表示したいFyuseを`FYFyuse`オブジェクトとして1に渡す

`FYFyuse`オブジェクトは、先ほど`FYProcessingQueue()`で処理・保存した際に取得したパスを渡して初期化します。

```swift
fyuseView.fyuse = FYFyuse(filePath: path)
```

これだけです。

先ほど撮ったFyuseがインタラクティブに閲覧できるようになります。



## More

基本機能の実装方法を解説しましたが、実装方法を解説した「撮る」「見る」、また冒頭で紹介した「Car mode」や「Tagging」以外にもFyuseはいろいろと機能を持ってまして、たとえば以下のようなものがあります。

### Visual Search

<b>3Dベースのディープラーニング</b>を用いた物体検索

<img src="https://qiita-image-store.s3.amazonaws.com/0/3180/3eb6055b-7838-f062-dc12-6bed169a78dd.jpeg" width="250">


### VR, AR & MR-ready

Fyuseで撮った人物や車等をVR/AR/MR環境にエクスポート可能

<img width="480" alt="Screen Shot 2018-02-11 at 0.05.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/3180/2f334ae2-d279-4ec5-f32a-fdad3b3411ce.png">

- [Fyusion、スマホで撮影したモデルをHoloLensへ投影させるARプラットフォームを開発 - GET AR](http://getar.jp/fyusion-unveils-mobile-content-creation-platform-for-ar/)

![2018-02-11 00_10_20.gif](https://qiita-image-store.s3.amazonaws.com/0/3180/57f9b783-c210-c837-9a02-3ed9bbf7b90d.gif)

（Fyuseの人物の背景を変え、エフェクトを載せるデモ）

### Infinite Smoothness

空間内におけるフレーム間を動的に補完してスムーズに表示

- この技術のおかげでファイルサイズは〜5MBと、非常に小さく済む

<img src="https://qiita-image-store.s3.amazonaws.com/0/3180/5e6dda66-0b9d-c501-8e9a-121091787a04.png" width="480">


## お問い合わせください

Fyuse SDKをサイトからダウンロードできるようにするのはまだ準備中です。気になった方はぜひお問い合わせください。

- [Fyusion - Contact Us](https://fyusion.com/contact-us)

お問合わせは<b>日本語でも可</b>です。

ちなみに、今月（2018年2月）はエンジニアリングのトップと、ビジネスデベロップメント/マーケティングのトップが日本に行くので、直接ミーティングできると話も早いと思います。ぜひぜひこの機会に！