フィルターとトランジション - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

短いビデオSDKを使用すると、カスタムエフェクトを作成できます。 OpenGL ES 3.0で作成されたカスタムOpenGL ESシェーダーを使用することで、エフェクト設定ファイルに基づいて目的のフィルターとトランジションを設定できます。このトピックでは、OpenGL ESに関するノウハウについては説明しません。 OpenGL ESおよびシェーディング言語の基本的な理解があると仮定します。

概要

フィルターまたはトランジションリソースパッケージフォルダーには、config.jsonという名前のエフェクト設定ファイルと一部の画像素材が含まれます。ショートビデオSDKでビデオを編集または録画するときに、トランジションとフィルターを使用できます。フィルターまたはトランジションを適用するには、関連する編集または記録操作を呼び出すときに、設定済みのリソースパッケージフォルダーを指定します。

エフェクト設定ファイルの設定

効果設定ファイルはJSON形式で、完全なレンダリングプロセスを記述します。設定ファイルには2つのレベルがあります。第1のレベルは、効果に関する基本情報を記述し、第2のレベルは、ノードツリーを使用して、効果がどのように実装されるかを記述します。

最初のレベル-基本情報

次の表に、エフェクトの基本情報を示します。

パラメーター	説明
name	エフェクトの名前。
module	モジュール識別子。このパラメーターの値は、`ALIVC_GECF`である必要があります。
version	バージョン番号。値: 1。
type	エフェクトのタイプ。有効な値: 1と2。 1はフィルタを示し、2は遷移を示します。
nodeTree	エフェクトの実装方法を説明するために使用されるノードツリー。詳細については、「第2レベル-ノードツリー」をご参照ください。

次のコードは、Intenseフィルターの設定ファイルの設定方法を示しています。

{
    "name": "Intense",
    "module": "ALIVC_GECF",
    "version": 1,
    "type": 1,
    "nodeTree": [
        {
            "nodeId": 0,
            "name": "Intense",
            "fragment": "/** ...... */",
            "textures": [
                {
                    "name": "inputImageTexture",
                    "srcType": "INPUT_NODE",
                    "nodeId": 0
                },
                {
                    "name": "inputImageTexture2",
                    "srcType": "IMAGE",
                    "path": "color.png"
                }
            ]
        }
    ]
}

第2レベル-ノードツリー

ノードツリーnodeTreeは、1つ以上のノードを含み、レンダリングプロセスを記述するために使用されます。

次の図は、ショートビデオSDKでのレンダリングプロセスを示しています。

前の図に示すように、レンダリングプロセスは、一連のノードで構成されるツリー構造に抽象化されます。

入力ノードINPUT_NODEは入力ソースを表します。ビデオを録画する場合、入力ノードはカメラによって収集された画像データストリームです。ビデオを編集すると、入力ノードは現在のビデオストリームになります。設計では、複数の入力ノードが存在できます。たとえば、2つのビデオクリップ間のトランジションを適用する必要がある場合、最初のビデオクリップはINPUT_NODE0で、2番目のビデオクリップはINPUT_NODE1です。
中央のノードツリーは、エフェクト設定ファイルのnodeTreeパラメーターを表します。ノードツリーは、1つ以上のレンダリングノードを含むことができます。ご覧のとおり、ノードツリーのキーはレンダリングノードの構成です。
出力ノードOUTPUT_NODEは、レンダリングされたビデオストリームを表します。プレビューモードでは、出力ノードは画面上にコンテンツを生成します。プロダクションモードでは、出力ノードはエンコーダでコンテンツを生成します。

ノード

ノードは、レンダリング中の描画プロセスで関連する構成を指定します。設定には、カスタムエフェクトに必要なシェーダーコードと関連するパラメーターの説明が含まれています。次の表に、ノードを定義するパラメーターを示します。

パラメーター	説明
nodeId	ノードの ID です。
name	ノード名。
頂点	頂点シェーダーコード。The vertex shader code. このパラメーターは、vertexPathパラメーターと同じ機能を持ちます。 2つのパラメーターのいずれかを宣言できます。このパラメーターを指定しない場合、ショートビデオSDKはデフォルトで次の実装を実行します。 `attribute vec4 position; attribute vec4 inputTextureCoordinate; varying vec2 textureCoordinate; void main() { gl_Position = position; textureCoordinate = inputTextureCoordinate.xy; }`
vertexPath	頂点シェーダーコードが存在するファイルへのパス。このパラメーターは、vertexパラメーターと同じ機能を持ちます。 2つのパラメーターのいずれかを宣言できます。
attributes	属性のリスト。このパラメーターは、頂点シェーディングで属性の名前とタイプを宣言するために使用されます。 type: POSITIONおよびTEXTURECOORDの有効な値。 POSITIONは頂点座標を示し、TEXTURECOORDはテクスチャ座標を示します。このパラメーターはオプションです。このパラメーターを指定しない場合、ショートビデオSDKはデフォルトで次の実装を実行します。 `[ { "name": "position", "type": "POSITION" }, { "name": "inputTextureCoordinate", "type": "TEXTURECOORD" } ]`
フラグメント	フラグメントシェーダーコード。The fragment shader code. このパラメーターは、fragmentPathパラメーターと同じ機能を持ちます。 2つのパラメーターのいずれかを宣言できます。
fragmentPath	フラグメントシェーダーコードが存在するファイルへのパス。このパラメーターは、フラグメントパラメーターと同じ機能を持ちます。 2つのパラメーターのいずれかを宣言できます。
テクスチャ	テクスチャのリスト。このパラメーターは、フラグメントシェーダーの`sampler2D`テクスチャの属性を指定するために使用されます。これらの属性は次のとおりです。 name: テクスチャの名前。 srcType: テクスチャデータソースのタイプ。描画するテクスチャデータの取得元を表します。有効な値： IMAGE: テクスチャが画像に由来することを示します。このタイプでは、`path`属性を宣言し、イメージファイルをリソースパッケージに配置する必要があります。 INPUT_NODE: テクスチャが入力ノードから渡された画像データから来ることを示します。この型は、nodeId属性を宣言する必要があります。 CUSTOM_NODE: テクスチャがカスタムノードで処理された画像データから取得されることを示します。この型は、nodeId属性を宣言する必要があります。 nodeId: ノードのID。この属性は、srcTypeの値がCUSTOM_NODEまたはINPUT_NODEの場合に必要です。 srcTypeの値がINPUT_NODEの場合、nodeIdの有効な値には0と1が含まれます。フィルターシナリオでは、値を0に設定します。遷移シナリオでは、遷移前のビデオストリームの値を0に設定し、遷移後のビデオストリームの値を1に設定します。 path: リソースファイルへのパス。この属性は、srcTypeの値がIMAGEの場合に必要です。
params	制服のリスト。このパラメーターは、フラグメントシェーダーの`ユニフォーム`の属性を指定するために使用されます。これらの属性は次のとおりです。 name: ユニフォームの名前。 type: ユニフォームのタイプ。サポートされているタイプの詳細については、「uniformのサポートされているタイプ」をご参照ください。 value: ユニフォームの値。 maxValue: ユニフォームの最大値。 minValue: ユニフォームの最小値。

サポートされているユニフォームのタイプ

タイプ	値の例
INT	[1]
FLOAT	[-2.0]
VEC2I	[3, 2]
VEC3I	[1, 2, 3]
VEC4I	[4, 3, 2, 1]
VEC2F	[-1.0、1.0]
VEC3F	[0.5、0.5、0.5]
VEC4F	[1.0、-1.0、1.0、-1.0]
MAT3F	[1.0、0.0、0.0、0.0、1.0、0.0、0.0、0.0、1.0]
MAT4F	[1.0、0.0、0.0、0.0、0.0、1.0、0.0、0.0、0.0、0.0、1.0、0.0、0.0、0.0、0.0、1.0]

次のコードは、Translateトランジションの設定ファイルの設定方法を示しています。

{
    "name": "Translate",
    "module": "ALIVC_GECF",
    "version": 1,
    "type": 2,
    "nodeTree": [
        {
            "nodeId": 0,
            "name": "Translate",
            "vertex": "/** ...... */",
            "attributes": [
                {
                    "name": "a_position",
                    "type": "POSITION"
                },
                {
                    "name": "a_texcoord",
                    "type": "TEXTURECOORD"
                }
            ],
            "fragment": "/** ...... */",
            "textures": [
                {
                    "name": "RACE_Tex0",
                    "srcType": "INPUT_NODE",
                    "nodeId": 0
                },
                {
                    "name": "RACE_Tex1",
                    "srcType": "INPUT_NODE",
                    "nodeId": 1
                }
            ],
            "params": [
                {
                    "name": "direction",
                    "type": "INT",
                    "value": [
                        0
                    ],
                    "maxValue": [
                        3
                    ],
                    "minValue": [
                        0
                    ]
                }
            ]
        }
    ]
}

組み込み変数

ショートビデオSDKには、シェーダーで宣言できる次の組み込み変数が用意されています。

uniform highp float BUILTIN_PROGRESS; // The transition progress. Valid values: 0 to 1.
uniform highp float BUILTIN_WIDTH;    // The image width.
uniform highp float BUILTIN_HEIGHT;   // The image height.

ショートビデオSDKでエフェクトを使用する

エフェクトを使用するには、エフェクトオブジェクトを作成し、エフェクトを適用し、ビジネス要件に基づいてエフェクトパラメーターを更新する必要があります。

初期化されたエフェクトオブジェクトで、エフェクト設定を説明するAliyunEffectConfigオブジェクトを取得できます。 AliyunEffectConfigの内部構造は、エフェクト設定ファイルの構造に対応しています。カスタムエフェクトの設定ファイルにparamsパラメーターが含まれている場合、AliyunEffectConfig -> nodeTree -> paramsからコード内のAliyunParamオブジェクトを取得できます。 AliyunParamオブジェクトのvalueは、パラメーターの値です。次のいずれかの手順を実行して、エフェクトパラメーターを更新できます。

AliyunValueオブジェクトによって提供されるUpdateメソッドを呼び出して、パラメーターを更新します。
エフェクト更新メソッドを呼び出してパラメーターを更新します。エフェクトパラメーターを更新する方法の詳細については、次のセクションのステップiiiを参照してください。

Android向けショートビデオSDKの手順

フィルター
1. EffectFilter (文字列パス) を呼び出して、フィルターオブジェクトを作成します。 pathは、フィルタフォルダのパスを指定します。
2. int addAnimationFilter(EffectFilter filter); を呼び出してフィルターを適用します。
3. int updateAnimationFilter(EffectFilter filter); を呼び出して、フィルターパラメーターを更新します。
遷移
1. TransitionBase (文字列パス) を呼び出して、transitionオブジェクトを作成します。 pathは、遷移フォルダのパスを指定します。
2. int setTransition(int index, TransitionBase transition); を呼び出して、トランジションを適用します。
3. int updateTransition(int clipIndex, TransitionBase transitionBase); を呼び出して、遷移パラメーターを更新します。

iOS用のショートビデオSDKの手順

フィルター
1. AliyunEffectFilterの- (instancetype)initWithFile :( NSString *)path; を呼び出して、フィルターオブジェクトを作成します。 pathは、フィルタフォルダのパスを指定します。
2. - (int)applyAnimationFilter :( AliyunEffectFilter *)filter; を呼び出して、フィルターを適用します。
3. - (int)updateAnimationFilter :( AliyunEffectFilter *)filter; を呼び出して、フィルターパラメーターを更新します。
遷移
1. AliyunTransitionEffectの -(instancetype)initWithPath :( NSString *)path; を呼び出して、遷移オブジェクトを作成します。 pathは、遷移フォルダのパスを指定します。
2. - (int)applyTransition :( AliyunTransitionEffect *)transition atIndex :( int)clipIdx; を呼び出して、トランジションを適用します。
3. -(int)updateTransition :( AliyunTransitionEffect *)transition atIndex :( int)clipIdx; を呼び出して、遷移パラメーターを更新します。