Win10 Texture Picker

Cube の Texture を Picker で選択します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの説明

  1. File Picker を使うとハードディスク上のファイルを選択して入力することが出来ます。
    Cube の座標を定義して生成したモデルに張り付ける Texture を Picker で選択します。
    最初のステップとして Win10 TextureBox を参照して Cube にテクスチャを貼り付けて描画します。
    1. DirectX 11 および XAML アプリ(ユニバーサル Windows)を生成します。
      カラーキューブが回転しながら描画されます。
    2. Windows10 Shader を参照して Texture Model に対応したシェーダに入れ替えて下さい。
    3. 次のファイルを Content\ のファイルに上書きして下さい。
      ソースコードは Win10 TextureBox に掲載されています。
      Content\Sample3DSceneRenderer.h
      Content\Sample3DSceneRenderer.cpp
    4. 次のファイルを Content\ に格納して下さい。
      App1/Content を選択して[追加][既存の項目]からプロジェクトに追加します。
      ソースコードは Windows10 DirectX Library に掲載しています。
      Content\BasicReaderWriter.h
      Content\BasicReaderWriter.cpp
      Content\TextureLoader.h
      Content\TextureLoader.cpp
    5. テクスチャ画像(star.jpg)を App1\star.jpg にコピーしてプロジェクトに加えます。
      これで star.jpg を貼り付けた Cube が回転しながら描画されます。
  2. 準備が出来た所で DirectXPage.xaml Class でテクスチャを選択します。
    DirectXPage.xaml.cpp に次のソースを追加して下さい。
    File Picker を使って画像を選択する例題は Image Picker を参照して下さい。
    #include <ppltasks.h>
    using namespace Windows::Storage::Pickers;
    using namespace Windows::Storage;
    using namespace Windows::Storage::Streams;
    using namespace Windows::UI::Xaml::Media::Imaging;
    
  3. DirectXPage.xaml.cpp では m_main(App1Main) を生成しています。
    m_main->GetTexture(fileData, L"Texture") で fileData を中継します。
        m_main = std::unique_ptr<App1Main>(new App1Main(m_deviceResources));
    
  4. DirectXPage.xaml のデザイン画面に Button を貼り付けて、イベントハンドラを追加します。
    ボタンのクリックで画像ファイルを選択する Button_Click() 関数です。
    画像ファイルの名前が StorageFile^ file で、バイナリデータが ReadBufferAsync(file) で入力されます。
    画像のバイナリデータを引数にして m_main->GetTexture() を呼び出します。
    バイナリデータは次のようにリレーして、TextureLoader Class の LoadTexture() でロードされます。
    m_main->GetTexture() ⇒ m_sceneRenderer->SetTexture() ⇒ loader->LoadTexture()
        m_main = std::unique_ptr<App1Main>(new App1Main(m_deviceResources));
    
    void App1::DirectXPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {   auto open = ref new FileOpenPicker();
        open->SuggestedStartLocation = PickerLocationId::Desktop;
        open->FileTypeFilter->Clear();
        open->FileTypeFilter->Append(".bmp");
        open->FileTypeFilter->Append(".png");
        open->FileTypeFilter->Append(".jpeg");
        open->FileTypeFilter->Append(".jpg");
    
        create_task(open->PickSingleFileAsync()).then([this](StorageFile^ file)
        {   return FileIO::ReadBufferAsync(file);
        }).then([=](IBuffer^ buffer) 
        {
            auto fileData = ref new Platform::Array<byte>(buffer->Length);
            DataReader::FromBuffer(buffer)->ReadBytes(fileData);
            m_main->GetTexture(fileData, L"Texture");
        });
    }
    
  5. App1Main.cpp(.h) で GetTexture() 関数を定義して、テクスチャをロードする SetTexture() 関数を呼び出します。
    App1Main Class は DirectXPage Class から受け取った fileData を Sample3DSceneRenderer Class にリレーするだけです。
    void GetTexture(Platform::Array<byte>^ fileData, Platform::String^ fileName);
    
    void App1Main::GetTexture(Platform::Array<byte>^ fileData, Platform::String^ fileName)
    {
        m_sceneRenderer->SetTexture(fileData, fileName);
    }
    
  6. Sample3DSceneRenderer.h に SetTexture() と m_textureSRV, m_sampler を定義します。
    既に定義されているときは、初期値として nullptr を設定して下さい。
        void SetTexture(Platform::Array<byte>^ tex, Platform::String^ filename);
        Microsoft::WRL::ComPtr<ID3D11ShaderResourceView> m_textureSRV = nullptr;
        Microsoft::WRL::ComPtr<ID3D11SamplerState> m_sampler = nullptr;
    
  7. Sample3DSceneRenderer.cpp に SetTexture() 関数を定義します。
    LoadTexture(tex, filename, nullptr, &m_textureSRV) が TextureLoader Class に新しく追加した Array<byte>^ tex からテクスチャを作成する関数です。
    void Sample3DSceneRenderer::SetTexture(Platform::Array<byte>^ tex, Platform::String^ filename)
    {
        TextureLoader^ loader = ref new TextureLoader(m_deviceResources->GetD3DDevice());
        loader->LoadTexture(tex, filename, nullptr, &m_textureSRV);
    }
    
  8. 最初に記述されていた L"earth.jpg" を入力してテクスチャを作成する TextureLoad をコメントアウトして下さい。
      //TextureLoader^ loader = ref new TextureLoader(m_deviceResources->GetD3DDevice());
      //loader->LoadTexture(L"earth.jpg", nullptr, &m_textureSRV);
    
  9. プログラムを起動すると、最初は真黒な立方体が描画されます。
    ボタンをクリックしてテクスチャ画像を選択します。
    選択した画像が立方体の各面に張り付けられます。
    様々なテクスチャ画像を選択して張り付けてみて下さい。

超初心者のプログラム入門(DirectX Store)