Hatena::ブログ(Diary)

Over&Out その後 このページをアンテナに追加 RSSフィード

2016-04-16

GLKView の描画内容を AVAssetWriter を用いて動画としてエクスポートする

すごい雑なメモですが、ちゃんと書くにはまだ理解が足りてなくて、かといってローカルに放置するとまた同じことを一から自分で調べそうな気がするので、とりあえずアップ。


※古いコードを流用している部分もあるため、一部ObjC、一部Swiftです。


やりたかったこと

標題の通り、「GLKView の描画内容を AVAssetWriter に渡して動画として書き出す」ということがやりたかった。リアルタイムに処理する必要があって、要件としては20fps。


AVAssetWriterInputPixelBufferAdaptor オブジェクトがあって、

@property (nonatomic, strong) AVAssetWriterInputPixelBufferAdaptor *pixelBufferAdaptor;

こう生成した CVPixelBufferRef があって、

CVPixelBufferRef pixelBuffer = NULL;
CVPixelBufferPoolCreatePixelBuffer(nil, self.pixelBufferAdaptor.pixelBufferPool, &pixelBuffer);

ここに GLKView への描画内容を反映すれば、

[self.pixelBufferAdaptor appendPixelBuffer:pixelBuffer withPresentationTime:timestamp];

こんな感じで AVAssetWriter で動画エクスポートできる。


・・・ということはわかっていたけど、CVPixelBuffer に GLKView の描画内容をどうやったら渡せるのかがわからなかった。


試した方法1: テクスチャキャッシュを利用して OpenGL の FBO を書き出す

ググッてこちらで見つけた方法。以下にコードがある。

`CVOpenGLESTextureCacheCreate` と `CVOpenGLESTextureCacheCreateTextureFromImage` なるメソッドを使用してテクスチャキャッシュなるものを生成して Frame Buffer Object (FBO) を云々する(処理内容を理解できていないので適切な説明ができない)。GPUImage と同様の方法らしい。


自分のプロジェクトに移植してみたがうまく動かず、上のコードと何が違うのかにらめっこしていたが、READMEをよく読むと 元コードもちゃんと動作してない と書いてあり、リファレンスコードなしであれこれ試行錯誤する時間もないので、いったん別の方法を考えることに。


試した方法2: GLKView のスナップショットを取得する

UIView のスナップショット取得はそれなりに重い印象があったのと、リアルタイム処理(20fps)の必要がありなるべくUIKitのレイヤーで処理したくなかったので当初は思いついても頭から除外していた選択肢。


ただ方法1が頓挫して、今日中に落とし所を見つけたかったので、少々フレームレートが落ちてもいいので試してみよう、ということでこっちでやることに。


下記によると、GLKView の描画内容は `renderInContext:` ではスナップショットとれないらしい。Core Graphics だからそりゃそうか。

You need to grab the view's framebuffer pixel data using OpenGL ES. You can't do it with renderInContext:.


で、同回答にリンクがあったのが下記。

GPUImage の作者 Brad Larson さんの回答。`glReadPixels()` でピクセルデータを取り出す方法と、テクスチャキャッシュを利用する方法が提示されている。後者は方法1で断念した方向なので厳しい・・・


前者の `glReadPixels()` を利用する方法は、下記に UIImage に変換するまでのコードがあった。

- (UIImage*)snapshotRenderBuffer {

    // Bind the color renderbuffer used to render the OpenGL ES view
    // If your application only creates a single color renderbuffer which is already bound at this point, 
    // this call is redundant, but it is needed if you're dealing with multiple renderbuffers.
    // Note, replace "_colorRenderbuffer" with the actual name of the renderbuffer object defined in your class.
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);

    NSInteger dataLength = backingWidth * backingHeight * 4;
    GLubyte *data = (GLubyte*)malloc(dataLength * sizeof(GLubyte));

    // Read pixel data from the framebuffer
    glPixelStorei(GL_PACK_ALIGNMENT, 4);
    glReadPixels(0.0f, 0.0f, backingWidth, backingHeight, GL_RGBA, GL_UNSIGNED_BYTE, data);

    // Create a CGImage with the pixel data
    // If your OpenGL ES content is opaque, use kCGImageAlphaNoneSkipLast to ignore the alpha channel
    // otherwise, use kCGImageAlphaPremultipliedLast
    CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, data, dataLength, NULL);
    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
    CGImageRef iref = CGImageCreate(
                                    backingWidth, backingHeight, 8, 32, backingWidth * 4, colorspace, 
                                    kCGBitmapByteOrder32Big | kCGImageAlphaNoneSkipLast,
                                    ref, NULL, true, kCGRenderingIntentDefault);

    // (sayeth abd)
    // This creates a context with the device pixel dimensions -- not points. 
    // To be compatible with all devices, you're meant to keep everything as points and a scale factor;  but,
    // this gives us a scaled down image for purposes of saving.  So, keep everything in device resolution,
    // and worry about it later...
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(backingWidth, backingHeight), NO, 0.0f);
    CGContextRef cgcontext = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(cgcontext, kCGBlendModeCopy);
    CGContextDrawImage(cgcontext, CGRectMake(0.0, 0.0, backingWidth, backingHeight), iref);

    // Retrieve the UIImage from the current context
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    // Clean up
    free(data);

    return image;
}

(結局 Core Graphics を経由するのか。。)


で、最終的に以下の回答に行きつく。


あれ、`snapshot` なんてメソッドあったっけ?と思って調べてみたら、GLKView に元から用意されていた・・・!

@property (readonly, strong) UIImage *snapshot;

最終的にうまくいった方法

guard let cisnapshot = CIImage(image: snapshot) else { fatalError() }
drawImage = cisnapshot.imageByCompositingOverImage(drawImage)

glView.ciContext.render(
    drawImage,
    toCVPixelBuffer: pixelBuffer,
    bounds: drawImage.extent,
    colorSpace: CGColorSpaceCreateDeviceRGB())

上記コードの前提

  • GLKView の `snapshot` メソッドで取得した UIImage が `snapshot` に入っている
  • `drawImage` は諸々の処理を経由した CIImage オブジェクト

2014-12-11

「FILTERS」で学ぶ GLSL

GLSL を書いてオレオレフィルターをつくれる」というコンセプトのカメラアプリがリリースされました。


f:id:shu223:20141211164529j:image:w600

no title



シェーダを書いて動的に適用する、というアイデア自体は昔からあるものですが、


wonderfl や jsdo.it をつくったカヤック製アプリなので、

  • フォークできる
  • リアルタイムプレビューしてくれるエディタでコード(GLSL)を書ける
  • シェアできる

という非常に魅力的な点があります。あと前述の従来品はサンプルだったりするので、もちろんカメラアプリとしてのクオリティも全然違います。



既に魅力的なフィルタがいろいろとアップされています。


f:id:shu223:20141211164641g:image


GLSL には興味があったものの、なかなか勉強する機会がなかったので、他の方がつくったフィルタをフォークしてコード(GLSL)を読みつつコメントを入れていくということをやってみました。


タイトルの後ろに (commented) と入れているので、よろしければ参考にしてみてください。*1


以下、いくつか紹介していきます。


グレースケールにする

入力画像をグレースケールに変換するフィルタ。


f:id:shu223:20141211164705j:image


これはフィルタを新規作成すると生成されるデフォルトテンプレートの最後の行だけいじってコメントを入れたもの。GLSLを書いてみる最初の1歩として、この3行を理解するといいかもしれません。


grayscale (commented)
void main()
{
    // 座標を取得
    vec2 uv  = iScreen;
    
    // カメラからの入力テクスチャから、該当座標の色を取得する
    vec4 color = texture2D(iCamera, uv);
  
    // RGBのGとBをRで置き換えた色を生成して適用
    gl_FragColor = vec4(color.r,color.r,color.r, 1.0);
}

歪める&青っぽくする

入力画像を歪め、全体的に青っぽくするフィルタ。


f:id:shu223:20141211164756j:image


iCamera(カメラからの入力テクスチャ) + texture2D関数で、入力画像の任意の座標の色をとってこれることを利用して、座標をx,yそれぞれ2乗した先の画素値をとってきて歪みを実現しています。


water (commented)
void main()
{
    // 座標取得
    vec2 scr = iScreen;
  
    // 座標に応じて近隣の色を取得する
    // (カメラの入力テクスチャから、注目座標のx,yを2乗した座標の色をとってくる
    vec4 color  = texture2D(
      iCamera,
      vec2(
        pow(scr.x, 2.0),
        pow(scr.y, 2.0)
      )
    );
  
    // 青っぽくして適用
    gl_FragColor = vec4(
      vec3(
        color.r *   0.0 / 255.0,
        color.g * 153.0 / 255.0,
        color.b * 204.0 / 255.0
      ),
      1.0
    );
}

画像の一部にモザイクをかける

ピンポイントにモザイクをかけるフィルタ。ピンチイン・アウトにも対応。


f:id:shu223:20141211164814j:image


モザイク処理は、座標値を floor 関数で粗くして周辺画素と同じ色を使用することで実現されています。


また、出力位置が円の中にあるかどうかでモザイクをかける・かけないを判定して、円形のモザイク処理が実現されています。


ピンチイン・アウトに対応しているので座標処理がちょっと複雑な感じがする場合は、いったん iSize をなくして考えてみるとわかりやすいかもしれません。


Pinpoint Mosaic
// 白色を定数として定義
const vec3 white = vec3(1.0, 1.0, 1.0);

// 座標positionが、半径size・中心座標offsetにある円の内側にあるかを判定する
bool inCircle(vec2 position, vec2 offset, float size) {
    float len = length(position - offset);
    if (len < size) {
        return true;
    }
    return false;
}

void main( void ) {
    // 座標取得
    vec2 uv = iScreen;
    // 座標を粗くする(15 x ピンチサイズ倍して切り捨て)
    uv = floor(uv * iSize * 15.0) / 15.0 / iSize;
    // 粗くした座標の色を取得
    vec4 color = texture2D(iCamera, uv);
    
    // 白色(whiteは定数として定義済み)を生成
    vec3 destColor = white;
    // 出力位置を計算
    vec2 position = (gl_FragCoord.xy * 2.0 - iResolution) / min(iResolution.x, iResolution.y);
    
    // 出力位置が円の内側にあるか?
    if (inCircle(position, iPosition, 1.0 + (1.0 - iSize))) {
        // モザイク化する(粗くした座標の色を使用)
        destColor = color.rgb;
    }
    else {
      
        // モザイク化しない(元々の色を使用)
        destColor = texture2D(iCamera, iScreen).rgb;
    }
    
    // 決定した色を出力出力
    gl_FragColor = vec4(destColor, 1.0);
}

所感

FILTERS、GLSLの勉強におすすめです!


(GLSL関連記事)


(余談)iOS 8 とシェーディング言語

シェーダが書けると iOS の Core Image のフィルタ(CIFilter)も自作できるようになります。(iOS 8 から)


拙作『iOS8-Sampler』にもシェーダを書いて作成したカスタムフィルタのサンプルがいくつか入っています。


(2014.12.12追記)他のアプリからFILTERSのフィルタを使う



ってツイートしたら、中の人からリプライがあり、なんと既に Photo Editing Extension 対応してるとのこと。すごい!


標準の「写真」アプリから試してみました。


f:id:shu223:20141212134814j:image


現状では、上位30個ぐらいのフィルタが選べるようです。



*1:なお、コードをシンプルにするため、処理に使われていない関数や定数は削除しました。

2014-10-11

【oFセミナーメモ2】 GLSL(Shader)テクニック

セッション1「C++テクニック」(boostライブラリの使い方)のメモ に続いて、セッション2 のメモです。


セッション2 : Shaderテクニック

講師 : 藤本直明、神田竜、他

GLSL(Shader)と呼ばれるOpenGLの機能を解説し、それを応用した映像表現を学びます。今回は、3Dを中心としたシェーディング手法を中心に解説していきます。


GLSLとは

  • OpenGLと一緒につかうシェーディング言語
  • シェーディング: 3DCGの見た目を決める
    • 光源の計算
    • 陰影の計算
    • ピクセルの計算
  • C言語っぽい見た目
  • グラボで並列処理
    • CPUで処理するよりも高速

ofShader

  • oFではofShaderを使う
  • 適用部分をbeginとendで挟む
  • oFからパラメータも渡せる
mShader.load("test.vert", "test.frag", "test.geom");
mShader.begin();

mShader.setUniform1f("rad", 10);

mVbo.draw(GL_POINTS, 0 , NUM);
mShader.end();

GLSLの種類

処理順に、

  • Vertex shader
  • Geometry shader
  • Fragment shader

Vertex Shader

頂点座標の変換

  • 頂点をうねうねさせる
  • ライティングのための準備

Geometry Shader

頂点の数の増減

  • 法線の方向にヒゲを生やす
  • ポリゴンを分割する
    • LOD (Level of Detail)・・・カメラの近くは繊細に、遠くは荒くても良い、みたいな動的に頂点数を増減する、みたいな使い方

省略可能


Fragment Shader

最終的な色を決める

  • ライティング
  • いらない部分を破棄する
  • ポストエフェクト

"tea pot discard glsl" で画像検索すると、ティーポットをFragment Shaderで処理した例が見れる


ピクセルシェーダとも呼ばれる


フラグメントシェーダを使ったポストエフェクト

講義資料:

ピクセルシェーダ on ofxPostGlitch|ひつじ|note


ofxPostGlitch

使用手順
  • addons フォルダに入れる
  • shader が入ってるフォルダ(shaders_pg)を、プロジェクトフォルダ配下の bin/data 直下に入れる
    • shaderは実行時に読み込まれるため、バイナリのデータフォルダに入れる必要がある

ofApp.h

#include "ofxPostGlitch.h"
ofxPostGlitch postGlitch;
ofFbo buffer;

ofApp.cpp

void ofApp::setup(){

    buffer.allocate(1024, 768);     // バッファ確保
    
    postGlitch.setup(&buffer);      // fboのポインタを渡す
}
void ofApp::draw(){
    
    // FBOに円を描画
    buffer.begin();
    ofClear(0, 0, 0);
    ofSetColor(255, 0, 0);
    ofCircle(100, 100, 100);
    buffer.end();

    // エフェクト選択
    postGlitch.setFx(OFXPOSTGLITCH_INVERT, ofGetKeyPressed());

    // エフェクトをかける
    postGlitch.generateFx();

    // FBOの内容を画面に描画
    buffer.draw(0,0);
}

setFxの引数を変えればエフェクトが変わる

postGlitch.setFx(OFXPOSTGLITCH_GLOW, ofGetKeyPressed());

ofxPostGlitchType一覧(ヘッダより)

enum ofxPostGlitchType{
	OFXPOSTGLITCH_CONVERGENCE,
	OFXPOSTGLITCH_GLOW,
	OFXPOSTGLITCH_SHAKER,
	OFXPOSTGLITCH_CUTSLIDER,
	OFXPOSTGLITCH_TWIST,
	OFXPOSTGLITCH_OUTLINE,
	OFXPOSTGLITCH_NOISE,
	OFXPOSTGLITCH_SLITSCAN,
	OFXPOSTGLITCH_SWELL,
	OFXPOSTGLITCH_INVERT,
	OFXPOSTGLITCH_CR_HIGHCONTRAST,
	OFXPOSTGLITCH_CR_BLUERAISE,
	OFXPOSTGLITCH_CR_REDRAISE,
	OFXPOSTGLITCH_CR_GREENRAISE,
	OFXPOSTGLITCH_CR_REDINVERT,
	OFXPOSTGLITCH_CR_BLUEINVERT,
	OFXPOSTGLITCH_CR_GREENINVERT
};

円にかけてみた例:

f:id:shu223:20141011214001j:image:w500

(左がOFXPOSTGLITCH_TWIST、右がOFXPOSTGLITCH_SWELL)


フラグメントシェーダ

// 1ピクセルごとにこの処理が行なわれる
void main (void)
{
    // 自分の座標を取得
	vec2 texCoord = vec2(pos.x , pos.y);
    
    // 画像内のその座標における色を取得
	vec4 col = texture2DRect(image,texCoord);;
    
    // 反転させる
	col.r = 1.0 - col.r;
	col.g = 1.0 - col.g;
	col.b = 1.0 - col.b;
    
    // 反転後の色を適用
	gl_FragColor = col;
}

`gl_FragColor` に突っ込んだ色( vec4 構造体)が最終的な色になる。


GLSLのバージョンについて

  • oF上でさくっと動かせるバージョンは120と150
  • oFのサンプル、vboMeshDrawInstancedExample のシェーダを見ると、バージョン120と150の違いがわかる
#version 120
#version 150

  • 言語の仕様が全然違う
    • 最後 `gl_FragColor` につっこむのは120の仕様
    • ofxPostGlitch は120ベース

oFで150を使う場合は、

#define USE_PROGRAMMABLE_GL 1

をヘッダで定義する


(あとで追記)パーティクルにテクスチャを貼る

聞くだけで精一杯だったのであとで追記します。


oFでのシェーディング

固定機能シェーダ
  • OpenGLに元々入っている
  • フラットシェーディング
  • グローシェーディング
  • ライティング

- ofLightとofMaterial


プログラマブルシェーダ
  • 自分でプログラムでシェーディングを記述できる
  • 固定機能シェーダの内容をすべて実現できる(が、全部自分で書かなければならない。大変。)
  • vertex shader

ライトの種類

(配布pdfがすごく詳しいので、メモは省略)


f:id:shu223:20141011212906j:image:w400

(この画像はoFのサイトにあったもの)


サンプル:multiLightExample

examples/gl/multiLightExample


球の解像度

ofSetSphereResolution(128);

f:id:shu223:20141011212822j:image:w500


128だからツルツル、10とかにすると荒くなる


f:id:shu223:20141011213048j:image:w500


解像度落として、smoothlightingをオフにすると、

ofSetSmoothLighting(false);
ofSetSphereResolution(10);

-> フラットシェーディング


法線ベクトルの求め方

ポリゴンの2つの辺の外積を計算する

ofVec3f c = a.crossed(b);

// 単位ベクトルにする
c.normalize();

拡散光の求め方

物体の法線とライト方向の内積から、拡散光が計算できる

float c = a.dot(b);

※固定機能シェーダを使う場合にはOpenGLが計算してくれるので、自分で計算する必要はない


グローシェーディング

球のシェーディングとかのときに、 滑らかな曲面を表現するために、隣り合う平面の法線を平均したものをそれぞれの面の法線とする 方法


oF の `ofSetSmoothLighting` をオンにした状態


2009 | 08 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 11 | 12 |
2017 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2018 | 02 |