5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

THETAプラグインでスリットスキャンを試す

Last updated at Posted at 2020-12-23

この記事は RICOH THETA Advent Calendar 2020 の23日目の記事です。
アドベントカレンダーが終わっても、皆さんが作るTHETA関連(特にTHETAプラグイン)記事をまってます!
(過去の空箱を埋めていただくのも大歓迎です!)

はじめに

リコーの @KA-2 です。

弊社ではRICOH THETAという全周囲360度撮れるカメラを出しています。
RICOH THETA VRICOH THETA Z1は、OSにAndroidを採用しています。Androidアプリを作る感覚でTHETAをカスタマイズすることもでき、そのカスタマイズ機能を「プラグイン」と呼んでいます(詳細は本記事の末尾を参照)。

今回は、「こんな実験してみたよ」くらいの内容です。
動画はサマにならないけど、静止画としたらなんとか“それっぽく”なったかも。

一般カメラで「スリットスキャン」などと呼ばれる映像表現手法をTHETAでできるかな?と思い立って試してみた次第です。

スリットスキャンとは?

Webで検索すると、わかりやすそうな記事が沢山でてきます。
検索結果の上位にでてくるこちらなどは例が豊富でわかりやすいです。

一応、自分なりの説明もしておくと、「時間をずらした線で映像を作る」という手法だと解釈しています。「線」=スリット、「時間をずらす」=スキャンというこから、「スリットスキャン」と呼ばれているようです。

皆さんの身近なところで判りやすいものではコピー機などのスキャナーが、相当します。
「時間のズレ」が極小すぎてわからない例では、実はメカ式シャッター(フォーカルプレーンシャッター)という機構をもつカメラにおいて「シャッター速度がとても高速な時」も実はスリットを動かして映像ができあがっています。さらに、メカ式シャッターを持たないデジタルカメラ(特にスマートフォン)においてもこのような現象は起こっていまして、「ローリングシャッターゆがみ」などといわれていた現象を記憶している方もいらっしゃるかもしれません。電車の窓から動画を撮ると電柱が倒れて映ったり、動画の中を横切った車や電車がナナメに歪んで見える現象です。

このような歪みを積極的に起こしている撮影手法/映像表現手法です。

今回の実験では、スキャンする方向を上→下や下→上としましたが、
横方向にスキャンすると、歩行者が針のように映ったり、猫の胴体が無くなったり伸びたり、長い電車が縮んだり、スキャンをゆっくり行うとゴーストタウンエフェクト記事に近しい映像が撮れることもあります。

デジタルカメラがこんなにも進化する前には、フィルムカメラの光をコピー機用のラインスキャナーでスキャンして高解像度のデジタル映像を撮れるカメラを自作した方、なんていうのもお見掛けしたこともあります。

THETAでどうやったの

THETAプラグインでライブプリビューを扱いやすくするのプロジェクトをベースとして、プラグインが連続フレームをうけとると、「横1本だけ新しい映像として採用し、残りは捨てる」ということをひたすら繰り返しおこなっています。1コマ目だけは全部使いますけれども。

ですので、1画面の更新が遅くなります。画像の解像度が高いほど1コマ分の映像ができあがるのに時間を要します。

1024×512pixel 30fpsのライブプリビューですと映像はこんな感じ。1画面できあがるまでおよそ17秒かかるので、カメラの前で 9~10回転くらいすることも余裕です。

1024_18fps_横ライン上から下スキャンの場合.jpeg

この速度ですと、ドアの出入りを表現することがかなり難しく……
640×320 30fps でやっとこんな感じにできました。

640x320ならなんとか.jpeg

Web検索で出てくるミュージックビデオの例では、かなり高速なラインスキャンをしていることがわかります。

ソースコード

前述のとおり、こちらのプロジェクトのMainActivityの中のスレッド部分だけ手を加えています。
解像度やフレームレートを変更するには、WebUIのJavaScriptの固定値を変えたりもしますが、そこは以前の記事を調べてください。

ラインスキャンの映像を作っているスレッド部分だけ抜粋します。

MainActivity.java
    //==============================================================
    // OLED Thread
    //==============================================================
    public void drawOledThread() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                int outFps=0;
                long startTime = System.currentTimeMillis();
                Bitmap beforeBmp = null;

                int imgWidth=0;
                int imgHeight=0;
                int posWidth=0;
                int posHeight=0;
                Bitmap bmpSlitScan=null;

                while (mFinished == false) {

                    byte[] jpegFrame = latestLvFrame;
                    if ( jpegFrame != null ) {

                        //JPEG -> Bitmap
                        Bitmap bitmap = BitmapFactory.decodeByteArray(jpegFrame, 0, jpegFrame.length);

                        if ( bmpSlitScan != null ) {
                            //縦スキャン
                            Bitmap bmpSlit = Bitmap.createBitmap(bitmap, 0, posHeight, imgWidth, 1, null, true);
                            Canvas canvasSlitScan = new Canvas(bmpSlitScan);
                            Paint mPaint = new Paint();
                            canvasSlitScan.drawBitmap(bmpSlit, 0, posHeight, mPaint);

                        } else {
                            imgWidth=bitmap.getWidth();
                            imgHeight=bitmap.getHeight();
                            bmpSlitScan = Bitmap.createBitmap(imgWidth, imgHeight, Bitmap.Config.ARGB_8888);
                            Canvas canvasSlitScan = new Canvas(bmpSlitScan);
                            Paint mPaint = new Paint();
                            canvasSlitScan.drawBitmap(bitmap, 0, 0, mPaint);
                        }

                        /*
                        //縦スキャン位置更新 (上→下)
                        posHeight++;
                        if ( posHeight >= imgHeight ) {
                            posHeight=0;
                        }
                         */
                        //縦スキャン位置更新 (下→上)
                        posHeight--;
                        if ( posHeight < 0 ) {
                            posHeight = imgHeight-1;
                        }

                        //set result image
                        ByteArrayOutputStream baos = new ByteArrayOutputStream();
                        bmpSlitScan.compress(Bitmap.CompressFormat.JPEG, 100, baos);
                        latestFrame_Result = baos.toByteArray();

                        outFps++;
                    } else {
                        try {
                            Thread.sleep(33);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }

                    long curTime = System.currentTimeMillis();
                    long diffTime = curTime - startTime;
                    if (diffTime >= 1000 ) {
                        Log.d(TAG, "[OLED]" + String.valueOf(outFps) + "[fps]" );
                        startTime = curTime;
                        outFps =0;
                    }

                }
            }
        }).start();
    }

jpegのフレームが受け取れるので、Android標準の画像処理メソッドを利用しやすくするためにbitmapに形式を変換したあと、Canvas や Paint をつかって1ライン更新し、WebUIに編集後映像を表示するために編集後の映像をjpegにしています。

以下のようにすると横スキャンです。

MainActivity.java
                            //横スキャン
                            Bitmap bmpSlit = Bitmap.createBitmap(bitmap, posWidth, 0, 1, imgHeight, null, true);
                            Canvas canvasSlitScan = new Canvas(bmpSlitScan);
                            Paint mPaint = new Paint();
                            canvasSlitScan.drawBitmap(bmpSlit, posWidth, 0, mPaint);

「上から下」「下から上」のスキャン方向切替は、posHeightの更新の仕方で切り替えています。
横方向スキャンをする場合には、posWidthをずらしていってください。

まとめ

ひとまずは、ライブプリビューで得られる映像の画質で時間をかければ、スリットスキャンの映像表現ができることが判りました。
それなりに使えるようにするには、解像度を落とさねばならず、、、
まだまだ卵の状態ですね、ストア公開はとうめん難しいなーという感触。
(過去映像をバッファしながらなめらかにする、そうするとNDKで実装して、と、かかなり工夫をせねば。。。)

あと、露出パラメータ(絞り値、シャッター速度、ISO感度)やホワイトバランスを固定しないとという注意点も。この実験ではオートなのでコマ間の差異が線でみえてしまってます。

こんなかんじで、いろいろな実験をくりかえしていきます。
みなさんも、多様なことを試してみてください!

RICOH THETAプラグインパートナープログラムについて

THETAプラグインをご存じない方はこちらをご覧ください。
パートナープログラムへの登録方法はこちらにもまとめてあります。
QiitaのRICOH THETAプラグイン開発者コミュニティ TOPページ「About」に便利な記事リンク集もあります。
興味を持たれた方はTwitterのフォローとTHETAプラグイン開発者コミュニティ(Slack)への参加もよろしくおねがいします。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?