FC2ブログ

頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


フロントカメラが得た画像を自分の顔のテクスチャ用にシェーダに渡したい(1)

Objective-CでCGAffineTransformからSCNMatrix4へ変換する
↑この続き、というか関連記事というか。
iPhone X系のTrueDepth CameraとARKitを使って自分の顔画像で遊ぶ話だ。

Apple公式サンプルコードCreating Face-Based AR Experiences(※1)ではshader modifiersを使っているのだけど、普通に頂点シェーダとフラグメントシェーダを使いたい。というのもshader modifiersはXcodeでは書きにくい(※2)し、簡易である反面凝ったことがやりにくい。

ということで、頂点シェーダ→フラグメントシェーダを使い、かつフラグメントシェーダにフロントカメラで得た動画の画像を渡すようにしたい。
なお本記事中の「サンプルコード」とはCreating Face-Based AR Experiencesを示す。


【テクスチャとしてpng画像を使う】

サンプルのテクスチャ画像

↑まずはこのように普通の画像、例えばpng画像を顔面の3Dオブジェクトのテクスチャとして使う。この場合はshader modifiersさえ不要。
ちなみにこの画像はマイクラのクリーパーを参考にしたもの。
- (SCNNode *)renderer:(id)renderer nodeForAnchor:(ARAnchor *)anchor
{
    ARSCNView *sceneView = (ARSCNView *)renderer;
    
    if ([anchor class] !=  [ARFaceAnchor class]) return  nil;
    
    ARSCNFaceGeometry *faceGeometry = [ARSCNFaceGeometry faceGeometryWithDevice:sceneView.device];

    SCNMaterial *material = faceGeometry.firstMaterial;
    material.diffuse.contents = [UIImage imageNamed:@"creeper.png"];

    //(以下略)
}
↑このようにARSCNViewDelegateメソッド内でUIImageオブジェクトを与える。

実行結果

↑その結果がこんな感じ。サンプルコードのTexturedFace.swiftに相当するところ。


【フラグメントシェーダにテクスチャとしてpng画像を渡す】

次に、頂点シェーダとフラグメントシェーダを使い、フラグメントシェーダにpng画像を渡してみる。
{
    SCNProgram *program = [SCNProgram program];
    program.vertexFunctionName = @"myVertex";
    program.fragmentFunctionName = @"myFragment";
    material.program = program;

    SCNMaterialProperty *imageProperty = [SCNMaterialProperty materialPropertyWithContents:@"creeper.png"];
    [material setValue:imageProperty forKey:@"faceTexture"];
}
↑先ほどのコードのmaterialに追記する。
ここで指定するkeyの文字列をフラグメントシェーダで使う。
fragment half4 myFragment(SimpleVertex in [[stage_in]],
                          texture2d faceTexture [[texture(0)]] )
↑フラグメントシェーダの引数を受けるところ。ここで先ほどの文字列と同じものにする。

オブジェクトを拡大した場合の実行結果

↑実行結果。頂点シェーダで顔のオブジェクトのサイズを1.5倍にしている(※3)。

これで頂点シェーダ、フラグメントシェーダを使うことができるようになった。


2へ続く。


※1 Creating Face-Based AR Experiences | Apple Developer Documentation


※2 shader modifiersはコードを文字列の状態で与えるので、Xcodeでコードではただのテキストファイルとして扱われてしまい↓こんな感じで見える。


shader modifiersをXcodeで見た場合のスクショ

↑黒一色で見にくいし、複数行をコメントにする、などの操作もできない。
いや、もしかしたらXcodeの設定でできるのかな、、、?


※3 一律に大きくするくらいだとshader modifiersでも簡単にできる。Appleのサンプルコード内のVideoTexturedFaceだと
_geometry.position.xyz *= 1.50;
のように一行だ。



<< フロントカメラが得た画像を自分の顔のテクスチャ用にシェーダに渡したい(2)  TopPage  iPhone XS Maxで撮影した動画はTwitterに投稿できないかも >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/1267-2dfb1e9a




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad