iOS - OpenGLESでカスタムGPUImageFiltersを作成するには

Question

GPUImageのカスタムフィルタを作成する方法を知りたいと思います。私はブラッドラーソンは、これらの数字とその意味を知っていたか知って興味

varying highp vec2 textureCoordinate; 

uniform sampler2D inputImageTexture; 

void main() 
{ 
    lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate); 
    lowp vec4 outputColor; 
    outputColor.r = (textureColor.r * 0.393) + (textureColor.g * 0.769) + (textureColor.b * 0.189); 
    outputColor.g = (textureColor.r * 0.349) + (textureColor.g * 0.686) + (textureColor.b * 0.168);  
    outputColor.b = (textureColor.r * 0.272) + (textureColor.g * 0.534) + (textureColor.b * 0.131); 
    outputColor.a = 1.0; 

    gl_FragColor = outputColor; 
} 

：今、私は、このコード（これは例として、GitHubの上のブラッドラーソンによって提供された）からセピア色のカスタムフィルタを作成することができます。私はどこからでも検索し、これに関するチュートリアルは見つかりませんでした。誰かがPho​​toshopで自分のカスタムフォトフィルタを作成してから.fshコードファイルに変換するように案内できますか？

たとえば、Photoshopで画像をピンク色に変更する場合は、上記のコードでこれらの数値を取得するにはどうすればよいですか？

Answer 1

あなたの質問は、文字通りwrite an entire book on how to create custom shadersと少し広範囲ですが、よく尋ねられる質問ですが、私は少なくとも正しい方向を指すことができます。

GPUImageのフィルタは、OpenGLシェーディング言語（GLSL）で書かれています。 OpenGLターゲット（Mac、デスクトップLinux）とOpenGL ES（OpenGL ES）（iOS、組み込みLinux）には、後者のシェーダが精度の高い修飾子を使用している点で若干の違いがあります。それ以外は、構文は同じです。

シェーダプログラムは、頂点シェーダとフラグメントシェーダの一致するペアで構成されています。頂点シェーダは各頂点上で動作し、通常は幾何学的操作を処理します。フラグメントシェーダは、各フラグメント（一般にピクセル）上で動作し、そのフラグメントのスクリーンに出力されるカラーを計算します。

GPUImageは画像処理を扱うため、ほとんどの場合、フラグメントシェーダとストックの頂点シェーダの1つに頼って作業することになります。上記は、入力テクスチャ（処理パイプラインの前のステップからの画像）の各ピクセルを取り込み、そのカラー値を操作し、結果をgl_FragColorビルトインに書き出すフラグメントシェーダの例です。

main（）関数の最初の行：

lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate); 

座標（第一段階における頂点シェーダから渡された）所定のAT inputImageTextureの画素の色を読み取るためにtexture2D()関数を使用します。これらの座標は0.0〜1.0の範囲に正規化されているため、入力画像のサイズには依存しません。

値は、1つのタイプ内に複数のコンポーネントを含むベクトルタイプ（vec4）にロードされます。この場合、赤、緑、青、およびアルファの色成分はこの4成分ベクトルに格納され、.r、.g、.b、および.aを介してアクセスできます。 0-255の値での作業に慣れている場合に備えて、色成分値も0.0〜1.0の範囲に正規化されます。

セピアトーンフィルタの特定のケースでは、着信カラーを送信カラーに変換するセピアトーンエフェクトにa well-known color matrixを適用しようとしています。これには行列の乗算が必要です。これは上記のコードで明示的に行います。実際のフレームワークでは、これは、シェイダー内の組み込み型を使用して行列演算として行われます。

特定の効果を得るために色を操作する多くの方法があります。 GPUImageフレームワークは、Adobeや他の組織によって公開されている色変換標準などに大きく依存しています。特定のエフェクトについて、既存のインプリメンテーションの1つが、独自のインプリメンテーションを作成する前に、必要な機能を実行するかどうかを特定する必要があります。

自分で書きたいと思っている場合は、まず入力カラーを任意の出力に変換するために必要な数学を見つけます。一度それがあれば、シェーダコードを書くのは簡単です。

GPUImageのルックアップフィルタには別の方法があります。これは、模擬したいフィルタ条件でPhotoshopで操作する参照画像から始まります。そのフィルタリングされた参照画像を取得し、それを参照フィルタに添付します。これは、入力カラーとそれに対応するルックアップの間で、任意のカラー操作を提供するために変換します。

シェーダを作成したら、それを中心にいくつかの方法で新しいフィルタを作成できます。私の新しいは、下位互換性を忘れてしまった場合、そのプロセスを大幅に簡素化すると言えます。