AVAssetWriterによるビデオ録画時に、先頭にblank frameが入ってしまう

急にiosのネタですが、かなりハマったので、メモしておきます。

 

非常にレアケースですが、カメラ、マイクを使ったAVAssetWriterによる音声付きビデオの録画時、まれに先頭フレームが空になるケースがあります。これは、ビデオに対し遅延が発生するようなエフェクト等の重い処理を行った場合に特に発生しやすいようです。

 

現象を追跡してみました。

 

カメラ、マイクから毎フレーム送られてくるCMSampleBufferRefには、タイミング情報が含まれています。

- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection

CMTime timestamp = CMSampleBufferGetPresentationTimeStamp( sampleBuffer );

ここで取得できる時間情報はおそらくelapsed timeだと思います。(アプリの起動からの時間)

 

録画処理を開始するとAVAssetWriterに対して、AudioとVideoのCMSampleBufferを追記していくわけですが、このタイミング情報を一緒に渡すことで、同期が取られるようです。タイミング情報は前述のとおりelapsedTimeとなっているので、先頭フレームの書き込み時には、下記のように録画開始のタイミングをAVAssetWriterに通知します。

[_assetWriter startSessionAtSourceTime:CMSampleBufferGetPresentationTimeStamp(sampleBuffer)];

この先頭フレームのタイミングは、通常、ほぼ同時またはVideoバッファが先行して送られてくるわけですが、ビデオに対し一定の処理時間をかけた場合、前フレームの処理遅延により、Audioバッファが数フレーム先行して記録されてしまうケースが発生します。startSessionAtSourceTimeでは、audio,videoを識別せずに追記した場合、videoが抜け、Audioだけ存在するフレームが発生してしまいます。先頭フレームの場合、dropframeにならないため、ブランクビデオが記録されたような状態になります。

 

以上がほぼ原因として間違いなさそうなので、初期フレームをVideoに限定することで対応が可能です。

if(!_haveStartedSession){
  //初期バッファの処理
  if(mediaType == AVMediaTypeVideo){
    //ビデオの場合にタイミングを通知
    [_assetWriter startSessionAtSourceTime:CMSampleBufferGetPresentationTimeStamp(sampleBuffer)];
    _haveStartedSession = YES;
  }else{
    //初期バッファがオーディオなら一旦破棄して次のバッファーを待機
    CFRelease( sampleBuffer );
    return;
  }
}
//以降sampleBufferを記録

AVFoundation、膨大で大変すね・・・。

文字+レンダラー+ofxBullet

スクリーンショット 2014-10-09 02.37.49

レンダラーで表示する表示オブジェクトはofNodeの継承で、下記の情報を持たせた。

・マテリアル情報(マテリアルシェーダー、テクスチャ:Diffuse,Speclar,Normal,Detail)
・メッシュ(ofMeshから生成できる拡張メッシュ )
・RigidBody(ofBulletのshapeのいずれか)

このオブジェクトをFlashみたいにaddChildでレンダラインスタンスに追加できるようにしてみた。動作はofっぽくnodeで動かせるようになったし、rigidbodyを追加すれば物理空間にぶっこめる。メッシュ形状から衝突形状が生成できるofxBulletCustomShapeを使ったらいい感じになった。

スクリーンショット 2014-10-09 02.58.37

GTX660TIだと文字たくさん出しても60fpsでてたけど、 MBAだと15fpsくらいが限界・・・。

無題

SSLR

スクリーンスペースローカルリフレクション(SSLR)実装してるんですが・・・。なんとなくでるところまではいったけど・・・。
うまくいかないわー。もーいやわー。

スクリーンショット 2014-10-07 10.28.12

 

レイトレースのfragシェーダ。だいぶ簡素化してあります。おかしいと思われる原因がありすぎて・・・ちょっと寝かせよう・・・。


vec4 RayTrace(in vec3 startP,in vec3 endP){

    vec4 startSSP = uProjectionMatrix*vec4(startP,1.0);
    startSSP.xy /= startSSP.w;
    startSSP.xy = startSSP.xy *  0.5 + 0.5; 

    vec4 endSSP = uProjectionMatrix*vec4(endP,1.0);
    endSSP.xy /= endSSP.w;
    endSSP.xy = endSSP.xy *  0.5 + 0.5; 

    vec3 vecSS = (endSSP.xyz - startSSP.xyz);
    vecSS.z=endP.z-startP.z;
    vecSS*=length(texelSize)/length(vecSS.xy);

    vec3 sampleP = vec3(0.0);
    float sampleDepth = 0.0;
    float diffZ = 0.0;
    vec4 color = vec4(0.0);

    for (int i = 1; i < 100 ; i++){
        sampleP.xy = startSSP.xy + vecSS*i;
        sampleP.z = startP.z + vecSS.z*i;

        if(sampleP.x < 0 || sampleP.x > 1 ||
	    sampleP.y < 0 || sampleP.y > 1 ||
	    sampleP.z < 0 || sampleP.z > uNearFar.y ){
	    break;
        }

        sampleDepth =linearizeDepth(texture(depthTexture, sampleP.xy).r, uNear,uFar);
        diffZ = sampleP.z - sampleDepth;
        float error = length(vecSS);

        if (diffZ>=0&& diffZ<error)
        {
            color = texture(colorBufferTexture, sampleP.xy);
            break;
        }
    }
    return color;
}

Source Han Sansで3Dリアルタイムレンダリングはじめます

ようやく仕事がおちついてきたので、openframeworksを弄ります。ここ半年、ASばっかりやってたので、var:とかがなかなか抜けない。あるある。 ofも最新にアップデードしたし、しばらくタイポグラフィとDeferred Renderingで遊んでいこうと思っています。いいタイミングで、Source Han Sansっていうオープンソースの書体がリリースされたので、こちらを主に使わせていただきます!Heavyはいい太さで、3D化しても見応えがありますね。 さっそくレンダリングします。Bulletを組み込んだので、ガチャガチャ動かすぜーとか思ってましたが・・・、 スクリーンショット 2014-09-24 18.38.34 一部おかしくなってますね・・・。法線を表示してみます。 スクリーンショット 2014-09-24 18.38.46 法線が裏返っています・・・。ポリゴンの形状は正しいようです。ofx3DFontっていうライブラリ内部で3D化する際に法線を生成しているのでそのあたりを疑ってみます。表示がおかしくなる文字を取り出してワイヤーフレームを表示。どうやら三角形分割に使っているpoly2triが効いていません。 スクリーンショット 2014-09-24 18.19.55 ポリゴンで表示。あっちでは法線が壊れていたのにちゃんと表示されている(謎)。 スクリーンショット 2014-09-24 18.20.46 フォントのアウトラインを表示。 スクリーンショット 2014-09-24 18.06.50

ひとととりデバッグしてみたところ、表示が崩れるグリフの共通の条件が判明しました。

スクリーンショット-2014-09-24-18.06

ポリゴンのアウトラインに接点がある場合、poly2trでエラーが発生するためバックアップ用途にしているof標準テッセレータでテッセレートされるんですね・・・。poly2triはきれいな3角形分割をしてくれるので気に入ってるんだけど。というわけでpoly2triに渡す際の前処理をこれから書いて見ようと思います・・・。

OpenGL サポート状況続き

前回調べた時にMacBookAirのBootcanp(Windows8)上、 Intel HD Graphic 4000で GLSL4.1 は使えないってことはわかった。調べてみると、どうやらOSXでは4.1まで使えるみたい。これってどうなのよー。Windowsの方もおねがいしますよー。

スクリーンショット-2014-02-10-09.22

こないだ作ったSMAAのサンプルもついでに対応してみた。 相変わらずwindowsでは意味不明な現象になるが、OSXではちゃんと動いた。Openframeworksのやつ、Windowsで動いてたのをOSXに持って行ったら、そのままだとうまく行かなくって、色々読んでたらOpenGLのバージョン指定が必要みたい。

ofSetCurrentRenderer(ofGLProgrammableRenderer::TYPE);

ってやるとOpenGL3.2が指定されてGLSL4.1が使えるようになった。Windowsでは何も言われなくても使えたよ・・・。まぁ最近のGLSL使うならこれ設定しておいたらいいのかな。

いろんな環境で試してみた感想。MacのShaderのコンパイラは結構うるさい。っていうかちゃんとしてる。ちゃんとしていないと動かない。ので、MACで作ればWindowsで基本的には動きそうな気がした。

OpenGLサポート状況(自分用)

GPUカードのドライバがアップデートされたりしてようやくRADEONとかGFORCEではGLSL4.3が実用的になってきてるっぽい。去年の8月くらいには4.2の機能使えねーじゃんとか思ってたのにな・・・。たまたまRADEONのアップデートが来てたので久しぶりにOpenGLのスペックをチェックしてみた。GEFORCE、RADEON共に最新のドライバではOpenGL4.4に入ってきてる。使ってるPCの利用状況調べてみた。

チェックはOpenGL Extensions Viewerでやるよ。
http://www.realtech-vr.com/glview/

メイン機のDell Presision GeForce GTX660ti  4.3まで100%対応済み。

スクリーンショット 2014-02-06 01.44.52

会社のiMacのやつ。RadeonHD6900M  同じく4.3 100%

スクリーンショット 2014-02-06 15.16.17

Macbook Air のIntel HD Graphics 4000
4.0まで100%だが、以降はかなり怪しい。もしかしてMACで見るとちがうのかな。

スクリーンショット 2014-02-06 01.33.01

3機とも開発に使ってるので一個だけグレード低いのが結構きついなぁ。たまに挙動がHD4000だけちがうなと思ってたのはこの辺りが原因なのかも。
それにしても、GeForce,Radeonともにもう4.3の機能サポートが100%ってことは、知らないうちにCOMPUTE SHADERも使えるようになってたんだ・・・。COMPUTE SHADER使ったやつで名前忘れたけどモーションブラーのアルゴリズムとかFoward+レンダリングとかいろいろ事例あったのでそのうちためしてみたいな。

SMAA、FXAAのofExample

前回の続き。SMAAの実装の紹介。

ソースは最新のこっちにした。
https://github.com/iryoku/smaa

SMAAで3回分のシェーダが必要なんだけど、shader3つも作るのはナンセンスだから1つにまとめてみた。でも、これだと1passはrgチャンネルしか使わないのでbit数の最適化ができてない。まぁいいか・・・。

バーテックスシェーダ

#include "../common/version.glsl"

/* uStep
 * 0:Edge Detection
 * 1:Weight Calculation
 * 2:BlendingWeight
*/
uniform int uStep=0;

layout(binding=0) uniform sampler2D uInpTex;
vec2 texSize = vec2(textureSize(uInpTex, 0));
#define SMAA_RT_METRICS vec4(1.0/texSize,texSize)
#define SMAA_INCLUDE_PS 0
#define SMAA_GLSL_4 1
#define SMAA_PRESET_ULTRA 1
#include "SMAA.hlsl"

noperspective out vec2 texcoord;
noperspective out vec2 pixcoord;
noperspective out vec4 offset[3];

layout(location=0) in vec3 position;

void main(){
 texcoord = position.xy * 0.5 + 0.5;
 if(uStep==2){
 SMAANeighborhoodBlendingVS(texcoord, offset[0]);
 }else if(uStep==1){
 SMAABlendingWeightCalculationVS(texcoord, pixcoord, offset);
 }else{
 SMAAEdgeDetectionVS(texcoord, offset);
 }
 gl_Position = vec4(position.xy, 0.0, 1.0);
}

ピクセルシェーダ

#include "../common/version.glsl"

/* uStep
 * 0:Edge Detection
 * 1:Weight Calculation
 * 2:BlendingWeight
*/
uniform int uStep=0;

layout(binding=0) uniform sampler2D uInpTex;
layout(binding=1) uniform sampler2D uInpTex2;
layout(binding=2) uniform sampler2D uInpTex3;

vec2 texSize = vec2(textureSize(uInpTex, 0));
#define SMAA_RT_METRICS vec4(1.0/texSize,texSize)
#define SMAA_INCLUDE_VS 0
#define SMAA_GLSL_4 1
#define SMAA_PRESET_ULTRA 1
#include "SMAA.hlsl"

noperspective in vec2 texcoord;
noperspective in vec2 pixcoord;
noperspective in vec4 offset[3];
layout(location = 0) out vec4 fOut;

void main(){
 if(uStep==2){
 fOut = SMAANeighborhoodBlendingPS(texcoord, offset[0], uInpTex, uInpTex2);
 }else if(uStep==1){
 fOut = SMAABlendingWeightCalculationPS(texcoord, pixcoord, offset, uInpTex, uInpTex2, uInpTex3, ivec4(0));
 }else{
 fOut = vec4(SMAAColorEdgeDetectionPS(texcoord, offset, uInpTex),0.0,0.0);
 }
}

多分こんな感じ。GLSLは410以降が必要。
作業用のFBOはアルファチャンネルも使うのでRGBAが必要。あと、テクスチャ用のヘッダファイルがあるのでofTextureとして登録。


ofFbo::Settings defaultSetting;
 defaultSetting.numSamples=0;
 defaultSetting.textureTarget=GL_TEXTURE_2D;
 defaultSetting.height=768;
 defaultSetting.internalformat=GL_RGBA;
 defaultSetting.useDepth=false;
 defaultSetting.useStencil=false;
 defaultSetting.width=1024;
 defaultSetting.wrapModeHorizontal=GL_CLAMP_TO_EDGE;
 defaultSetting.wrapModeVertical=GL_CLAMP_TO_EDGE;
 defaultSetting.numSamples=false;

fboRender_.allocate(defaultSetting); //入力用
 fboAA_.allocate(defaultSetting); // AA結果表示用
 fboSmaaWk_.allocate(defaultSetting); //作業用

//SMAAテクスチャ
 texSmaaArea_.allocate(AREATEX_WIDTH,AREATEX_HEIGHT,GL_RG8,false);
 texSmaaArea_.loadData(areaTexBytes,AREATEX_WIDTH,AREATEX_HEIGHT,GL_RG);
 texSmaaArea_.setTextureMinMagFilter(GL_LINEAR,GL_LINEAR);

texSmaaSearch_.allocate(SEARCHTEX_WIDTH,SEARCHTEX_HEIGHT,GL_R8,false);
 texSmaaSearch_.loadData(searchTexBytes,SEARCHTEX_WIDTH,SEARCHTEX_HEIGHT,GL_RED);
 texSmaaSearch_.setTextureMinMagFilter(GL_NEAREST,GL_NEAREST);

処理はこんな感じ。blendモードとかちゃんときっておかないと動かない。

 glDisable(GL_BLEND);
 glClearColor(0,0,0,0);

shaderSmaa_.begin();
 fboAA_.begin(false);
 glColorMask(GL_TRUE,GL_TRUE,GL_FALSE,GL_FALSE);
 glClear(GL_COLOR_BUFFER_BIT);
 shaderSmaa_.setUniform1i("uStep",0);
 shaderSmaa_.setUniformTexture("uInpTex",fboRender_,0);
 ssObj.draw();
 glColorMask(GL_TRUE,GL_TRUE,GL_TRUE,GL_TRUE);
 fboAA_.end();

 fboSmaaWk_.begin(false);
 glClear(GL_COLOR_BUFFER_BIT);
 shaderSmaa_.setUniform1i("uStep",1);
 shaderSmaa_.setUniformTexture("uInpTex",fboAA_,0);
 shaderSmaa_.setUniformTexture("uInpTex2",texSmaaArea_,1);
 shaderSmaa_.setUniformTexture("uInpTex3",texSmaaSearch_,2);
 ssObj.draw();
 fboSmaaWk_.end();

 fboAA_.begin(false);
 shaderSmaa_.setUniform1i("uStep",2);
 shaderSmaa_.setUniformTexture("uInpTex",fboRender_,0);
 shaderSmaa_.setUniformTexture("uInpTex2",fboSmaaWk_,1);
 ssObj.draw();
 fboAA_.end();
 shaderSmaa_.end();

Openframeworksのサンプルコードはこちら(vs2012のみー)

ちなみにこのなかのofShaderHelperは、#includeとか使うために適当に作ったやつだから信用できないwGLSL4系だと結構モジュール化とかやりやすくなってるから需要あると思うので、ちゃんとしたやつをofShaderの中で強化してもらえるといいなぁ。

サンプルではFBOへの出力を単純にポストプロセスでAAかけてて、汎用的に使えると思う。最適かどうかはおいておいて、FXAA,SMAAを比較することで、メリット、デメリットが見えてくるう。SMAAは画質重視で重い。FXAAはディテールの破壊があるが高速。カメラワーク、オブジェクトの動きが激しいシーンではFXAAにスイッチするとかして使い分けるのもいいかもしれない。てかDofとか入れるとほとんどAA不要な気がする。

スクリーンショット 2014-02-04 12.01.35

ところでSMAAなんだけど、MacbookAir(Intel HD 4000)でどうしてもうまく動いてくれないのだ。なんでだろー。わからーん。

ofx3Dfont使ってみた

レンダリングエンジンに入れてみたところ、ちゃんと表示されてるみたい。ただ、このライブラリはtexcoord作ってくれないので、適当に自前で貼ってみたけど、押し出しの側面のこと考えるの難しいな・・・。下のやつはごまかしで貼ってあるのでカメラが近づくとおかしいのがバレる(前後同じ座標で伸びてるだけ)。”大草原不可避”は最近覚えたての単語w

スクリーンショット-2014-01-25-01.51

ofx3Dfontは去年ひっそり公開したofAddonデス・・・。説明書いてないけど、動的にofMesh作ったり、ofTrueTypeFontみたいに直接文字列をDrawしたりできます。ofTryeTypeFontUL2っていうのも必要。こっちはharfbuzzをincludeしたTypoGraphyの強化モジュール。ほとんどofTrueTypeFontと同じだけど、カーニングペア、リガチャ、フォントスクリプト、日本語プロポーショナル、TextAligmentなど、いろんな拡張ができる。ちゃんとしたTypoGraphyが必要なときは少し役に立つかもしれません・・・。

スクリーンショット 2013-12-03 00.28.38

スクリーンショット 2013-12-03 01.55.07

さぁようやく次はインタラクティブ化だ。

 

ポストプロセスアンチエイリアス実装(FXAA,SMAA)

Defferdの課題の一つ、アンチエイリアスを実装してみた。AAについて小一時間調べた結果、試したのはFXAAとSMAA。調べてみるとこの辺りはOpenGLでの実装実績も多く、思ったよりも簡単に実装ができた。最近の高解像度化でギザギザはあんまり気にならないんだけど。

スクリーンショット 2014-01-23 23.48.10これは拡大しないとわからないけど、No AA

まずはFXAA。

fastというだけあってとにかく高速。1PassだしFPSへの影響は3%ぐらい。下記の出力画像はちょっと例題としては良くないけど、AA自体はかなり綺麗に入ってる。ブラー効果が強いとは色々なとこに書かれていたが、確かに強い。木目のDetailとか、マテリアルの細かい陰影など、特にカメラに近づいたもので、はっきり見えるはずの部分が潰れてしまうことがあった。遠くに細かいオブジェクトをたくさん出すと、Dofっぽくていい感じになってる。

実装については、元ネタはこのあたりのようだけど、Processingに含まれてるコードが簡単に移植できた。ちなみにポストAAってどのタイミングでかければいいのか悩んだけど、とりあえず一番最後すべてのプロセスが終わったあとにRGB8のFboを用意して出力するようにしてみた。MSAAほどではないけど、簡単にできるのでオススメです・・・。

スクリーンショット 2014-01-23 23.47.55FXAA (Fast Approximate Anti-Aliasing)

次に、SMAA。

FXAAはソース読むと理解できたんだけど、SMAAは深く読んでない。けど、3passで出力結果のイメージを見た感じ、pass1 でエッジ抽出(ベクトル)。 pass2で1のエッジのなかでAAやるかどうか判定(強さ)、step3 で2の情報つかって実行みたいなかんじ?読んでないから適当だけど、pass2 の結果をみるとかなりエリアを絞っているので、AAがかかるべきところをより厳密に決定しているようだった。結果は評判通り、画質に関してはすごくいい感じ。ただし、全体の処理コストの中ではそれほど大きくないが、FXAAの倍近く負荷がありそう。

実装についても少し書いておくと、ソースはこれ。HLSLとGLSL両方でつかえるっていう斬新なコードでした・・・。

・・・ちょっと長くなりそうなので、ここらで一旦寝ます・・・w(続き)

スクリーンショット 2014-01-23 23.48.03Subpixel Morphological Antialiasing

結論:

ポストプロセスのAAはいわゆる画像処理なわけだけど、画像処理でここまで出来るということに普通に驚いた。ジャギった画像に対してAAできるわけだから、3Dだけじゃなくていろんな応用ができそう。そういえば、写真を2値化したりエッジ抜いたりするときにジャギるの、綺麗にしたかったんだよなぁ・・・。試してみよう。