こんにちは、ヤプリでAndroidエンジニアをしている白井です。
ARCoreを試してみる流れでOpenGLを触る機会があり、勉強も兼ねて動画と画像を合成してみましたので紹介したいと思います。
OpenGL ESとは
OpenGL for Embedded Systems (OpenGL ES)とはKhronos Groupによって開発されたコンピュータグラフィックスAPIで、スマホなどの組み込みシステムで利用されています。 iOSやAndroidでも特にゲーム系アプリで多く使われています。 UnityやARCore Sceneformなどゲームエンジンやグラフィックエンジンの中で実装されており、開発者がこのAPIを直接叩く機会はそれほどないかもしれません。
OpenGL ESを直接利用するには学習コストも高く容易ではありませんが、それでも特殊な処理(例えばARCoreでトラッキングした座標に対して動画をはめ込みたいといった処理)をする場合は有用です。
やってみた
ここからはプログラム寄りの話になりますが、Androidで掲題の通り動画と画像の合成を行い画面に表示してみます。
サンプルでコードを書いてみましたのでこちらに置いておきます。
以下では一部抜粋して簡単なコードの説明をします。
描画するのはGLSurfaceView.Renderを継承したクラスとなります。
ここではOpenGLで取得した動画用のテクスチャIDからSurfaceTextureを生成し、動画の出力先をそこに設定してから動画を再生します。
こちらは描画部分の抜粋です。
動画と画像のテクスチャは型が異なるのでフラグメントシェーダが別々となっています。
drawVideoTextureで動画を描画していますが、1フレームずつテクスチャの更新が必要になるので毎回 updateTexImage() を呼び出しています。
全体としてはGLSurfaceViewの準備ができたら、OpenGLの初期設定、テクスチャ準備・設定を行い、1フレームずつひたすら描画していくという流れです。
実行結果はこのようになります。
最後に
今回は簡単な動画と画像の合成でしたが、これを応用すれば写真にフィルタやマスクをかけたりもできるのでちょっとした画像編集アプリを作るのも可能だったりします。 グラフィック周りに興味のある方は触ってみると面白いと思いますので試してみてください。
