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

はじめに

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

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

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

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

リトルプラネット画像はTHETA＋というアプリを使うと作れちゃうんですが、THETAプラグインを利用すれば、撮影すると自動的にリトルプラネット画像を作成することができます。

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

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

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

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

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

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

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

そもそもTHETAプラグインをご存じない方はこちらをご覧ください。

興味を持たれた方はTwitterのフォローと
THETAプラグイン開発コミュニティ(Slack)への参加もよろしくおねがいします｡

目次

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

• 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群です。

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

実装の説明

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

環境設定

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

• 【THETAプラグイン開発】THETAを開発者モードにする手順
• 【THETAプラグイン開発】THETAでRICOH THETA Plug-in SDKを動かす方法
• Ricoh THETA V Plugin Application Development Community Guide
• AndroidStudio

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

• RICOH THETA Plug-in SDK（AndroidStudioプロジェクト）をベースに作りました。

ndkの利用

1. AndroidStudioを起動し、メニューから”Tools > SDK Manager”を選択
2. ”SDK Tools”タブを選択し、”LLDB” 、”CMake” 、”NDK” にチェックを入れて"OK"をクリック
3. インストールが終わったら"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とリネームしています。

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

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

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

• support

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

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

• openGL

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

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

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

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

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

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

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

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

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

THETAプラグインで画像処理【FastCV導入編】

リトルプラネットで表示

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

vysorについてはこちらの記事を参考にしてください。

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

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

ちなみにプラグインのソースコードはGitHub で公開しています。

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

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

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

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

meronpanのつぶやき

はじめに「OpenGLとは」で紹介しました書籍の関係者の方へ

内容および一部コード利用の許可についてお礼申し上げます。

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

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

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

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

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