YUV⇒RGB変換(WebGL編)

YUVTextureクラスのコンストラクタでは、引数にFileオブジェクトを取り、そのまま親クラスであるYUVFileのコンストラクタに渡します。

その後、引数で渡された”WebGL Content”を使用し、createYUVTextureメソッドでY, U, V其々のテクスチャオブジェクトを作成します。
なお、作成したテクスチャオブジェクトは他のメソッドで使用しますので、プライベートフィールドとして保持しておきます。

YUVTextureクラスのファイナライザは、引数にWebGLコンテキストを取り、deleteTextureメソッドでテクスチャオブジェクトを破棄します。
なおdeleteTextureメソッドは引数にnullをセットする事もできますので、事前にnullかどうかのチェックは必要ありません。

引数で渡された”WebGL Content”を使用し、createTextureメソッドでテクスチャオブジェクトを作成します。
その後、bindTextureメソッドで作成したテクスチャオブジェクトをバインドした後、メモリアライメントと画像の拡縮時の補間方法の設定をしておきます。
因みにY, U, Vのデータは符号なしのバイトデータですので、メモリアライメントは”1バイト”となります。

setNextTextureメソッドではテクスチャにY, U, Vデータを割り当ててセットします。

なお、テクスチャはシェーダープログラム中でユニフォーム変数として使用されますので、テクスチャに画像データを割り当てる場合には、ユニフォーム変数を表すIDが必要となります。

setNextTextureメソッドではWebGLコンテキストと共に引数としてユニフォーム変数を表すID”texlocation”をMapオブジェクトとして渡しています。
MapオブジェクトのキーはUnion型で定義した”YUVColorSpace”を使用します。

setNextTextureメソッドでは先ずreadYUVメソッドで次のフレームのYUVデータを取得します。
なお、readYUVメソッドは非同期関数ですので、awaitでYUVデータの取得が完了するまで待ちます。
更に、setNextTextureメソッドも非同期関数となりますので、async修飾子を付加しておきます。

YUVデータの取得に成功したら、Y, U, V其々のデータをテクスチャに割り当てます。
基本的なフローはRGBTextureクラスのsetNextTextureメソッドと同じです。
ただ、YUVTextureオブジェクトではテクスチャを3つ同時に使用しますので、少々工夫が必要となります。

先ず、uniform1iメソッドでテクスチャユニットとユニフォーム変数のIDを結びつけます。
その後、activeTextureでテクスチャユニットをアクティベートします。
なお、uniform1iメソッドで指定したテクスチャユニットの番号とactiveTextureで指定するテクスチャユニット”TEXTUREn”の”n”は合わせるようにして下さい。
因みにテクスチャユニットはOpenGL ES 2.0でも最低8つは使用できますので、今回のように3つであれば問題ないかと思います。
心配な場合にはgl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);でテクスチャユニットの数を取得できますので確認してください。

次にbintTextureメソッドでユニフォーム変数を2次元のテクスチャにバインドした後、texImage2Dメソッドで実際のデータをテクスチャにセットします。
RGBTextureクラスの時と異なり、YUVTextureクラスでは符号なし8ビット整数の配列Uint8Arrayオブジェクトである”y”, “u”, “v”データをそのままtexImage2Dメソッドにセットしますので、画像の幅と高さを指定する必要がある事に注意が必要です。
また、セットする”y”, “u”, “v”データは其々、符号なし8ビット整数の配列ですので、内部フォーマットと画像フォーマットは”R8”と”RED”を指定します。
更に更にタイプは”UNSIGNED_BYTE”を指定する必要があります。

因みにtexImage2Dメソッドの内部フォーマットと画像フォーマット、タイプについては、指定できる値の組み合わせが決まっています。
詳細はKhronosグループのWebGL 2.0 Specificationで確認して下さい。

因みにYUVデータのの取得を失敗した場合には、例外を投げるようにしています。

シェーダープログラムは文字列のクラス定数として定義します。

なお、Events4ElementsGLRGBクラスの時と異なり、シェーダープログラム内では#version 300 esディレクティブを記載しています。

Events4ElementsGLYUVクラスのバーテックスシェーダープログラム

static readonly VERTEX_SOURCE = `#version 300 es
    in vec3 position;
    in vec2 vertexUV;
    out vec2 uv;
    void main(void)
    {
        gl_Position.xyz = position;
        gl_Position.w = 1.0;
        uv = vertexUV;
    }`;
        

static readonly VERTEX_SOURCE = `
    #version 300 es
        :
        :
        

Events4ElementsGLYUVクラスのフラグメントシェーダープログラム

static readonly FRAGMENT_SOURCE = `#version 300 es
    precision highp float;
    const mat4 TORGB = mat4(
        1.164f,  1.164f, 1.164f, 0.0f,
        0.0f,   -0.392f, 2.017f, 0.0f,
        1.596f, -0.813f, 0.0f,   0.0f,
        0.0f,    0.0f,   0.0f,   1.0f);
    const vec4 DIFF = vec4(16.0f / 255.0f, 128.0f / 255.0f, 128.0f / 255.0f, 0.0f);
    in vec2 uv;
    out vec4 color;
    uniform sampler2D textureSamplerY;
    uniform sampler2D textureSamplerU;
    uniform sampler2D textureSamplerV;
    void main(void)
    {
        vec4 fy = texture(textureSamplerY, uv);
        vec4 fu = texture(textureSamplerU, uv);
        vec4 fv = texture(textureSamplerV, uv);
        vec4 yuv = vec4(fy.r, fu.r, fv.r, 1.0f);
        yuv -= DIFF;
        vec4 rgb = TORGB * yuv;
        color = clamp(rgb, 0.0f, 1.0f);
    }`;
        

static readonly FRAGMENT_SOURCE = `
    #version 300 es
        :
        :
        

Events4ElementsGLYUVクラスのコンストラクタは以下の通りです。

static readonly MAP_GLYUV = new Map<Element, string>([
    ['canvas', 'canvasGLYUV'],
    ['filebtn', 'btnOpenFileGLYUV'],
    ['playbtn', 'btnPlayGLYUV'],
    ['filetxt', 'txtFileNameGLYUV'],
    ['dialog', 'fileOpenDialogGLYUV']
]);
        :
        :
constructor() {
    super(Events4ElementsGLYUV.MAP_GLYUV);
}
        

Events4ElementsGLYUVクラスのコンストラクタでは、“index.htmlに配置した要素の”id”のMapオブジェクトを引数に、親クラスEvents4ElementsGLのコンストラクタをコールします。

private texImage: YUVTexture | undefined;
        :
        :
public finalize() {
    super.finalize();
    const gl: WebGL2RenderingContext | undefined = this.getContextGL();
    if ((gl != undefined) && (this.texImage != undefined)) {
        this.texImage.finalize(gl);
        this.texImage = undefined;
    }
}
        

Events4ElementsGLYUVクラスのファイナライザfinalizeメソッドでは、親クラスEvents4ElementsGLのファイナライザをコール後に、プライベートフィールド”texImage”に保持しているYUVTextureオブジェクトをfinalizeメソッドにより破棄します。

Events4Elementsクラス内で抽象メソッドとして宣言されていたsetFileNameを実装します。

    :
    :
private vertexPosition: number = 0;
private vertexUV: number = 0;
private textureMap = new Map<YUVColorSpace, WebGLUniformLocation>;
        :
        :
protected setFileName(files: FileList | null | undefined) {
    if (this.texImage != undefined) {
        this.finalize();
    }
    const file: File | null = this.extractFileFromFileList(files);
    if (file != null) {
        const gl: WebGL2RenderingContext | undefined = this.getContextGL();
        if (gl != undefined) {
            this.initShaderProgram(gl, Events4ElementsGLYUV.VERTEX_SOURCE, Events4ElementsGLYUV.FRAGMENT_SOURCE);
            if (this.shaderProgram != null) {
                this.vertexPosition = gl.getAttribLocation(this.shaderProgram, 'position');
                this.vertexUV = gl.getAttribLocation(this.shaderProgram, 'vertexUV');
                const textureYLocation: WebGLUniformLocation | null = gl.getUniformLocation(this.shaderProgram, 'textureSamplerY');
                if (textureYLocation != null) {
                    this.textureMap.set(`y`, textureYLocation);
                }
                const textureULocation: WebGLUniformLocation | null = gl.getUniformLocation(this.shaderProgram, 'textureSamplerU');
                if (textureULocation != null) {
                    this.textureMap.set(`u`, textureULocation);
                }
                const textureVLocation: WebGLUniformLocation | null = gl.getUniformLocation(this.shaderProgram, 'textureSamplerV');
                if (textureVLocation != null) {
                    this.textureMap.set(`v`, textureVLocation);
                }
            };
            this.createBuffers(gl);
            this.texImage = new YUVTexture(file, gl);
        }
    }
}
        

setFileNameメソッド内では、先ず、既に割り当てられているYUVTextureオブジェクトが存在する場合、破棄しておきます。

次に、引数として渡されたファイルリストからextractFileFromFileListメソッドでFileオブジェクトを取得します。
取得したFileオブジェクトを使用し、新たにYUVTextureオブジェクトを作成し、プライベートフィールド”texImage”にセットします。

同時にバーテックスシェーダープログラム”VERTEX_SOURCE”とフラグメントシェーダープログラム”FRAGMENT_SOURCE”を引数にしてinitShaderProgramメソッドをコールする事でシェーダープログラムのコンパイル、リンク等の準備を行います。

シェーダープログラムの作成に成功したら、シェーダープログラム中のアトリビュート変数”position”と”vertexUV”のIDをgetAttribLocationメソッドで、ユニフォーム変数”textureSamplerY”, “textureSamplerU”, “textureSamplerV”のIDをgetUniformLocationメソッドで取得し、其々プライベートフィールドおよび<Map>オブジェクトに保存しておきます。

最後にcreateBuffersメソッドで頂点座標データとテクスチャ座標データの頂点バッファを作成しておきます。

Events4Elementsクラス内で抽象メソッドとして宣言されていたshowNextImageを実装します。

protected showNextImage() {
    const gl: WebGL2RenderingContext | undefined = this.getContextGL();
    if ((gl != undefined) && (this.texImage != undefined)) {
        gl.useProgram(this.shaderProgram);
        this.texImage.setNextYUVTextures(gl, this.textureMap).then(() => {
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.enableVertexAttribArray(this.vertexPosition);
            gl.enableVertexAttribArray(this.vertexUV);

            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
            gl.vertexAttribPointer(
                this.vertexPosition,
                3, // サイズ
                gl.FLOAT, // タイプ
                false, // 正規化？
                0, // ストライド
                0 //vertexBuffer // 配列バッファ
            );

            gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
            gl.vertexAttribPointer(
                this.vertexUV,
                2, // サイズ
                gl.FLOAT, // タイプ
                false, // 正規化？
                0, // ストライド
                0 //textureBuffer // 配列バッファ
            );

            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            gl.disableVertexAttribArray(this.vertexUV);
            gl.disableVertexAttribArray(this.vertexPosition);
        }).catch(() => {
            this.stopPlay();
        });
    }
}
        

OpenGLで図形を描画する典型的なコードです。
基本的にはEvents4ElementsGLRGBクラスのshowNextImageメソッドと同じです。

先ず、useProgramメソッドで使用するシェーダープログラムを選択します。

次に、プライベートフィールド”texImage”を使用し、setNextTextureメソッドで次のフレームの画像をテクスチャにセットします。
なお、setNextTextureメソッドは非同期関数ですので、thenにより画像がテクスチャにセットされるのを待ってから描画を継続します。

描画については、enableVertexAttribArray, bindBuffer, vertexAttribPointerメソッドで頂点座標データとテクスチャ座標データをセットした後、drawArraysで3角形を2枚描画する事で四角の描画を行います。

もし、次のフレームの画像が無い等、例外が投げられた場合には、catch内でstopPlayをコールし、動画再生の停止処理等を行います。

Events4Elementsクラス内で抽象メソッドとして宣言されていたrewindを実装します。

RGBTextureオブジェクトのrewindメソッドをコールします。

protected rewind() {
    if (this.texImage != undefined) {
        this.texImage.rewind();
    }
}
        

“index.html”内のキャンバス要素への描画やボタンクリックイベントへの対応を記述したクラスEvents4ElementsWebGLYUVのオブジェクトの作成を追加します。

finalize関数内では、Events4ElementsGLYUV.finalizeメソッドで、作成したクラスオブジェクト内の不要なオブジェクトを明示的に削除する処理を追加しています。