【THETAプラグイン開発】THETA内でOpenGLを使いインスタ映え画像を作る（表示編）




## はじめに

こんにちは、メロンパン大好きリコーの@meronpanです :melon:  

今回はTHETAで撮影した全天球画像を工夫して表現したいと思い、撮影画像をリトルプラネットで保存するプラグインを作ります。

リトルプラネットと聞いてぴんと来ない人もいると思うので例です。

<img width="414" alt="littlePlanet_example.png" src="https://qiita-image-store.s3.amazonaws.com/0/265189/3010f30e-db64-dac2-47b3-8b56f2357757.png">


360度画像をこんな感じで表現します。
インスタ映え〜

リトルプラネット画像は[THETA＋](https://theta360.com/ja/about/application/edit.html)というアプリを使うと作れちゃうんですが、THETAプラグインを利用すれば、撮影すると自動的にリトルプラネット画像を作成することができます。

いろんな加工を楽しみたい人はTHETA+を使ってください。

THETAの画像をリトルプラネットで表現するために、OpenGLを利用します。こちらについては後で説明します。

作りたいプラグインは以下のような流れです。

1. THETAで画像を撮影
2. 撮影した画像をOpenGLによりリトルプラネットで表現
3. リトルプラネットで表現された画像を保存

しかし、メロンパン涙目、、、2までしか到達できず、、

というわけでこの記事では1,2を説明したいと思います。

3は後日別記事で書こうと思ってます。

そもそもTHETAプラグインをご存じない方は[こちら](https://api.ricoh/products/theta-plugin/)をご覧ください。

興味を持たれた方は[Twitter](https://twitter.com/theta_plugin)のフォローと
[THETAプラグイン開発コミュニティ(Slack)](https://join.slack.com/t/thetadeveloper/shared_invite/enQtNzcxODI2MTk2ODg0LWY5YmU2ZTIxNGYwNzlmNWZjMWMyMWFlMzY3ZmQ3NGU3ZjZiZjI0Njk4MGIxMDU5NDJiMzQ4Y2FkNDEzYmFlNGU)への参加もよろしくおねがいします｡



## 目次

以下の流れで説明していきます。

* OpenGLとは
* 実装の説明
* リトルプラネットで表示
* meronpanのつぶやき

## OpenGLとは
wikipediaでは、OpenGLは以下のように記載されています。

「2次元/3次元コンピュータグラフィックスライブラリ」

THETAで撮影された画像は2次元画像として保存されますが、OpenGLを利用することによって2次元画像を変換し色々な見せ方を表現することができます。

OpenGLには、Android標準ライブラリがありますが、ここでは処理効率を意識し、ネイティブコードから利用する方法を選択しています。

ちなみに、OpenGLについては以下を参考にしました。

* マルチプラットフォームのためのOpenGL ES入門　基礎編
http://www.cutt.co.jp/book/978-4-87783-301-5.html

* マルチプラットフォームのためのOpenGL ES入門　応用編
http://www.cutt.co.jp/book/978-4-87783-343-5.html

※「OpenGL ES」はOpenGLを組み込み用に整理したAPI群です。

大変わかりやすいです。
おすすめです。



## 実装の説明

実装の詳細な説明をすると内容が膨大になってしまうため、表面はしっかりと、中身はふんわりと説明していきたいと思います。:melon: 


### 環境設定

下記リンク等を参考に、Android Studioの導入とプラグイン開発環境を整えておいてください。


* [【THETAプラグイン開発】THETAを開発者モードにする手順](https://qiita.com/ueue/items/7c4027db3af463956e26)
* [【THETAプラグイン開発】THETAでRICOH THETA Plug-in SDKを動かす方法](https://qiita.com/yokazuya/items/cda20420ee0b1b58e03f)
* [Ricoh THETA V Plugin Application Development Community Guide](http://theta360.guide/plugin-guide/)
* [AndroidStudio](https://developer.android.com/studio/)



### RICOH THETA Plug-in SDKをダウンロード


* [RICOH THETA Plug-in SDK](https://github.com/ricohapi/theta-plugin-sdk)（AndroidStudioプロジェクト）をベースに作りました。



### ndkの利用

1. AndroidStudioを起動し、メニューから”Tools > SDK Manager”を選択
1. ”SDK Tools”タブを選択し、**”LLDB”** 、**”CMake”** 、**”NDK”**  にチェックを入れて"OK"をクリック
1. インストールが終わったら"Finish"をクリック

### ネイティブ言語の利用

1度話が逸れますが、Android Studioでnew projectより、include C++ supportにチェックを入れると新規プロジェクトの中に以下が追加されます。

* ネイティブ ソースディレクトリ（src/main/cpp）
* CMakeビルドスクリプト（CmakeLists.txt）

* build.gradle内に以下設定項目を追加

```
android {
    ・・・
    externalNativeBuild {
        cmake {
            path "CMakeLists.txt"
        }
    }
}
```

ネイティブ言語を利用するために必要なものたちですが、これらをサンプルコードに追加しました。

メロンパンのサンプルコードではフォルダ`cpp`を`jni`とリネームしています。

詳しくは以下をご参照ください。

https://developer.android.com/studio/projects/add-native-code?hl=ja#create-cmake-script

### ネイティブコードについて

メロンパンサンプルコードのネイティブソースディレクトリ(src/main/jni)には2つのディレクトリがあります。

* support

    * 主にOpenGL回りの関数が用意されています。

       「OpenGLとは」で紹介した書籍のサンプルコードを利用させていただいております。


* openGL

    * OpenGLの処理をコーディングしました。

      以下4つがOpenGLを用いてグラフィック処理をする際の基本的な関数になります。

      「OpenGLとは」で紹介した書籍を参考に実装しました。

       * `initialize()`
            OpenGLを用いたグラフィック描画処理の初期化処理を行います。

       * `resized()`
           initialize()直後、もしくは画面の縦横を切り替えたタイミングで呼び出されます。

       * `rendering()`
          描画を行うタイミングで呼び出されます。この関数内に描画処理をコーディングしました。

       * `destory()`
          解放処理を行います。


### Javaとネイティブ関数のやりとりについて

以下を参考にしてください。

[THETAプラグインで画像処理【FastCV導入編】](https://qiita.com/roohii_3/items/5fbb3cb5645c9300ce69#javaとネイティブ関数のやりとり)

## リトルプラネットで表示

撮影した画像をvysorを使って、確認してみました。

vysorについては[こちら](https://qiita.com/KA-2/items/9dce1a165fcf0203b1cb)の記事を参考にしてください。

プラグインを実行し、シャッターボタンを押すとー

![littlePlanet.png](https://qiita-image-store.s3.amazonaws.com/0/265189/da025846-bce2-f0aa-dcbc-4d6170ef0ce7.png)


リトルプラネットできたー

ちなみにプラグインのソースコードは[GitHub](https://github.com/theta-skunkworks/theta-plugin-opengl-sample) で公開しています。

ただし途中経過のため、プラグインとして使うにはまだまだです。

一回撮影したらプラグインを一度落とさないと元に戻れず、、、

写真保存もまだこれから、、、

まだ不具合もあります、、、


## meronpanのつぶやき

 はじめに「OpenGLとは」で紹介しました書籍の関係者の方へ
 
 内容および一部コード利用の許可についてお礼申し上げます。

 非常にわかりやすいので是非皆さんも読んでみてください。

 `rendering()`内で描画処理を書いてますが、OpenGLの基本的な処理フローを覚えてしまえば、描画計算処理を変えるだけでグラフィックワールドを楽しむことができると思います。

 メロンパンもTHETAでとった画像を、ハート型の画像で表示したり、金平糖の形で表してぐるぐる回したりして遊びました。

ぜひ、本記事を参考にTHETAプラグインの開発をしてみてください。

これであなたもTHETAプラグインにメロメロン :melon: