YUV⇒RGB変換

“target”の項目を”ES6”に変更します。

"target": "ES6",
      

“module”の項目を”commonjs”から”ES2015”に変更します。

"module": "ES2015",

インポート文で絶対パス指定をできるようにベースディレクトリを指定します。

"baseUrl": "./src",
        

ソース元のディレクトリとコンパイル後のファイルを出力するディレクトリを追加します。
以下の項目の行のコメントアウトを外し、値を修正します。
なお、ディレクトリ名は適宜変更してもOKです。

"rootDir": "./src",
"outDir": "./dst/js",
        

更に、此処で指定したディレクトリに対応したフォルダをプロジェクトフォルダ”ShowYUVwithWebGL”下に作成しておきます。

階層化したファルダをコンパイルの対象とするため、“include”の項目を以下のように追加します。

"compilerOptions": {
    :
    :
  },
"include": ["src/**/*"]
        

念のため、JavaScriptファイルを対象とするように以下の項目のコメントアウトを外しておきます。

"allowJs": true,

デバッグ用のソースマップを作成するため以下の項目のコメントアウトを外しておきます。
リリースする際には再度コメントアウトしてソースマップを作成しない様にします。

"sourceMap": true,
        

描画領域はとりあえずJPanelクラスとしておきます(後で独自のクラスに置き換えます)。
なお描画領域”panel”をJPanelクラスの”borderPanel”の中に置いているのは単純に枠線を付けたいためなので枠線が必要ない場合にはJPanelを二重にする必要はありません。

描画領域のサイズは最終的にCIFサイズのYUVデータを描画するため(352, 288)にセットします。
因みにJPanelクラスのsetPreferredSizeメソッドで使用されているDimensionクラスはjava.awt.Dimensionなので注意が必要です。
他のフレームワークに同じ名前のクラスが存在するためIDEの補完機能で間違って選択されてしまって”???“となる場合があります。

ファイルオープンボタン”fileOpenButton”とプレイボタン”playButton”の他にファイル名を表示するテキストラベル”fileNameLabel”を下部に配置します。
先ずこれらのボタン類を入れるコンテナJPanelクラスの”buttonPanel”をBoxレイアウトで準備します。
なおボタン類の周囲に余白を持たせるために”buttonPanel”に枠線を設定しておきます。
その中に左から”fileNameLabel”、“fileOpenButton”、“playButton”の順に配置して行きます。
各コンポーネントの間は適当にパディングを追加します。

コンポーネント配置後は”buttonPanel”をウィンドウの下部に配置しておきます。

1. 「ソリューションエクスプローラー」でShowYUVプロジェクトを右クリック
2. 「追加」→「クラス…」を選択
3. 「クラスの追加」ウィンドウで、「クラス名」にCWindowを「.hファイル」にWindow.hを「.cppファイル」にWindow.cppを記入し、OKをクリック

ヘッダーファイルは以下のようにします。

#pragma once

#include "Renderer.h"

/**
* CWindow
* OpenGLのGLFWでウィンドウを表示
*/
class CWindow
{
private:
    static const std::string DEF_TITLE;
    static std::mutex init;
    static int init_count;

private:
    // ウィンドウのハンドル
    GLFWwindow* m_pWindow;
    CRenderer* m_pRenderer;

public:
    /**
    * コンストラクタ
    */
    CWindow(
        UINT width = CTexture::CIF_WIDTH,
        UINT height = CTexture::CIF_HEIGHT,
        const char* pFileName = nullptr,
        const char* pTitle = DEF_TITLE.c_str());

    /**
    * デストラクタ
    */
    virtual ~CWindow();

    /**
    * 描画
    */
    virtual HRESULT Render();

protected:
    /**
    * OpenGLを初期化
    */
    virtual void InitOpenGL();

    /**
    * OpenGLを初期化
    */
    virtual void TerminateOpenGL();

    /**
    * ウィンドウサイズをセット
    */
    void SetSize(GLuint width, GLuint height);

    /**
    * ウィンドウのサイズ変更時のコールバック関数
    */
    static void Resize(GLFWwindow* const window, int width, int height);

};
        

静的変数/定数

const std::string CWindow::DEF_TITLE = "Show YUV";
std::mutex CWindow::init;
int CWindow::init_count = 0;
          

メンバ変数

コンストラクタは、引数としてウィンドウのサイズ、ファイル名、ウィンドウのタイトルを取るようにします。
其々、以下のようにデフォルト値を設定しておきます。

CWindow(
    UINT width = CTexture::CIF_WIDTH,
    UINT height = CTexture::CIF_HEIGHT,
    const char* pFileName = nullptr,
    const char* pTitle = DEF_TITLE.c_str());
        

なお、ウィンドウのサイズに使用しているCTexture::CIF_WIDTHとCTexture::CIF_HEIGHTですが、CTextureクラス内でテクスチャのサイズとして定義している定数です。
定義しているヘッダーファイルTexture.hはRenderer.hでインクルードするので、そのまま使用できています。

Window.cppでの実装は以下の通りです。

CWindow::CWindow(UINT width, UINT height, const char* pFileName, const char* pTitle)
    : m_pWindow(NULL)
    , m_pRenderer(nullptr)
{
    InitOpenGL();

    m_pWindow = glfwCreateWindow(width, height, pTitle, NULL, NULL);
    if (NULL == m_pWindow)
    {
        throw std::runtime_error("Failed to create opengl window using GLFW.");
    }
    // 現在のウィンドウを処理対象にする
    glfwMakeContextCurrent(m_pWindow);

    glClearColor(1.0f, 0.0f, 0.0f, 1.0f);

    // GLEWを初期化する
    glewExperimental = GL_TRUE;
    if (GLEW_OK != glewInit())
    {
        TerminateOpenGL();
        throw std::runtime_error("Failed to initialize GLEW.");
    }

    // 垂直同期のタイミングを待つ
    glfwSwapInterval(1);

    // このインスタンスの this ポインタを記録しておく
    glfwSetWindowUserPointer(m_pWindow, this);

    // ウィンドウのサイズ変更時に呼び出す処理の登録
    glfwSetWindowSizeCallback(m_pWindow, Resize);

    m_pRenderer = new CRenderer(pFileName);

    // 開いたウィンドウの初期設定
    Resize(m_pWindow, width, height);
}
        

なお、InitOpenGL()メソッドとTerminateOpenGL()メソッド、Resize()メソッドは、後に追加します。

InitOpenGL()メソッドでOpenGLの初期化後、glfwCreateWindow()関数でウィンドウを作成します。

次に、glfwMakeContextCurrent()関数で作成したウィンドウを操作対象に指定します。

glClearColor()関数では、glClear()関数で描画領域をクリアする際の色を指定しています。
サンプルでは赤にしていますが、好きな色を指定してください。

その後、GLEWを初期化するため、glewInit()関数をコールします。
なお、

glewExperimental = GL_TRUE;

については、GLEWをフル活用するためのおまじないです。

glfwSwapInterval()関数は、描画を指示した後に実際の描画を行うタイミングの指定です。
何回目の垂直同期のタイミングで描画を行うかを指定するのですが、基本は1、つまり次の垂直同期のタイミングで描画を行うようにします。

glfwSetWindowUserPointer()関数については、後にクラスメソッドからオブジェクトにアクセスする際に使用するポインタを退避するためにコールしています。

glfwSetWindowSizeCallback()関数については、ウィンドウがリサイズされた際にコールされる関数を設定しています。

最後に、CRendererのオブジェクトを作成した後、Resize()メソッドで最初の描画を行っています。

デストラクタでは、CRendererのオブジェクトを解放した後、glfwDestroyWindow()関数でウィンドウを破棄し、TerminateOpenGL()メソッドでOpenGLの終了処理を行っています。

CWindow::~CWindow()
{
    if (nullptr != m_pRenderer)
    {
        delete m_pRenderer;
    }
    glfwDestroyWindow(m_pWindow);
    TerminateOpenGL();
}
        

InitOpenGL()メソッドでは、glfwInit()関数でGLFW（OpenGL）を初期化後、glfwWindowHint()関数で使用するOpenGLのバージョンとプロファイルを設定しています。
今回は、Version 3.3, Core Profileとします。

なお、glfwInit()関数は

メインスレッドからのみコールされなければならない

ようなので、複数回のコールを適切に処理できるようにはなっていない感じです。

なので、今回はOpenGLの初期化の回数と終了処理の回数をカウントして、最初の初期化時のみglfwInit()関数をコールするようにします。
因みにmutexによるロックは、複数のスレッドから同時にアクセスされて初期化用のカウンタが壊されるのを防ぐためのものです。

void CWindow::InitOpenGL()
{
    init.lock();

    if (init_count == 0)
    {
        // GLFWを初期化する
        if (GL_FALSE == glfwInit())
        {
            init.unlock();
            throw std::runtime_error("Failed to initialize opengl using GLFW.");
        }

        // OpenGL Version 3.3 Core Profile を選択する
        glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
        glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
        glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
        glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    }
    init_count++;

    init.unlock();
}
        

TerminateOpenGL()メソッドでは、初期化用のカウンタinit_countをデクリメントし、0になったらglfwTerminate()関数をコールしてOpenGLの終了処理を行います。
初期化用のカウンタを使用していますので、mutexで制御しています。

void CWindow::TerminateOpenGL()
{
    init.lock();
    if (--init_count <= 0)
    {
        glfwTerminate();
    }
    init.unlock();
}
        

Render()メソッドは、YUVファイルから次のフレームデータを読み込み、テクスチャにセットした後、描画します。

先ず、CRendererのオブジェクトが存在する事を確認後、CRenderer::SetNextTexture()メソッドでテクスチャに次のフレームのデータをセットします。

その後、glClear()関数でウィンドウの描画領域をクリアした後、CRenderer::Render()メソッドで描画を行います。

描画完了後、glfwSwapBuffers()関数でバッファの入れ替えを行います。

なお、今回は4角形の板の描画しかしませんので、glClear()関数では、GL_COLOR_BUFFER_BITのみを指定しています。

一般的に複数のオブジェクトを立体的に配置するような場合にはGL_DEPTH_BUFFER_BITを、画素のマスク等で特殊効果を使用する場合には、GL_STENCIL_BUFFER_BITも追加で指定してください。

HRESULT CWindow::Render()
{
    HRESULT hr = S_FALSE;
    if (nullptr != m_pRenderer)
    {
        hr = m_pRenderer->SetNextTexture();
        if (S_OK == hr)
        {
            glClear(GL_COLOR_BUFFER_BIT);
            m_pRenderer->Render();
            glfwSwapBuffers(m_pWindow);
        }
    }
    return hr;
}
        

SetSize()メソッドでは、ウィンドウのフレームバッファの横幅と高さを引数にして、CRendererのオブジェクトにサイズをセット後、再描画を行います。

先ず、CRendererのオブジェクトが存在する事を確認後、CRenderer::SetSize()メソッドでフレームバッファの新しい横幅と高さをセットします。

その後は、Render()メソッドと同様、描画を行います。
ただ、テクスチャについては、前に設定したデータをそのまま使用します。

void CWindow::SetSize(GLuint width, GLuint height)
{
    if (nullptr != m_pRenderer)
    {
        m_pRenderer->SetSize(width, height);
        glClear(GL_COLOR_BUFFER_BIT);
        m_pRenderer->Render();
        glfwSwapBuffers(m_pWindow);
    }
}
        

Resize()メソッドは、ウィンドウがリサイズされた際にコールバックされる関数のため、クラスメソッドとして宣言しています。

引数としては、コールしたGLFWwindowクラスのオブジェクトと新しいウィンドウのサイズがセットされます。
ただ、ウィンドウのサイズと実際の描画対象となるフレームバッファのサイズは異なることがあるようなので、先ずは、glfwGetFramebufferSize()関数でフレームバッファのサイズを取得します。

その後、glViewport()関数でビューポートをフレームバッファに合わせて、全体が表示されるよう変更します。

次に、CRendererのオブジェクトのサイズをセットし、再描画を行うのですが、Resize()メソッドはクラスメソッドであるため、直接、CRendererのオブジェクトを使用する事ができません。
そこで、glfwGetWindowUserPointer()関数で、コンストラクタで登録しておいたCWindowのオブジェクトを取り出し、そのオブジェクトを使用してCWindow::SetSize()メソッドをコールします。

void CWindow::Resize(GLFWwindow* const window, int width, int height)
{
    // フレームバッファのサイズを調べてフレームバッファ全体をビューポートに設定する
    int fbWidth, fbHeight;
    glfwGetFramebufferSize(window, &fbWidth, &fbHeight);
    glViewport(0, 0, fbWidth, fbHeight);

    // windowに関連付けられているインスタンスを取得し、サイズをセット
    CWindow* const pinstance = static_cast<CWindow*>(glfwGetWindowUserPointer(window));
    if (NULL != pinstance)
    {
        pinstance->SetSize(fbWidth, fbHeight);
    }
}
        

1. 「ソリューションエクスプローラー」でShowYUVプロジェクトを右クリック
2. 「追加」→「クラス…」を選択
3. 「クラスの追加」ウィンドウで、「クラス名」にCRendererを「.hファイル」にRenderer.hを「.cppファイル」にRenderer.cppを記入し、OKをクリック

ヘッダーファイルは以下のようにします。

#pragma once

#include "Shader.h"
#include "Texture.h"

/**
* CRenderer
* 実際にレンダリングを行う
*/
class CRenderer
{
private:
    static const GLfloat VERTEX[];
    static const GLfloat TEXTURE[];

private:
    GLuint m_vertexArrayObjID;
    GLuint m_vbuffer;
    GLuint m_tbuffer;
    CShader* m_pShader;
    CTexture* m_pTexture;

public:
    /**
    * コンストラクタ
    */
    CRenderer(const char* pFileName = nullptr);

    /**
    * デストラクタ
    */
    virtual ~CRenderer();

    /**
    * 描画
    */
    virtual void Render();

    /**
    * サイズセット
    */
    virtual void SetSize(GLuint width, GLuint height);

    /**
    * 次のテクスチャセット
    */
    virtual HRESULT SetNextTexture();
};
        

定数

const GLfloat CRenderer::TEXTURE[] =
{
    0.0f, 1.0f,
    0.0f, 0.0f,
    1.0f, 0.0f,
    1.0f, 1.0f,
};

const GLfloat CRenderer::VERTEX[] =
{
    -(CTexture::CIF_WIDTH / 2.0f), -(CTexture::CIF_HEIGHT / 2.0f), 0.0f,
    -(CTexture::CIF_WIDTH / 2.0f),   CTexture::CIF_HEIGHT / 2.0f,  0.0f,
      CTexture::CIF_WIDTH / 2.0f,    CTexture::CIF_HEIGHT / 2.0f,  0.0f,
      CTexture::CIF_WIDTH / 2.0f,  -(CTexture::CIF_HEIGHT / 2.0f), 0.0f,
};
          

メンバ変数

コンストラクタは、引数としてファイル名を取るようにします。
なお、引数のファイル名のデフォルト値にはnullptrを設定しておきます。

コンストラクタ内では、Vertex Array Objectを作成、バインドした後、頂点データ用のバッファとテクスチャ座標用のバッファを作成、バインドします。
今回は、単純な4角形の頂点とテクスチャだけですので、Vertex Array Objectの作成、バインドは、ただ面倒なだけなのですが、最近のOpenGLでは頂点データ等の受け渡しにはVertex Array Objectを使用する事がデフォルトになっているようですので、とりあえずglGenVertexArrays()関数で作成し、glBindVertexArray()関数でバインドしておきます。

次に、glGenBuffers()関数でバッファを作成し、glBindBuffer()関数でバインドしておきます。

最後に、glBufferData()関数で、実際の頂点データ(VERTEX[])やテクスチャ座標(TEXTURE[])をセットしておきます。なお、今回、頂点データやテクスチャ座標は、一旦セットした後は変更しませんので、第4引数の"usage"には、GL_STATIC_DRAWをセットしています。

バッファ作成後は、CShaderとCTextureオブジェクトを作成しています。

CRenderer::CRenderer(const char* pFileName)
    : m_vertexArrayObjID(0)
    , m_vbuffer(0)
    , m_tbuffer(0)
    , m_pShader(nullptr)
    , m_pTexture(nullptr)
{
    glGenVertexArrays(1, &m_vertexArrayObjID);
    glBindVertexArray(m_vertexArrayObjID);
    glGenBuffers(1, &m_vbuffer);
    glBindBuffer(GL_ARRAY_BUFFER, m_vbuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(VERTEX), VERTEX, GL_STATIC_DRAW);
    glGenBuffers(1, &m_tbuffer);
    glBindBuffer(GL_ARRAY_BUFFER, m_tbuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(TEXTURE), TEXTURE, GL_STATIC_DRAW);
    m_pShader = new CShader();
    m_pTexture = new CTexture(pFileName);
}
        

デストラクタでは、CShaderオブジェクトとCTextureオブジェクトを解放した後、コンストラクタで作成した頂点データ用のバッファとテクスチャ座標用のバッファ、Vertex Array Objectを削除しておきます。

CRenderer::~CRenderer()
{
    if (nullptr != m_pTexture)
    {
        delete m_pTexture;
    }
    if (nullptr != m_pShader)
    {
        delete m_pShader;
    }
    glDeleteBuffers(1, &m_tbuffer);
    glDeleteBuffers(1, &m_vbuffer);
    glDeleteVertexArrays(1, &m_vertexArrayObjID);
}
        

Render()メソッドでは、実際の描画を行います。

先ずは、頂点データとテクスチャ座標データをバッファを通してバーテックスシェーダープログラムの入力にセットします。

glEnableVertexAttribArray()関数で、バーテックスシェーダープログラムの入力の番号を指定してデータの割り当てができるようにします。

その後、glBindBuffer()関数でセットするバッファを指定後、glVertexAttribPointer()関数でデータのサイズや型等の指定を行います。

頂点データとテクスチャ座標データのバッファ其々に設定を行った後、glDrawArrays()関数で4角形をレンダリングします。

最後に、glDisableVertexAttribArray()関数でデータ割り当ての終了を指示します。

void CRenderer::Render()
{
    glEnableVertexAttribArray(CShader::POSITION_ID);
    glEnableVertexAttribArray(CShader::TEXTURE_ID);

    glBindBuffer(GL_ARRAY_BUFFER, m_vbuffer);
    glVertexAttribPointer(
        CShader::POSITION_ID,   // 属性0：0に特に理由はありません。しかし、シェーダ内のlayoutとあわせないといけません。
        3,                      // サイズ
        GL_FLOAT,               // タイプ
        GL_FALSE,               // 正規化？
        0,                      // ストライド
        (void*)0                // 配列バッファオフセット
    );

    glBindBuffer(GL_ARRAY_BUFFER, m_tbuffer);
    glVertexAttribPointer(
        CShader::TEXTURE_ID,      // 属性0：0に特に理由はありません。しかし、シェーダ内のlayoutとあわせないといけません。
        2,                      // サイズ
        GL_FLOAT,               // タイプ
        GL_FALSE,               // 正規化？
        0,                      // ストライド
        (void*)0                // 配列バッファオフセット
    );

    glDrawArrays(GL_TRIANGLE_FAN, 0, 4); // 頂点0から始まります。合計4つの頂点です。

    glDisableVertexAttribArray(CShader::TEXTURE_ID);
    glDisableVertexAttribArray(CShader::POSITION_ID);
}
        

SetSize()メソッドでは、フレームバッファのサイズを受け取り、アスペクト比から視野空間(View Volume)の設定を行います。

CIFサイズの4角形をCIFのアスペクト比を維持しながら、フレーム一杯に表示するように、高さもしくは幅を拡縮し、CShader::SetTransformationMatrix()メソッドを使ってシェーダーの変換行列に設定します。

void CRenderer::SetSize(GLuint width, GLuint height)
{
    if (nullptr != m_pShader)
    {
        double tempH = static_cast<double>(CTexture::CIF_WIDTH) * height / width;
        double tempW;
        if (tempH > CTexture::CIF_HEIGHT)
        {
            tempW = static_cast<double>(CTexture::CIF_WIDTH);
        }
        else
        {
            tempH = static_cast<double>(CTexture::CIF_HEIGHT);
            tempW = static_cast<double>(CTexture::CIF_HEIGHT) * width / height;
        }
        m_pShader->SetTransformationMatrix(-tempW / 2, tempW / 2, -tempH / 2, tempH / 2);
    }
}
        

SetNexttexture()メソッドでは、CTextureオブジェクトのチェックを行った後、CTexture::SetNextFrame()メソッドをコールします。

HRESULT CRenderer::SetNextTexture()
{
    HRESULT hr = S_FALSE;
    if (nullptr != m_pTexture)
    {
        hr = m_pTexture->SetNextFrame();
    }
    return hr;
}
        

1. 「ソリューションエクスプローラー」でShowYUVプロジェクトを右クリック
2. 「追加」→「新しい項目…」を選択
3. 「新しい項目の追加」ウィンドウで、「名前」にShader.vertと記入し、OKをクリック
4. 同様にして、Shader.fragファイルも作成しておきます。

基本的にファイル名は何でもOKですが、今回はバーテックスシェーダープログラムをShader.vert、フラグメントシェーダプログラムをShader.fragとします。

なお、Shader.vertおよびShader.fragはC++のプログラム中で実行時にコンパイルするため、Visual Studioではコンパイルしないように設定しなければなりません。

また、実行時にはDLLと同じフォルダ、もしくはC++プログラム内で指定するフォルダにコピーしておく必要があるため、以下のように、コンパイルの代わりにファイルをコピーするようにします。

1. 「ソリューションエクスプローラー」からShader.vertを右クリックし、「プロパティ」を選択
2. 「Shader.vert プロパティページ」ウィンドウの「構成」で全ての構成を選択
3. 「ビルドから除外」は空欄とする
4. 「項目の種類」でファイルをコピーするを選択し、「適用」ボタンをクリック
5. 左ペインの「構成プロパティ」に「ファイルをコピーする」が追加されますので「全般」をクリック
6. 「移動先のディレクトリ」の右側∨をクリックし、<編集…>を選択
7. 「移動先のディレクトリ」ウィンドウで$(OutDir)net6.0-windows\を記入
8. 「親またはプロジェクトの規定値から継承」の☑チェックを外し、OKボタンをクリック
9. 「Shader.vert プロパティページ」ウィンドウでOKボタンをクリック

同様にShader.fragファイルについてもファイルをコピーする設定を行います。

バーテックスシェーダープログラムは、頂点データ等の処理を行います。

#version 330 core

in vec3 position;
in vec2 vertexUV;
out vec2 uv;
uniform mat4 modelViewProj;

void main()
{
    vec4 v = vec4(position, 1);
    gl_Position = modelViewProj * v;
    uv = vertexUV;
}
        

バージョン

外部変数

メイン関数

フラグメントシェーダープログラムは、頂点で囲まれた領域の各画素の処理を行います。
基本的にテクスチャの貼り付け等もフラグメントシェーダで行います。

今回は、YUVデータをテクスチャとして渡して、RGBデータに変換後、色データとしてセットします。

#version 330 core

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, 128.0f / 255, 128.0f / 255, 0.0f);

in vec2 uv;
out vec4 color;

uniform sampler2D textureSamplerY;
uniform sampler2D textureSamplerU;
uniform sampler2D textureSamplerV;

void main()
{
    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);
}
        

バージョン

外部変数

メイン関数

1. 「ソリューションエクスプローラー」でShowYUVプロジェクトを右クリック
2. 「追加」→「クラス…」を選択
3. 「クラスの追加」ウィンドウで、「クラス名」にCShaderを「.hファイル」にShader.hを「.cppファイル」にShader.cppを記入し、OKをクリック

ヘッダーファイルは以下のようにします。

#pragma once

/**
* CShader
* シェーダープログラムを読み込んで設定
*/
class CShader
{
public:
    static const GLuint POSITION_ID = 0;
    static const GLuint TEXTURE_ID  = 1;

private:
    static const std::string VERTEX_FILE;
    static const std::string FRAGMENT_FILE;

private:
    GLuint m_programID;
    GLuint m_vertexID;      // バーテックスシェーダの番号
    GLuint m_fragmentID;    // フラグメントシェーダの番号

public:
    CShader();
    virtual ~CShader();
    void SetTransformationMatrix(double left, double right, double bottom, double top);

protected:
    void DeleteAllObjects();
    void ReadProgram(GLuint shaderID, const std::string& file_name);
    void SetTextureSampler();
};
        

定数

const std::string CShader::VERTEX_FILE = "Shader.vert";
const std::string CShader::FRAGMENT_FILE = "Shader.frag";
          

メンバ変数

コンストラクタでは、glCreateProgram()関数とglCreateShader()関数でプログラム全体およびバーテックスシェーダープログラム、フラグメントシェーダープログラムの作成を行います。

次に、CShader::ReadProgram()メソッドでファイルからバーテックスシェーダープログラムとフラグメントシェーダープログラムを読み込み、コンパイル、アタッチを行います。

プログラムの読み込み等に失敗した場合には、CShader::DeleteAllObjects()メソッドで作成済みのオブジェクトを解放した後、例外をスローします。

プログラムの読み込みが成功すれば、glBindAttribLocation()関数によりバーテックスシェーダープログラム内のグローバル変数positionとvertexUVにアクセス用のIDをバインドします。
同時に、CShader::SetTextureSampler()メソッドでフラグメントシェーダープログラム内のtextureSampler型のグローバル変数のアクセス用IDを取得しておきます。

最後にglLinkProgram()関数とglUseProgram()関数でプログラムのリンクおよび使用開始の宣言を行っておきます。

CShader::CShader()
    : m_programID(0)
    , m_vertexID(0)
    , m_fragmentID(0)
{
    m_programID = glCreateProgram();
    if (0 == m_programID)
    {
        throw std::runtime_error("Failed to create new program.");
    }

    m_vertexID = glCreateShader(GL_VERTEX_SHADER);
    if (0 == m_vertexID)
    {
        DeleteAllObjects();
        throw std::runtime_error("Failed to create new vertex shader.");
    }
    try
    {
        ReadProgram(m_vertexID, VERTEX_FILE);
    }
    catch (std::runtime_error e)
    {
        DeleteAllObjects();
        throw;
    }

    m_fragmentID = glCreateShader(GL_FRAGMENT_SHADER);
    if (0 == m_fragmentID)
    {
        DeleteAllObjects();
        throw std::runtime_error("Failed to create new fragment shader.");
    }
    try
    {
        ReadProgram(m_fragmentID, FRAGMENT_FILE);
    }
    catch (std::runtime_error e)
    {
        DeleteAllObjects();
        throw;
    }

    glBindAttribLocation(m_programID, POSITION_ID, "position");
    glBindAttribLocation(m_programID, TEXTURE_ID, "vertexUV");

    glLinkProgram(m_programID);

    glUseProgram(m_programID);

    SetTextureSampler();
}
        

デストラクタでは、コンストラクタで作成したオブジェクトをCShader::DeleteAllObjects()メソッドで削除します。

CShader::~CShader()
{
    DeleteAllObjects();
}
        

SetTransformationMatrix()メソッドでは、引数として渡された視野空間(View Volume)の左右上下の座標を元に、ModelViewProjection変換用の行列を作成して、バーテックスシェーダープログラム内の変換行列のグローバル変数に渡します。

void CShader::SetTransformationMatrix(double left, double right, double bottom, double top)
{
    glm::mat4 Projection = glm::ortho(left, right, bottom, top);
    glm::mat4 View = glm::lookAt(
        glm::vec3(0, 0, 1), // ワールド空間でカメラは(4,3,3)にあります。
        glm::vec3(0, 0, 0), // 原点を見ています。
        glm::vec3(0, 1, 0)  // 頭が上方向(0,-1,0にセットすると上下逆転します。)
    );
    glm::mat4 Model = glm::mat4(1.0f);
    glm::mat4 MVP = Projection * View * Model;

    GLuint MatrixID = glGetUniformLocation(m_programID, "modelViewProj");
    glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP[0][0]);
}
        

Direct3Dを使用したYUVデータの表示でも説明した通り、視野角があって遠くにある物ほど小さく見えるのでは都合が悪いため、投射行列には平行投影用の行列を使用します。

GLMでは、平行投影用の行列を作成する関数、glm::ortho()がありますので、それを使用します。

次に、視点であるViewですが、GLMにはカメラ位置や向き、方向を指定して行列を作成する関数、glm::lookAt()が用意されています。

最後に、物体の移動や変形等を指定するModelの行列ですが、今回は描画する四角形は移動も変形もせずにそのまま使用しますので、単位行列を使います。
GLMでは、4×4の単位行列はglm::mat4(1.0f)で作成できます。

最後に、Model, View, Projectionの行列を掛け合わせて、バーテックスシェーダープログラム内の変換行列とします。

バーテックスシェーダープログラム内の変換行列のグローバル変数modelViewProjは、uniformで宣言されていますので、glGetUniformLocation()関数により、アクセス用のIDを取得します。

バーテックスシェーダープログラム内の4×4の行列のuniform変数については、glUniformMatrix4fv()関数により、アクセス用のIDを使って値をセットします。

DeleteAllObjects()メソッドについては、コンストラクタ内でプログラムにアタッチしたバーテックスシェーダープログラムとフラグメントシェーダープログラムをでタッチした後、削除します。

最後に、プログラム自体を削除します。

void CShader::DeleteAllObjects()
{
    glDetachShader(m_programID, m_fragmentID);
    glDetachShader(m_programID, m_vertexID);
    glDeleteShader(m_fragmentID);
    glDeleteShader(m_vertexID);
    glDeleteProgram(m_programID);
}
        

ReadProgram()メソッドについては、ファイルからシェーダープログラムを読み込み、コンパイルした後、プログラムにアタッチします。

void CShader::ReadProgram(GLuint shaderID, const std::string& file_name)
{
    // ファイルからソースコードを読み込み
    std::ifstream sourceFile;
    sourceFile.open(file_name, std::ios::in | std::ios::binary | std::ios::ate);
    if (!sourceFile.is_open())
    {
        throw std::runtime_error("Failed to open shader file " + file_name);
    }

    size_t size = sourceFile.tellg();
    sourceFile.seekg(0, sourceFile.beg);
    if (size <= 0)
    {
        sourceFile.close();
        throw std::runtime_error("Failed to read shader file " + file_name);
    }

    std::vector<char> source(size + 1);
    char* psource = source.data();
    sourceFile.read(psource, size);
    sourceFile.close();
    *(psource + size) = '\0';

    // ソースコードをコンパイルしてプログラムにアタッチ
    glShaderSource(shaderID, 1, &psource, NULL);
    glCompileShader(shaderID);
    GLint result;
    glGetShaderiv(shaderID, GL_COMPILE_STATUS, &result);
    if (GL_FALSE == result)
    {
        // コンパイル失敗ならエラーログ出力
        std::vector<char> info(256);
        GLsizei len;
        glGetShaderInfoLog(shaderID, 256, &len, info.data());
        _RPT0(_CRT_ERROR, info.data());
        throw std::runtime_error("Failed to compile shader file" + file_name);
    }

    glAttachShader(m_programID, shaderID);
}
        

先ず、ファイル名はShader.vertかShader.fragを指定されていますので、全体をバイナリデータとして読み込んでしまいます。
この辺りの読み込み方法については、幾つかのやり方がありますので、基本的には、どの方法を使用してもOKです。
なお、今回、ファイル全体をバイナリデータとして読み込みましたので、終端にNUL文字’\0'を付加して文字列の終わりを明示します。
これを忘れると意味不明なコンパイルエラーで悩む事になります。

シェーダープログラムを読み込んだら、glShaderSource()関数でプログラムの文字列を指定し、glCompileShader()関数でコンパイルします。

コンパイル結果については、glGetShaderiv()関数の第2引数にGL_COMPILE_STATUSを指定して問い合わせます。
コンパイルに失敗した場合には、glGetShaderInfoLog()関数でエラーログを得る事ができます。
もし、コンパイルエラーが出た場合には、エラーログを確認してシェーダープログラムの修正を行います。

最後に、コンパイルしたシェーダープログラムをglAttachShader()関数でアタッチします。

SetTextureSampler()メソッドでは、先ず、フラグメントシェーダープログラム内のtextureSamplerのアクセス用IDをglGetUniformLocation()を使って取得します。

次に、glUniform1i()関数を使用し、textureSamplerのアクセス用IDを用いて其々のtextureSamplerにテクスチャのユニット番号を割り当てます。

なお、テクスチャのユニット番号とは、GL_TEXTURE0, GL_TEXTURE1, …等として定義されたテクスチャの識別番号で、GL_TEXTUREに続く番号をglUniform1i()関数でtextureSamplerのグローバル変数にセットする事で、テクスチャをフラグメントシェーダープログラムに紐付ける事ができます。
今回は、Y, U, V其々のデータ毎にテクスチャを作成しますので、3つのテクスチャの割り当てが必要となります。

void CShader::SetTextureSampler()
{
    // GLSL内のTextureSamplerにIDを割り振り
    GLint samplerIDY = glGetUniformLocation(m_programID, "textureSamplerY");
    glUniform1i(samplerIDY, 0); // GL_TEXTURE0
    GLint samplerIDU = glGetUniformLocation(m_programID, "textureSamplerU");
    glUniform1i(samplerIDU, 1); // GL_TEXTURE1
    GLint samplerIDV = glGetUniformLocation(m_programID, "textureSamplerV");
    glUniform1i(samplerIDV, 2); // GL_TEXTURE2
}
        

1. 「ソリューションエクスプローラー」でShowYUVプロジェクトを右クリック
2. 「追加」→「クラス…」を選択
3. 「クラスの追加」ウィンドウで、「クラス名」にCTextureを「.hファイル」にTexture.hを「.cppファイル」にTexture.cppを記入し、OKをクリック

ヘッダーファイルは以下のようにします。

#pragma once

class CTexture
{
public:
    static const UINT CIF_WIDTH = 352;
    static const UINT CIF_HEIGHT = 288;
    static const std::string YUV_FILE_NAME;

private:
    std::ifstream* m_pFile;
    GLuint m_textureIDY;
    GLuint m_textureIDU;
    GLuint m_textureIDV;
    GLubyte* m_pY;
    GLubyte* m_pU;
    GLubyte* m_pV;
    GLuint m_width;
    GLuint m_height;
    GLuint m_size;

public:
    CTexture(const char* pFileName = YUV_FILE_NAME.c_str(), GLuint width = CIF_WIDTH, GLuint height = CIF_HEIGHT);
    virtual ~CTexture();
    virtual HRESULT SetNextFrame();

protected:
    void SetTextureAttribute();
    HRESULT ReadYUV();
};
        

定数

const std::string CTexture::YUV_FILE_NAME = "akiyo_cif.yuv";
          

メンバ変数

コンストラクタでは、YUVファイル名とテクスチャの幅と高さを引数に取ります。

先ず、指定された幅と高さから、m_width, m_height, m_sizeをセットします。

次に、指定されたファイルをオープンしておきます。

更に、Y, U, Vデータを1フレーム分ストアできる領域を確保します。
なお、YUVデータはYUV420を想定していますので、UおよびVのデータサイズは、Yと比べて幅および高さが其々半分なので、配列のサイズとしては1/4となります。

最後に、CTexture::SetTextureAttribute()メソッドでY, U, V其々のテクスチャの作成を行い、CTexture::SetNextFrame()メソッドでテクスチャに実際のデータをセットします。

CTexture::CTexture(const char* pFileName, GLuint width, GLuint height)
    : m_pFile(nullptr)
    , m_textureIDY(0)
    , m_textureIDU(0)
    , m_textureIDV(0)
    , m_pY(nullptr)
    , m_pU(nullptr)
    , m_pV(nullptr)
    , m_width(width)
    , m_height(height)
    , m_size(width * height)
{
    m_pFile = new std::ifstream(pFileName, std::ifstream::in | std::ifstream::binary);
    if ((nullptr == m_pFile) || !m_pFile->good())
    {
        delete m_pFile;
        throw std::runtime_error("Failed to open YUV file " + YUV_FILE_NAME);
    }

    m_pY = new GLubyte[m_size];
    m_pU = new GLubyte[m_size / 4];
    m_pV = new GLubyte[m_size / 4];

    SetTextureAttribute();

    SetNextFrame();
}
        

デストラクタでは、オープンしたファイルを閉じ、コンストラクタで作成したY, U, Vデータを1フレーム分ストアできる領域を解放します。

更に、glDeleteTextures()関数でテクスチャを削除します。

CTexture::~CTexture()
{
    if (nullptr != m_pFile)
    {
        m_pFile->close();
        delete m_pFile;
    }
    if (nullptr != m_pY)
    {
        delete[] m_pY;
    }
    if (nullptr != m_pU)
    {
        delete[] m_pU;
    }
    if (nullptr != m_pV)
    {
        delete[] m_pV;
    }
    if (0 != m_textureIDY)
    {
        glDeleteTextures(1, &m_textureIDY);
    }
    if (0 != m_textureIDU)
    {
        glDeleteTextures(1, &m_textureIDU);
    }
    if (0 != m_textureIDV)
    {
        glDeleteTextures(1, &m_textureIDV);
    }
}
        

SetNextFrame()メソッドでは、先ず、CTexture::ReadYUV()メソッドで1フレーム分のYUVデータを読み込みます。

データの読み込みが成功したら、テクスチャのユニット番号を指定してglActiveTexture()関数を呼び出す事でフラグメントシェーダープログラム中のtextureSampler型のグローバル変数をアクティベートします。

glBindTexture()関数で指定のIDのテクスチャをバインドし、glTexImage2D()で実際のデータ、m_pY, m_pU, m_pVをセットします。

HRESULT CTexture::SetNextFrame()
{
    HRESULT hr = ReadYUV();
    if (S_OK == hr)
    {
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, m_textureIDY);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, m_width, m_height, 0, GL_RED, GL_UNSIGNED_BYTE, m_pY);
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, m_textureIDU);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, m_width / 2, m_height / 2, 0, GL_RED, GL_UNSIGNED_BYTE, m_pU);
        glActiveTexture(GL_TEXTURE2);
        glBindTexture(GL_TEXTURE_2D, m_textureIDV);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, m_width / 2, m_height / 2, 0, GL_RED, GL_UNSIGNED_BYTE, m_pV);
    }
    return hr;
}
        

SetTextureAttribute()メソッドでは、各テクスチャを作成し、属性を設定しています。

先ず、glGenTextures()関数でテクスチャを作成し、IDを取得します。

次に、glBindTexture()関数で作成したテクスチャをバインドし、それに続く関数が適用されるテクスチャを指定します。

glPixelStorei()関数では、m_pY, m_pU, m_pVがバイト単位のデータですので、メモリアライメントを1に指定しています。

また、glTexParameteri()関数では、テクスチャを拡大、縮小する際に用いるフィルターを線形フィルターに指定しています。

void CTexture::SetTextureAttribute()
{
    glGenTextures(1, &m_textureIDY);
    glBindTexture(GL_TEXTURE_2D, m_textureIDY);
    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glGenTextures(1, &m_textureIDU);
    glBindTexture(GL_TEXTURE_2D, m_textureIDU);
    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glGenTextures(1, &m_textureIDV);
    glBindTexture(GL_TEXTURE_2D, m_textureIDV);
    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
}
        

ReadYUV()メソッドでは、単純に、1フレーム分のYUVデータをファイルから読み込んでいます。

HRESULT CTexture::ReadYUV()
{
    HRESULT hr = S_FALSE;

    if ((nullptr != m_pFile) && (m_pFile->good()))
    {
        if (!m_pFile->eof())
        {
            m_pFile->read(reinterpret_cast<char*>(m_pY), m_size);
            m_pFile->read(reinterpret_cast<char*>(m_pU), m_size / 4);
            m_pFile->read(reinterpret_cast<char*>(m_pV), m_size / 4);
            hr = S_OK;
        }
    }

    return hr;
}
        

引数は、YUVファイル名です。

既にウィンドウがオープンされている場合には、pwinはNULLではありませんので、解放してウィンドウを閉じておきます。

次に、ウィンドウサイズとYUVファイル名を指定して、CWindowのオブジェクトを作成します。
なお、ウィンドウサイズは、CIFサイズではなく、幅、高さ共にCIFの幅に合わせた、正方形としています。
こうする事で、画像が表示された際に上下に帯ができて、画像のクリアに使用した色の確認等ができます。
ウィンドウのサイズは、適当に設定しても問題ないはずです。

CWindow::Render()メソッドをコールします。
YUVファイルが終わりに達した場合には、S_FAIL(1L)が返ります。

DLLのAPIを定義します。

1. 「ソリューションエクスプローラー」でShowYUVプロジェクトを右クリック
2. 「追加」→「新しい項目…」を選択
3. 「新しい項目の追加」ウィンドウの左ペインの「Visual C++」→「コード」を選択
4. 中央ペインの、モジュール定義ファイル(.def)を選択
5. 「名前」にShowYUVと記入し、OKをクリック

作成されたファイルには、以下のように記入します。

LIBRARY ShowYUV.dll

EXPORTS
    CreateOpenGLWindow
    Render
      

MainWindow.xaml.csのMainWindowクラス内で、DLLのAPIの宣言をしておきます。

[System.Runtime.InteropServices.DllImport("../ShowYUV.dll")]
private static extern int CreateOpenGLWindow(string fileName);

[System.Runtime.InteropServices.DllImport("../ShowYUV.dll")]
private static extern int Render();
      

なお、ShowYUV.dllが作成される場所により、指定のフォルダが異なる場合がありますので、DLLの読み込みに失敗する場合には確認してください。

FileOpen<Button>がクリックされたら、FileOpen_Click()メソッドがコールされます。

FileOpen_Click()メソッド内では、ファイルオープンダイアログを表示し、YUVファイル名を取得します。

YUVファイル名が取得できたら、DLLのAPIである、CreateOpenGLWindow()関数をコールして、ウィンドウを作成し、最初のフレームを表示します。

private void FileOpen_Click(object sender, RoutedEventArgs e)
{
    var dialog = new Microsoft.Win32.OpenFileDialog();
    dialog.Title = "YUVファイルの選択";
    dialog.Filter = "YUVァイル (*.yuv)|*.yuv";
    dialog.CheckFileExists = true;

    // ダイアログを表示する
    if (dialog.ShowDialog() == true)
    {
        FileName.Text = dialog.FileName;
        Play.IsEnabled = true;
        CreateOpenGLWindow(dialog.FileName);
    }

}
      

Play<Button>がクリックされたら、Play_Click()メソッドがコールされます。

Play_Click()メソッド内では、定期的にDLLのAPIであるRender()関数がコールされるように、タイマーをスタートさせます。

タイマーの設定は、予めMainWindowクラスのコンストラクタ内で行っておきます。
タイマーのイベントハンドラとしてCompositionTarget_Rendering()メソッドを設定し、間隔を33msecとしておきます。

public MainWindow()
{
    InitializeComponent();
    _playTimer = new DispatcherTimer();
    _playTimer.Tick += new EventHandler(CompositionTarget_Rendering);
    _playTimer.Interval = new TimeSpan(0, 0, 0, 0, 33);
}
      

DispatcherTimer _playTimer;
private void Play_Click(object sender, RoutedEventArgs e)
{
    Play.IsEnabled = false;
    _playTimer.Start();
}
      

タイマーのイベントハンドラcompositionTarget_Rendering()メソッドでは、DLLのAPIであるRender()関数をコールします。
Render()関数の戻り値がS_OK(0)以外の場合には、YUVファイルが終わりに達した等のエラーが発生していますので、タイマーを止めます。

void CompositionTarget_Rendering(object? sender, EventArgs e)
{
    int rc = Render();
    if (rc != 0)
    {
        _playTimer.Stop();
    }
}
      

先ずは、MSDNで説明されている「チュートリアル: WPF でホストするための Direct3D9 コンテンツの作成」に沿って、C++のDLLを作成して行きます。

サンプルコード内では、プロジェクト名が「D3DContent」となっていますが、「Direct3DYUV」に読み替えて下さい。

前準備

クラスの作成

stdafx.h

dllmain.cpp

Direct3DYUV.def

ライブラリの追加

エラーの修正

CUSTOMVERTEX vertices[] =
{
    { -1.0f, -1.0f, 0.0f, 0xffff0000, }, // x, y, z, color
    {  1.0f, -1.0f, 0.0f, 0xff00ff00, },
    {  0.0f,  1.0f, 0.0f, 0xff00ffff, },
};
          

IFC(m_pd3dDevice->BeginScene());
IFC(m_pd3dDevice->Clear(
    0,
    NULL,
    D3DCLEAR_TARGET,
    D3DCOLOR_ARGB(128, 0, 0, 128),  // NOTE: Premultiplied alpha!
    1.0f,
    0
));
          

UINT  iTime = GetTickCount() % 1000;
FLOAT fAngle = iTime * (2.0f * D3DX_PI) / 1000.0f;
          

次に、MSDNで説明されている「チュートリアル: WPF での Direct3D9 コンテンツのホスト」に沿って、WPFでUIを作成して行きます。

コード作成

DLLのコピー

実行

作成されたDemoApp.hに「パート 1: DemoApp ヘッダーを作成する」の3および4のコードを転記します。
なお、DemoApp.hの先頭に、先程変更したframework.hをインクルードする事を忘れないでください。

また、後程、「情報表示」ダイアログを表示するためのコールバックをWinDeskTopViewYUV.cppからコピーするので、About(…)関数をクラスメソッドとして宣言をしておきます。
結果としてDemoApp.hは以下のようになります。

#pragma once

#include "framework.h"   // 忘れないように!!

class DemoApp
{
private:
    HWND m_hwnd;
    ID2D1Factory* m_pDirect2dFactory;
    ID2D1HwndRenderTarget* m_pRenderTarget;
    ID2D1SolidColorBrush* m_pLightSlateGrayBrush;
    ID2D1SolidColorBrush* m_pCornflowerBlueBrush;

public:
    DemoApp();
    ~DemoApp();

    // Register the window class and call methods for instantiating drawing resources
    HRESULT Initialize();

    // Process and dispatch messages
    void RunMessageLoop();

private:
    // Initialize device-independent resources.
    HRESULT CreateDeviceIndependentResources();

    // Initialize device-dependent resources.
    HRESULT CreateDeviceResources();

    // Release device-dependent resource.
    void DiscardDeviceResources();

    // Draw content.
    HRESULT OnRender();

    // Resize the render target.
    void OnResize(
        UINT width,
        UINT height
    );

    // The windows procedure.
    static LRESULT CALLBACK WndProc(
        HWND hWnd,
        UINT message,
        WPARAM wParam,
        LPARAM lParam
    );

    // 情報表示ダイアログ用コールバック
    static INT_PTR CALLBACK About(
        HWND hDlg,
        UINT message,
        WPARAM wParam,
        LPARAM lParam
    );
};
        

作成されたDemoApp.cppに「パート 2: クラスインフラストラクチャを実装する」の1～3のコードを転記します。
4のコードについては、後程、使用します。

更に、「パート 3: Direct2D リソースの作成」の1～5のコードを転記します。

なお、2と3のコードはHRESULT DemoApp::CreateDeviceResources()メソッドの内容のみで、HRESULT DemoApp::CreateDeviceResources()メソッドの全体は4にまとまっていますので、2と3は飛ばして4のみを転記しておきます。

次に「パート 4: Direct2D コンテンツをレンダリングする」の1～13までのコードを転記します。
なお、2～12は1つのメソッドを分割していますので、HRESULT DemoApp::OnRender()メソッドに纏めます。

最後に、「情報表示」ダイアログのメッセージハンドラーをWinDeskTopViewYUV.cppのAbout(…)メッセージハンドラーからコピーしておきます。
追加として、Direct2Dのライブラリをコードの先頭でpragmaによって指定しておきます。

また、ID2D1Factory::GetDesktopDpiが非推奨とするエラーが出るので、pragmaで抑制しておきます。

更に、後程、Resource.hに定義された値を使用しますので、DemoAPP.cppの先頭でResource.hもインクルードしておきます。

結果としてDemoApp.cppは以下のようになります。

#pragma comment(lib, "d2d1.lib")
#pragma warning(disable:4996)

#include "DemoApp.h"
#include "Resource.h"

DemoApp::DemoApp() :
    m_hwnd(NULL),
    m_pDirect2dFactory(NULL),
    m_pRenderTarget(NULL),
    m_pLightSlateGrayBrush(NULL),
    m_pCornflowerBlueBrush(NULL)
{
}

DemoApp::~DemoApp()
{
    SafeRelease(&m_pDirect2dFactory);
    SafeRelease(&m_pRenderTarget);
    SafeRelease(&m_pLightSlateGrayBrush);
    SafeRelease(&m_pCornflowerBlueBrush);

}
        

void DemoApp::RunMessageLoop()
{
    MSG msg;

    while (GetMessage(&msg, NULL, 0, 0))
    {
        TranslateMessage(&msg);
        DispatchMessage(&msg);
    }
}
        

HRESULT DemoApp::Initialize()
{
    HRESULT hr;

    // Initialize device-indpendent resources, such
    // as the Direct2D factory.
    hr = CreateDeviceIndependentResources();

    if (SUCCEEDED(hr))
    {
        // Register the window class.
        WNDCLASSEX wcex = { sizeof(WNDCLASSEX) };
        wcex.style = CS_HREDRAW | CS_VREDRAW;
        wcex.lpfnWndProc = DemoApp::WndProc;
        wcex.cbClsExtra = 0;
        wcex.cbWndExtra = sizeof(LONG_PTR);
        wcex.hInstance = HINST_THISCOMPONENT;
        wcex.hbrBackground = NULL;
        wcex.lpszMenuName = NULL;
        wcex.hCursor = LoadCursor(NULL, IDI_APPLICATION);
        wcex.lpszClassName = L"D2DDemoApp";

        RegisterClassEx(&wcex);


        // Because the CreateWindow function takes its size in pixels,
        // obtain the system DPI and use it to scale the window size.
        FLOAT dpiX, dpiY;

        // The factory returns the current system DPI. This is also the value it will use
        // to create its own windows.
        m_pDirect2dFactory->GetDesktopDpi(&dpiX, &dpiY);


        // Create the window.
        m_hwnd = CreateWindow(
            L"D2DDemoApp",
            L"Direct2D Demo App",
            WS_OVERLAPPEDWINDOW,
            CW_USEDEFAULT,
            CW_USEDEFAULT,
            static_cast<UINT>(ceil(640.f * dpiX / 96.f)),
            static_cast<UINT>(ceil(480.f * dpiY / 96.f)),
            NULL,
            NULL,
            HINST_THISCOMPONENT,
            this
        );
        hr = m_hwnd ? S_OK : E_FAIL;
        if (SUCCEEDED(hr))
        {
            ShowWindow(m_hwnd, SW_SHOWNORMAL);
            UpdateWindow(m_hwnd);
        }
    }

    return hr;
}
        

HRESULT DemoApp::CreateDeviceIndependentResources()
{
    HRESULT hr = S_OK;

    // Create a Direct2D factory.
    hr = D2D1CreateFactory(D2D1_FACTORY_TYPE_SINGLE_THREADED, &m_pDirect2dFactory);

    return hr;
}
        

HRESULT DemoApp::CreateDeviceResources()
{
    HRESULT hr = S_OK;

    if (!m_pRenderTarget)
    {
        RECT rc;
        GetClientRect(m_hwnd, &rc);

        D2D1_SIZE_U size = D2D1::SizeU(
            rc.right - rc.left,
            rc.bottom - rc.top
        );

        // Create a Direct2D render target.
        hr = m_pDirect2dFactory->CreateHwndRenderTarget(
            D2D1::RenderTargetProperties(),
            D2D1::HwndRenderTargetProperties(m_hwnd, size),
            &m_pRenderTarget
        );


        if (SUCCEEDED(hr))
        {
            // Create a gray brush.
            hr = m_pRenderTarget->CreateSolidColorBrush(
                D2D1::ColorF(D2D1::ColorF::LightSlateGray),
                &m_pLightSlateGrayBrush
            );
        }
        if (SUCCEEDED(hr))
        {
            // Create a blue brush.
            hr = m_pRenderTarget->CreateSolidColorBrush(
                D2D1::ColorF(D2D1::ColorF::CornflowerBlue),
                &m_pCornflowerBlueBrush
            );
        }
    }

    return hr;
}
        

void DemoApp::DiscardDeviceResources()
{
    SafeRelease(&m_pRenderTarget);
    SafeRelease(&m_pLightSlateGrayBrush);
    SafeRelease(&m_pCornflowerBlueBrush);
}
        

LRESULT CALLBACK DemoApp::WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
{
    LRESULT result = 0;

    if (message == WM_CREATE)
    {
        LPCREATESTRUCT pcs = (LPCREATESTRUCT)lParam;
        DemoApp* pDemoApp = (DemoApp*)pcs->lpCreateParams;

        ::SetWindowLongPtrW(
            hwnd,
            GWLP_USERDATA,
            reinterpret_cast<LONG_PTR>(pDemoApp)
        );

        result = 1;
    }
    else
    {
        DemoApp* pDemoApp = reinterpret_cast<DemoApp*>(static_cast<LONG_PTR>(
            ::GetWindowLongPtrW(
                hwnd,
                GWLP_USERDATA
            )));

        bool wasHandled = false;

        if (pDemoApp)
        {
            switch (message)
            {
            case WM_SIZE:
            {
                UINT width = LOWORD(lParam);
                UINT height = HIWORD(lParam);
                pDemoApp->OnResize(width, height);
            }
            result = 0;
            wasHandled = true;
            break;

            case WM_DISPLAYCHANGE:
            {
                InvalidateRect(hwnd, NULL, FALSE);
            }
            result = 0;
            wasHandled = true;
            break;

            case WM_PAINT:
            {
                pDemoApp->OnRender();
                ValidateRect(hwnd, NULL);
            }
            result = 0;
            wasHandled = true;
            break;

            case WM_DESTROY:
            {
                PostQuitMessage(0);
            }
            result = 1;
            wasHandled = true;
            break;
            }
        }

        if (!wasHandled)
        {
            result = DefWindowProc(hwnd, message, wParam, lParam);
        }
    }

    return result;
}
        

HRESULT DemoApp::OnRender()
{
    HRESULT hr = S_OK;

    hr = CreateDeviceResources();
    if (SUCCEEDED(hr))
    {
        m_pRenderTarget->BeginDraw();

        m_pRenderTarget->SetTransform(D2D1::Matrix3x2F::Identity());

        m_pRenderTarget->Clear(D2D1::ColorF(D2D1::ColorF::White));

        D2D1_SIZE_F rtSize = m_pRenderTarget->GetSize();

        // Draw a grid background.
        int width = static_cast<int>(rtSize.width);
        int height = static_cast<int>(rtSize.height);

        for (int x = 0; x < width; x += 10)
        {
            m_pRenderTarget->DrawLine(
                D2D1::Point2F(static_cast<FLOAT>(x), 0.0f),
                D2D1::Point2F(static_cast<FLOAT>(x), rtSize.height),
                m_pLightSlateGrayBrush,
                0.5f
            );
        }

        for (int y = 0; y < height; y += 10)
        {
            m_pRenderTarget->DrawLine(
                D2D1::Point2F(0.0f, static_cast<FLOAT>(y)),
                D2D1::Point2F(rtSize.width, static_cast<FLOAT>(y)),
                m_pLightSlateGrayBrush,
                0.5f
            );
        }

        // Draw two rectangles.
        D2D1_RECT_F rectangle1 = D2D1::RectF(
            rtSize.width / 2 - 50.0f,
            rtSize.height / 2 - 50.0f,
            rtSize.width / 2 + 50.0f,
            rtSize.height / 2 + 50.0f
        );

        D2D1_RECT_F rectangle2 = D2D1::RectF(
            rtSize.width / 2 - 100.0f,
            rtSize.height / 2 - 100.0f,
            rtSize.width / 2 + 100.0f,
            rtSize.height / 2 + 100.0f
        );

        // Draw a filled rectangle.
        m_pRenderTarget->FillRectangle(&rectangle1, m_pLightSlateGrayBrush);

        // Draw the outline of a rectangle.
        m_pRenderTarget->DrawRectangle(&rectangle2, m_pCornflowerBlueBrush);

        hr = m_pRenderTarget->EndDraw();
    }

    if (hr == D2DERR_RECREATE_TARGET)
    {
        hr = S_OK;
        DiscardDeviceResources();
    }

    return hr;
}
        

void DemoApp::OnResize(UINT width, UINT height)
{
    if (m_pRenderTarget)
    {
        // Note: This method can fail, but it's okay to ignore the
        // error here, because the error will be returned again
        // the next time EndDraw is called.
        m_pRenderTarget->Resize(D2D1::SizeU(width, height));
    }
}
        

// バージョン情報ボックスのメッセージ ハンドラーです。
INT_PTR CALLBACK DemoApp::About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
    UNREFERENCED_PARAMETER(lParam);
    switch (message)
    {
    case WM_INITDIALOG:
        return (INT_PTR)TRUE;

    case WM_COMMAND:
        if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL)
        {
            EndDialog(hDlg, LOWORD(wParam));
            return (INT_PTR)TRUE;
        }
        break;
    }
    return (INT_PTR)FALSE;
}
        

メニューの追加

HRESULT DemoApp::Initialize()
{
    HRESULT hr;

    // Initialize device-indpendent resources, such
    // as the Direct2D factory.
    hr = CreateDeviceIndependentResources();

    if (SUCCEEDED(hr))
    {
        // Register the window class.
        WNDCLASSEX wcex = { sizeof(WNDCLASSEX) };
        wcex.style = CS_HREDRAW | CS_VREDRAW;
        wcex.lpfnWndProc = DemoApp::WndProc;
        wcex.cbClsExtra = 0;
        wcex.cbWndExtra = sizeof(LONG_PTR);
        wcex.hInstance = HINST_THISCOMPONENT;
        wcex.hbrBackground = NULL;
        wcex.lpszMenuName = MAKEINTRESOURCEW(IDC_WINDESKTOPVIEWYUV);
        wcex.hCursor = LoadCursor(NULL, IDI_APPLICATION);
        wcex.lpszClassName = L"D2DDemoApp";

        RegisterClassEx(&wcex);


        // Because the CreateWindow function takes its size in pixels,
        // obtain the system DPI and use it to scale the window size.
        FLOAT dpiX, dpiY;

        // The factory returns the current system DPI. This is also the value it will use
        // to create its own windows.
        m_pDirect2dFactory->GetDesktopDpi(&dpiX, &dpiY);


        // Create the window.
        m_hwnd = CreateWindow(
            L"D2DDemoApp",
            L"Direct2D Demo App",
            WS_OVERLAPPEDWINDOW,
            CW_USEDEFAULT,
            CW_USEDEFAULT,
            static_cast<UINT>(ceil(640.f * dpiX / 96.f)),
            static_cast<UINT>(ceil(480.f * dpiY / 96.f)),
            NULL,
            NULL,
            HINST_THISCOMPONENT,
            this
        );
        hr = m_hwnd ? S_OK : E_FAIL;
        if (SUCCEEDED(hr))
        {
            ShowWindow(m_hwnd, SW_SHOWNORMAL);
            UpdateWindow(m_hwnd);
        }
    }

    return hr;
}
          

case WM_COMMAND:
    {
        int wmId = LOWORD(wParam);
        // 選択されたメニューの解析:
        switch (wmId)
        {
        case IDM_ABOUT:
            DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
            break;
        case IDM_EXIT:
            DestroyWindow(hWnd);
            break;
        default:
            return DefWindowProc(hWnd, message, wParam, lParam);
        }
    }
    break;
          

LRESULT CALLBACK DemoApp::WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
{
    LRESULT result = 0;

    if (message == WM_CREATE)
    {
        LPCREATESTRUCT pcs = (LPCREATESTRUCT)lParam;
        DemoApp* pDemoApp = (DemoApp*)pcs->lpCreateParams;

        ::SetWindowLongPtrW(
            hwnd,
            GWLP_USERDATA,
            reinterpret_cast<LONG_PTR>(pDemoApp)
        );

        result = 1;
    }
    else
    {
        DemoApp* pDemoApp = reinterpret_cast<DemoApp*>(static_cast<LONG_PTR>(
            ::GetWindowLongPtrW(
                hwnd,
                GWLP_USERDATA
            )));

        bool wasHandled = false;

        if (pDemoApp)
        {
            switch (message)
            {
            case WM_COMMAND:
            {
                int wmId = LOWORD(wParam);
                // 選択されたメニューの解析:
                switch (wmId)
                {
                case IDM_ABOUT:
                    DialogBox(GetModuleHandle(NULL), MAKEINTRESOURCE(IDD_ABOUTBOX), hwnd, About);
                    break;
                case IDM_EXIT:
                    DestroyWindow(hwnd);
                    break;
                default:
                    return DefWindowProc(hwnd, message, wParam, lParam);
                }
            }
            result = 0;
            wasHandled = true;
            break;
            case WM_SIZE:
            {
                UINT width = LOWORD(lParam);
                UINT height = HIWORD(lParam);
                pDemoApp->OnResize(width, height);
            }
            result = 0;
            wasHandled = true;
            break;

            case WM_DISPLAYCHANGE:
            {
                InvalidateRect(hwnd, NULL, FALSE);
            }
            result = 0;
            wasHandled = true;
            break;

            case WM_PAINT:
            {
                pDemoApp->OnRender();
                ValidateRect(hwnd, NULL);
            }
            result = 0;
            wasHandled = true;
            break;

            case WM_DESTROY:
            {
                PostQuitMessage(0);
            }
            result = 1;
            wasHandled = true;
            break;
            }
        }

        if (!wasHandled)
        {
            result = DefWindowProc(hwnd, message, wParam, lParam);
        }
    }

    return result;
}
          

元々のプロジェクトのコードであるWinDeskTopViewYUV.cppについては、とりあえずWin32APIでWindowを表示するコードが全て入っています。

ただ、DemoAPPクラスにDirect2Dを使用してWindowを表示するコードを記述しましたので、メイン関数以外は必要ありません。

ですので、wWinMain(…)関数とAbout(…)コールバック関数以外は、キッパリと削除します。

また、マクロ定義やグローバル変数、関数の宣言等も使用しないため削除します。

最後に、wWinMain(…)関数の内容は、「パート 2: クラスインフラストラクチャを実装する」の4のWinMain(…)関数の中身と入れ替えます。
wWinMain(…)関数内で、DemoAppを使っていますので、DemoApp.hをインクルードする事を忘れないでください。

なお、wWinmain(…)関数内の最初にCoInitialize(NULL)を、最後にCoUninitialize()をコールしているのは、DirectXを使用する際の、と云うか、COMを使う際の作法です。
通常、各スレッドの先頭でCoInitialize(NULL)を、最後にCoUninitialize()をコールしておきます。

結果として、WinDeskTopViewYUV.cppは以下のようになります。

// WinDeskTopViewYUV.cpp : アプリケーションのエントリ ポイントを定義します。
//

#include "framework.h"
#include "WinDeskTopViewYUV.h"
#include "DemoApp.h"

int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPWSTR    lpCmdLine,
                     _In_ int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hInstance);
    UNREFERENCED_PARAMETER(hPrevInstance);
    UNREFERENCED_PARAMETER(lpCmdLine);
    UNREFERENCED_PARAMETER(nCmdShow);

    // TODO: ここにコードを挿入してください。

    // Use HeapSetInformation to specify that the process should
    // terminate if the heap manager detects an error in any heap used
    // by the process.
    // The return value is ignored, because we want to continue running in the
    // unlikely event that HeapSetInformation fails.
    HeapSetInformation(NULL, HeapEnableTerminationOnCorruption, NULL, 0);

    if (SUCCEEDED(CoInitialize(NULL)))
    {
        {
            DemoApp app;

            if (SUCCEEDED(app.Initialize()))
            {
                app.RunMessageLoop();
            }
        }
        CoUninitialize();
    }

    return 0;
}