後に"PackageList"で選択したパッケージに関するライセンス情報をブラウザで表示するようにします。
なので、選択できるパッケージを1つに限定したいと思います。

そのため、<ListView...>タグの属性"SelectionMode"を"Single"に設定しています。

また、選択時に小細工をしたいので、"SelectionChanged"イベントに対するハンドラ"PackageList_SelectionChanged"メソッドを登録しておきます。

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}"/>
        </GridView>
    </ListView.View>
</ListView>

なお"PackageList_SelectionChanged"メソッドについては後で実装します。

“PackageList"の各列に表示するデータは、<GridViewColumn.../>タグで指定します。

<GridViewColumn.../>要素は<ListView>の子要素である<ListView.View>の更に子要素である<GridView>以下に配置します。

<GridViewColumn.../>タグでは、"Header"属性にヘッダーの名前を設定します。

また、"DisplayMemberBinding"属性に表示するデータを指定します。
今回の場合には、ListViewにセットしたReadOnlyObservableCollection<T>の型パラメーター"T"として以下のクラスを割り当てています。

protected class Package
{
    public string Name { get; set; }
    public string License { get; set; }
    public string Url { get; set; }
}

• Name: パッケージ名
• License: ライセンス [Custom, MIT…]
• Url: ライセンス情報が記載されたURL

従って、<GridViewColumn.../>タグの"DisplayMemberBinding"属性にはPackageクラスのプロパティ"Name"と"License"をバインディングしています。

因みに"PackageList"の"ItemsSource"プロパティに割り当てるReadOnlyObservableCollection<Package>クラスのインスタンスは、"AboutBox.xaml.cs"中、AboutBoxクラスの定数として以下のように指定します。

private static readonly ReadOnlyObservableCollection<Package> Packages = new ReadOnlyObservableCollection<Package>(
    new ObservableCollection<Package>() {
    new Package {Name = "WindowsAPICodePack-Core", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
    new Package {Name = "WindowsAPICodePack-Shell", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
    new Package {Name = "MahApps.Metro", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro/blob/develop/LICENSE"},
    new Package {Name = "MahApps.Metro.IconPacks", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro.IconPacks/blob/develop/LICENSE"},
    new Package {Name = "ControlzEx", License = "MIT", Url = "https://github.com/ControlzEx/ControlzEx/blob/develop/LICENSE"},
    new Package {Name = "Microsoft.Xaml.Behaviors.Wpf", License = "MIT", Url = "https://github.com/microsoft/XamlBehaviorsWpf/blob/master/LICENSE"},
    new Package {Name = "System.Text.Json", License = "MIT", Url = "https://www.nuget.org/packages/System.Text.Json/4.7.2/license"},
    new Package {Name = "MaterialDesignThemes", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    new Package {Name = "MaterialDesignColors", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    new Package {Name = "MaterialDesignThemes.MahApps", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
});

使用するパッケージは固定ですので"static readonly"とし各要素は初期化時に登録しておきます。

<ListView>のヘッダーのデザインは子要素である<ListView.View>の更に子要素である<GridView>以下に配置した<GridView.ColumnHeaderContainerStyle>内で行います。

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridView.ColumnHeaderContainerStyle>
                <Style TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Background" Value="LightBlue"/>
                </Style>
            </GridView.ColumnHeaderContainerStyle>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
        </GridView>
    </ListView.View>
</ListView>

なお<Style>タグの属性"TargetType"には"GridViewColumnHeader"を指定します。

因みに<GridView.ColumnHeaderContainerStyle>タグが省かれた場合には、何故かヘッダーの高さが異様に大きく取られてしまいます。
それを避けるためには、ヘッダーのデザインを指定しない場合でも以下のように<GridView.ColumnHeaderContainerStyle>タグを追加しておきます。

<GridView.ColumnHeaderContainerStyle>
    <Style/>
</GridView.ColumnHeaderContainerStyle>

また、デフォルトではリストの列幅はリスト全体をカバーするようには広がってくれません。
リスト全体ひ広がって表示させるには、今回に限っては列幅を指定するのが手っ取り早いかと思います。

とりあえずライセンス表示をする列の幅を"100″に固定し、パッケージ名を表示する列を広げる事で対応します。

パッケージ名を表示する列の幅の指定は"AboutBox"が描画される前に指定したいので、"Window_Loaded"イベントハンドラ内で行います。

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
            :
            :
         MouseLeftButtonDown="Window_MouseLeftButtonDown" Loaded="Window_Loaded"
        Title="AboutBox" Height="480" Width="640">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10,10,10,10" Background="White">
        <Grid>
            :
            :
        </Grid>
    </Border>
</Window>

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PackageColumn.Width = PackageList.ActualWidth - LicenseColumn.ActualWidth - SystemParameters.VerticalScrollBarWidth;
}

“PackageList"中、選択されたパッケージに対応したライセンスの情報をブラウザで表示するようにします。

そのためにライセンス表示用のボタンを設置します。

<Button x:Name="LicenseButton" Content="ライセンス表示" Grid.Row="4"  Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,10,5"
                    Style="{StaticResource MaterialDesignRaisedLightButton}" FontSize="9" Click="LicenseButton_Click"/>

なお"Click"イベントに対するハンドラ"LicenseButton_Click"は以下の通りです。

private void LicenseButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        var startInfo = new System.Diagnostics.ProcessStartInfo(Packages[PackageList.SelectedIndex].Url);
        startInfo.UseShellExecute = true;
        System.Diagnostics.Process.Start(startInfo);
        AlartTextBox.Text = "";
    }
    catch (System.ComponentModel.Win32Exception noBrowser)
    {
        if (noBrowser.ErrorCode == -2147467259)
        {
            AlartTextBox.Text = noBrowser.Message;
        }
    }
    catch (System.Exception other)
    {
        AlartTextBox.Text = other.Message;
    }
}

基本的にはブラウザでオープンするURIを指定して"System.Diagnostics.Process.Start"メソッドをコールすれば良かったはずなのですが、いつの間にか仕様が変わり、そのままでは例外が発生するようになりました。

新しい方法では以下のようにします。

1. ブラウザでオープンするURIを指定してSystem.Diagnostics.ProcessStartInfoクラスのインスタンスを作成
2. 作成したインスタンスの"UseShellExecute"プロパティを"true"に設定
3. 作成したインスタンスを指定して"System.Diagnostics.Process.Start"メソッドをコール

なお"System.Diagnostics.Process.Start"メソッドは例外が発生するため例外処理を行います。

今回は"PackageList"の下に配置した<TextBlock>の"AlartTextBox"にエラーメッセージを表示させています。

<TextBlock x:Name="AlartTextBox" Grid.Row="6" Grid.ColumnSpan="2" Foreground="Red"/>

なお、"AlartTextBox"のエラーメッセージは、"PackageList"の選択を変更した際にコールされるイベントハンドラ、"PackageList_SelectionChanged"メソッドでクリアするようにしています。

private void PackageList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    AlartTextBox.Text = "";
}

<ListView>も<ListBox>同様、デフォルトでは枠線が表示されません。

今回はコーナーと影をつけた枠線を表示したいのでMaterialDesignThemesの<materialDesign:Card>コンポーネントを使用してみます。

<materialDesign:Card Grid.Row="5" Grid.ColumnSpan="2" Cursor="">
    <ListView x:Name="PackageList" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
        <ListView.View>
            <GridView>
                <GridView.ColumnHeaderContainerStyle>
                    <Style TargetType="{x:Type GridViewColumnHeader}">
                        <Setter Property="Background" Value="LightBlue"/>
                    </Style>
                </GridView.ColumnHeaderContainerStyle>
                <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
            </GridView>
        </ListView.View>
    </ListView>
</materialDesign:Card>

“PackageList"を配置していたGridの位置に<materialDesign:Card>を配置し、その子要素として従来のListViewを配置します。

⑤Fromリストボックスのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で[ListBox]を選択
2. 「プロパティ」の"名前"に"FromListBox"と記入
3. 「プロパティ」の"Row"を"1″に、"Column"を"0″に設定
4. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)

⑥Toリストボックスのプロパティを設定していきます。
⑤Fromリストボックスと同様です。

1. 「ドキュメントアウトライン」で[ListBox]を選択
2. 「プロパティ」の"名前"に"ToListBox"と記入
3. 「プロパティ」の"Row"を"1″に、"Column"を"2″に設定
4. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)

⑦Copyボタンのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で[Button]を選択
2. 「プロパティ」の"名前"に"CopyButton"と記入
3. 「プロパティ」の"Row"を"1″に、"Column"を"1″に設定
4. 「プロパティ」の"HorizontalAlignment"と"VerticalAlignment"で"中央揃え"を選択
5. 「プロパティ」の"Margin"の"←"と"→"を"5″に、それ以外を"0″に設定(適当でOK)
6. 「プロパティ」の"Content"を" ⇒ “に変更
7. 「プロパティ」の"IsEnabled"のチェックを外す

リストボックスにファイル名が表示されていない状態では、Copyボタンは意味が無いため、最初は"IsEnabled"を"false"とし、クリックできない様にしています。

⑨Closeボタンのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で[Button]を選択
2. 「プロパティ」の"名前"に"CloseButton"と記入
3. 「プロパティ」の"Row"を"3″に、"Column"を"2″に設定
4. 「プロパティ」の"HorizontalAlignment"で"左揃え"を、"VerticalAlignment"で"中央揃え"を選択
5. 「プロパティ」の"Margin"の"→"と"↑"、"↓"を"5″に、"←"は"0″のままに設定(適当でOK)
6. 「プロパティ」の"Content"を"Close"に変更

①Fromボタンのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で0行0列に配置した[Grid]内の[Button]を選択
2. 「プロパティ」の"名前"に"FromButton"と記入
3. 「プロパティ」の"Row"が"0″、"Column"が"0″であることを確認
4. 「プロパティ」の"HorizontalAlignment"で"左揃え"を、"VerticalAlignment"で"中央揃え"を選択
5. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)
6. 「プロパティ」の"Content"を"From : “に変更

②Fromテキストボックスのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で0行0列に配置した[Grid]内の[TextBox]を選択
2. 「プロパティ」の"名前"に"FromTextBox"と記入
3. 「プロパティ」の"Column"を"1″に変更
4. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)
5. 「プロパティ」の"IsReadOnly"をチェック
6. 「プロパティ」の"Text"は"×"をクリックしてクリア
7. 「プロパティ」の"Width"と"ColumnSpan"は"×"をクリックしてリセット

なおFromテキストボックスで"IsReadOnly"を"false"(編集可)とすると、入力された文字列が正しいディレクトリ名かどうかのチェック等をする必要があり、複雑になるため、今回はFromボタンでの選択のみとし、Fromテキストボックスには選択されたフォルダを表示するだけとします。

③Toボタンのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で0行2列に配置した[Grid]内の[Button]を選択
2. 「プロパティ」の"名前"に"ToButton"と記入
3. 「プロパティ」の"Row"が"0″、"Column"が"0″であることを確認
4. 「プロパティ」の"HorizontalAlignment"で"左揃え"を、"VerticalAlignment"で"中央揃え"を選択
5. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)
6. 「プロパティ」の"Content"を" To : “に変更

④Toテキストボックスのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で0行2列に配置した[Grid]内の[TextBox]を選択
2. 「プロパティ」の"名前"に"ToTextBox"と記入
3. 「プロパティ」の"Column"を"1″に変更
4. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)
5. 「プロパティ」の"IsReadOnly"をチェック
6. 「プロパティ」の"Text"は"×"をクリックしてクリア
7. 「プロパティ」の"Width"と"ColumnSpan"は"×"をクリックしてリセット

なおToテキストボックスで"IsReadOnly"を"false"(編集可)とすると、入力された文字列が正しいディレクトリ名かどうかのチェック等をする必要があり、複雑になるため、今回はToボタンでの選択のみとし、Toテキストボックスには選択されたフォルダを表示するだけとします。

“共通ファイル名 :"ラベルのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で2行2列に配置した[Grid]内の[Label]を選択
2. 「プロパティ」の"HorizontalAlignment"で"左揃え"を、"VerticalAlignment"で"中央揃え"を選択
3. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)
4. 「プロパティ」の"Content"を"共通ファイル名 : “に変更

⑧ファイル名テキストボックスのプロパティを設定していきます。

1. 「ドキュメントアウトライン」で2行2列に配置した[Grid]内の[TextBox]を選択
2. 「プロパティ」の"名前"に"FileNameTextBox"と記入
3. 「プロパティ」の"Column"を"1″に変更
4. 「プロパティ」の"Margin"を全て"5″に設定(適当でOK)
5. 「プロパティ」の"Text"は"×"をクリックしてクリア
6. 「プロパティ」の"Width"と"ColumnSpan"は"×"をクリックしてリセット

ListBoxクラスの"ItemsSource"プロパティにObservableCollection<T>クラスのインスタンスをセットする事で、ObservableCollection<T>のインスタンスに対する項目の追加、削除等の操作を直接リストボックスのリスト表示に反映する事ができます。

型引数Tにstringを指定した場合には、リストボックスにはObservableCollection<string>のインスタンスの要素がそのまま表示されます。

型引数Tにクラスや構造体、タプル等を指定した場合にはリストボックスには、例えばObservableCollection<Tuple<string, string>>のインスタンスの要素のタプルの2つの文字列が並べて表示されます。
型引数に指定したクラスや構造体、タプルの特定のフィールドやプロパティのみを表示したい場合には、XAMLの<ListBox...>タグの子要素として<ListBox.ItemTemplate>タグ内で表示したいフィールドやプロパティを指定します。
例えばタプルの場合には、

<ListBox ...>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Item1}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

のようにします。
上記タプルのようにメンバー名が無い場合には、"Item1″, “Item2″…と云う名前を使用して指定します。

なお、<StackPanel>や<Grid>内に<TextBlock>を複数指定し、リストボックスに複数の項目をリストアップする事も可能です。
更に、<TextBlock>以外にも<Button>や<Image>等を配置する事も可能です。
詳細については検索などして調べて下さい。

今回はObservableCollection<T>の型引数にコピー元のファイル名とコピー先のファイル名をフィールドに持つクラスを指定します。
FromリストボックスとToリストボックスには、其々コピー元のファイル名のプロパティとコピー先のファイル名のプロパティを表示する事とします。

新しいクラスFileNamesとObservableCollection<FileNames>のフィールド/プロパティは以下のようになります。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CopyFilesWithSpecifiedName
{
    internal class FileList
    {
        public class FileNames
        {
            public string FromFile { get; set; } = "";
            public string ToFile { get; set; } = "";
        }

        public ObservableCollection<FileNames> FileNameList { get; } = new ObservableCollection<FileNames>();
    }
}

FromリストボックスにFileNamesクラスの"FromFile"プロパティを、ToリストボックスにFileNamesクラスの"ToFile"プロパティを表示するためには、"MainWindow.xaml"ファイルの<ListBox...>タグの部分を以下のように変更します。
なお、GUIでの操作での追加は面倒なので、XAMLファイルを直接編集します。

<ListBox x:Name="FromListBox" d:ItemsSource="{d:SampleData ItemCount=5}" Grid.Row="1" Margin="5,5,5,5">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FromFile}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="ToListBox" Grid.Row="1" Grid.Column="2" Margin="5,5,5,5" d:ItemsSource="{d:SampleData ItemCount=5}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ToFile}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

最後にMainWindowクラスのフィールドとしてFileListクラスを追加し、コンストラクタ"MainWindw"内でFromリストボックスとToリストボックスの"ItemsSource"にFileListクラスの"FileName"プロパティをセットします。

public partial class MainWindow : Window
{
    private FileList fileList= new FileList();

    public MainWindow()
    {
        InitializeComponent();

        FromListBox.ItemsSource = fileList.FileNameList;
        ToListBox.ItemsSource = fileList.FileNameList;
    }
}

コピー先フォルダを保持するプロパティ"TargetDir"を設定します。

internal class FileList
{
        :
        :
    public string TargetDir { get; set; } = "";
}

コピー元フォルダを保持するプロパティ"SourceDir"を設定します。
なお、例外発生時のエラーメッセージを保持するプロパティ"Message"も設定します。

今回、このフィールドに対するSetterはprivateとして外部からアクセスできないようにしています。
代わりに、コピー元フォルダをセットするためのメソッド"SetSourceDir"を作成します。

“SetSourceDir"メソッド内では、渡されたコピー元フォルダ内の全ファイル名を"FileNameList"にセットします。
因みに、コピー元フォルダ内のファイル名を取得する際に例外が発生する可能性がありますので、処理が成功したかどうかを戻り値として渡します。

internal class FileList
{
    public enum Code
    {
        OK,
        NG,
    }
        :
        :
    public string Message { get; private set; } = "";
    public string SourceDir { get; private set; } = "";
        :
        :
    public Code SetSourceDir(string dir)
    {
        Code result = Code.OK;

        try
        {
            var files = Directory.GetFiles(dir);
            SourceDir = dir;
            FileNameList.Clear();

            foreach (var file in files)
            {
                FileNameList.Add(new FileNames() { FromFile = file });
            }

            this.MakeToFilesList();
        }
        catch (Exception e)
        {
            Message = e.Message;
            result = Code.NG;
        }

        return result;
    }
}

1. Directory.GetFiles(dir): 指定フォルダ内のファイル名を取得、例外が発生する可能性あり
2. FileNameList.Clear(): 前にセットしていたファイル名はリセットする
3. this.MakeToFilesList(): 後に追加するメソッド、コピー先ファイル名を作成
4. Message = e.Message: 例外発生時のエラーメッセージを"Message"プロパティに追加
5. result = Code.NG: 例外発生時にはNGを返す

共通ファイル名を保持するフィールド"baseFileName"を設定します。
プロパティも追加しておきます。

なお、セッターについては、"baseFileName"に値をセットした後"MakeToFileList"メソッドをコールしています。

internal class FileList
{
        :
        :
    private string baseFileName = "new-file-name";
    public string BaseFileName {
        get { return baseFileName; }
        set
        {
            baseFileName = value;
            this.MakeToFilesList();
        }
    }
}

因みにコピー先ファイル名を作成するメソッドthis.MakeToFilesList()は後で追加します。

初期値は"new-file-name"としていますが他の値でも問題ありません。

なお、MainWindowクラスのコンストラクタ中で"FileNameTextBox"中の"Text"に初期値を設定しておきます。

public partial class MainWindow : Window
{
    private FileList fileList= new FileList();

    public MainWindow()
    {
        InitializeComponent();

        FromListBox.ItemsSource = fileList.FileNameList;
        ToListBox.ItemsSource = fileList.FileNameList;
        FileNameTextBox.Text = fileList.BaseFileName;    // 追加
    }
}

“FileNameList"内にセットしたコピー元ファイル名と"baseFileName"を元に、連番を付加してコピー先ファイル名を作成します。
作成したファイル名は、FileNamesクラスの"ToFile"プロパティにセットします。
コピー先フォルダについてはファイル名に含めません。

protected void MakeToFilesList()
{
    int num = 0;
    foreach (var file in FileNameList)
    {
        var ext = Path.GetExtension(file.FromFile);
        var newFileName = $"{baseFileName}{num++:d3}{ext}";
        file.ToFile = newFileName;
    }
}

本アプリケーションの肝となるメソッドです。

“FileNameList"にリストアップされたコピー元ファイル名とコピー先ファイル名、コピー先フォルダ名を使い、ファイルをコピーします。

public Code CopyFiles()
{
    Code result = Code.OK;

    var dir = (TargetDir == "") ? SourceDir : TargetDir;

    foreach (var file in FileNameList)
    {
        var targetFileName = Path.Join(dir, file.ToFile);

        try
        {
            File.Copy(file.FromFile, targetFileName);
        }
        catch (IOException)
        {
            continue;
        }
        catch (Exception e)
        {
            Message = e.Message;
            result = Code.NG;
            break;
        }
    }

    return result;
}

1. dir = (TargetDir == "") ? SourceDir : TargetDir: コピー先フォルダが指定されていない場合にはコピー元フォルダにコピーする
2. targetFileName = Path.Join(dir, file.ToFile): コピー先ファイル名の絶対パスを作成
3. File.Copy(file.FromFile, targetFileName): 実際のファイルコピー、例外が発生する可能性あり

コピー先ファイルが既に存在する等の例外の場合は、そのファイルのコピーはスキップし、次のファイルのコピーを継続します。
それ以外の予期しない例外が発生した場合には、コピーを中断し、負数を返します。

1. 「ソリューションエクスプローラー」の"CopyFilesWithSpecifiedName"を右クリック
2. “NuGetパッケージの管理…"を選択
3. 「NuGetパッケージマネージャー」で「参照」を選択
4. “WindowsAPICodePack-Shell"を選択し、"インストール"をクリック

なお、インストール後やプロジェクトをコンパイルする際に"warning NU1701″の警告が出るかもしれませんが問題ありません。
“WindowsAPICodePack"の作成時の.NETのバージョンが古い事に対する警告です。

CommonOpenFileDialogクラスはダイアログを表示してファイル選択を行うためのクラスです。
ただ、"IsFolderPicker"プロパティを"true"にする事で、ファイルの代わりにフォルダを選択するダイアログとする事ができます。

つまり、Microsoft.Win32.OpenFileDialogクラスより高機能なクラスと言えます。

先ず、CommonOpenFileDialogクラスを使用する場合、usingディレクティブで"Microsoft.WindowsAPICodePack.Dialogs"を指定しておきます。

更に、他のファイル操作用APIにありがちではありますが、CommonOpenFileDialogクラスのインスタンスとして確保したメモリ等のリソースは自動的に解放してくれません。
なので、CommonOpenFileDialogクラスのインスタンスの利用を終えた後に明示的に"Dispose"メソッドを呼び出すか、usingを使用して使用範囲を抜けた際に暗黙的にリソースを解放するようにします。

因みに、今回はCommonOpenFileDialogクラスのインスタンス作成と同時にプロパティをセットするようにしています。

ダイアログの表示は"ShowDialog"メソッドで行います。
戻り値は列挙子CommonFileDialogResultの"OK"か"Cancel"です。
其々、ダイアログでクリックされたボタンに対応しています。

なお、選択されたフォルダ名は"FileName"プロパティに絶対パスとしてセットされています。

“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;
}