Maverick Project

　Microsoft Visual Studio .NET 2003
　Microsoft DirectX 9.0 SDK (December 2004)
　シェーダーモデル 2.0

■色鉛筆画風シェーダー Prev　　Top　　Next

関連ページ：なし

今回もやっぱり簡単なやつで。色鉛筆画風シェーダーというものをやります。元ネタもやっぱり前回と同じく「GAME Watch」のネタです。つーか「GAME Watch」ばっかだな。

　
左側が普通にレンダリングしたサンプルです。右側が色鉛筆画風シェーダーを使用したサンプルです。うーん、３Ｄモデルは適当に作ったのでサンプル画像は「GAME Watch」の方が断然いいです(笑)。シェーダーのアルゴリズムも違うような気がするが。後シャドーは入れてません。

次に処理フローです。
１．３Ｄモデルを鉛筆風にレンダーターゲットサーフェイスにレンダリングする。
２．１のサーフェイスを参照し、キャンバス風にポストエフェクトをかける。

もうちょっと詳しく解説します。

●１について
色鉛筆画風テクスチャーを使用してモデルをレンダリングします。

テクスチャーのRG成分を使用します。ランバート拡散照明によるライティングの結果をもとにR成分とG成分を線形合成します。その値を参照してデカールテクスチャーと [1.0] を線形合成します。デカールテクスチャーは単一色にします。説明、省略してるけどソース見てください。

●２について
この段階はポストエフェクトとなります。色鉛筆画風テクスチャーのB成分を使用しキャンバス風にエフェクトをかけます。サンプル画像ではつぶれていてよくわかりませんが、キャンバスっぽくなっています。さてソースを見ていきます。

---ColoredPencilShader.fx---


float4x4 m_WVP;
float4 m_LightDir;
float4 m_Ambient = 0.0f;

sampler tex0 : register(s0);   //オブジェクトのテクスチャー
sampler tex1 : register(s1);   //色鉛筆テクスチャー

struct VS1_OUTPUT
{
   float4 Pos   : POSITION;
   float4 Col   : COLOR0;
   float2 Tex   : TEXCOORD0;
};
VS1_OUTPUT VS1( float4 Pos     : POSITION,
                float4 Normal  : NORMAL,
                float2 Tex     : TEXCOORD0 )
{
   VS1_OUTPUT Out;
   
   Out.Pos    = mul( Pos, m_WVP );
   Out.Tex    = Tex;
   
   float3 L = -m_LightDir.xyz;   
   float3 N = normalize( Normal.xyz );
   Out.Col = max( m_Ambient, dot(N, L) );
    
   return Out;
}

float4 PS1( VS1_OUTPUT In ) : COLOR0
{  
   float4 Out;
   
   //色鉛筆テクスチャーから色情報を取得
   float4 ColoredPencil = tex2D( tex1, In.Tex );
   
   float p = lerp( ColoredPencil.g, ColoredPencil.r, In.Col.r );
   Out = lerp( 1.0f, tex2D( tex0, In.Tex ) * In.Col, p );
   
   return Out;
}

struct VS2_OUTPUT
{
   float4 Pos   : POSITION;
   float2 Tex   : TEXCOORD0;
};
VS2_OUTPUT VS2( float4 Pos     : POSITION,
                float4 Normal  : NORMAL,
                float2 Tex     : TEXCOORD0 )
{
   VS2_OUTPUT Out;
   
   Out.Pos    = Pos;
   Out.Tex    = Tex;
   
   return Out;
}

float4 PS2( VS2_OUTPUT In ) : COLOR0
{  
   //キャンバス調の色情報は色鉛筆テクスチャーのB成分に格納されている
   return tex2D( tex0, In.Tex ) * tex2D( tex1, In.Tex ).b;
}


technique TShader
{
   //色鉛筆調にレンダリング
   pass P0
   {
      VertexShader = compile vs_1_1 VS1();
      PixelShader  = compile ps_2_0 PS1();
   }
   
   //キャンバスっぽくする
   pass P1
   {
      VertexShader = compile vs_1_1 VS2();
      PixelShader  = compile ps_2_0 PS2();
   }
}

色鉛筆画風シェーダーです。

---ColoredPencilShader.h---


//D3D2DSQUAREはスクリーン全体をおおう2Dオブジェクト(表面化散乱(Subsurface Scattering) ページ参照)
class COLORED_PENCIL_SHADER : public D3D2DSQUARE
{
private:
   LPD3DXEFFECT m_pEffect;
   D3DXHANDLE m_pTechnique, m_pWVP, m_pLightDir, m_pAmbient;
   D3DXMATRIX m_matView, m_matProj;
   LPDIRECT3DDEVICE9 m_pd3dDevice;

public:
   COLORED_PENCIL_SHADER( LPDIRECT3DDEVICE9 pd3dDevice, D3DPRESENT_PARAMETERS* pd3dParameters );
   ~COLORED_PENCIL_SHADER();
   void Invalidate();
   void Restore();
   HRESULT Load();

   //鉛筆調のシェーディングでレンダリングする
   void Step1Begin();
   void Step1BeginPass();
   void Step1SetAmbient( float Ambient );
   void Step1SetAmbient( D3DXVECTOR4* pAmbient );
   void Step1SetMatrix( D3DXMATRIX* pMatWorld, D3DXVECTOR4* pLightDir );
   void Step1EndPass();
   void Step1End();

   //キャンバスっぽい感じにするポストエフェクト
   void Step2Render();

   void CommitChanges();
   BOOL IsOK();
   LPD3DXEFFECT GetEffect(){ return m_pEffect; };
};

---ColoredPencilShader.cpp---


COLORED_PENCIL_SHADER::COLORED_PENCIL_SHADER( LPDIRECT3DDEVICE9 pd3dDevice, D3DPRESENT_PARAMETERS* pd3dParameters ) : D3D2DSQUARE( pd3dDevice, pd3dParameters )
{
   m_pd3dDevice = pd3dDevice;
   m_pEffect = NULL;
}

COLORED_PENCIL_SHADER::~COLORED_PENCIL_SHADER()
{
   SafeRelease( m_pEffect );
}

void COLORED_PENCIL_SHADER::Invalidate()
{
   if( m_pEffect )
      m_pEffect->OnLostDevice();
}

void COLORED_PENCIL_SHADER::Restore()
{
   if( m_pEffect )
      m_pEffect->OnResetDevice();
}

HRESULT COLORED_PENCIL_SHADER::Load()
{
   D3DCAPS9 caps;

   m_pd3dDevice->GetDeviceCaps( &caps );
   if( caps.VertexShaderVersion >= D3DVS_VERSION( 1, 1 ) && caps.PixelShaderVersion >= D3DPS_VERSION( 2, 0 ) )
   {
      HRESULT hr = D3D2DSQUARE::Load();
      if( FAILED( hr ) )
         return -1;

      LPD3DXBUFFER pErr = NULL;
      hr = D3DXCreateEffectFromFile( m_pd3dDevice, _T("ColoredPencilShader.fx"), NULL, NULL, 0, NULL, &m_pEffect, &pErr );
      if( SUCCEEDED( hr ) )
      {
         m_pTechnique = m_pEffect->GetTechniqueByName( "TShader" );
         m_pWVP = m_pEffect->GetParameterByName( NULL, "m_WVP" );
         m_pLightDir = m_pEffect->GetParameterByName( NULL, "m_LightDir" );
         m_pAmbient = m_pEffect->GetParameterByName( NULL, "m_Ambient" );

         m_pEffect->SetTechnique( m_pTechnique );   
      }

      else
      {
         return -2;
      }
   }

   else
   {
      return -3;
   }

   return S_OK;
}

void COLORED_PENCIL_SHADER::Step1Begin()
{
   if(  m_pEffect )
   {
      m_pd3dDevice->GetTransform( D3DTS_VIEW, &m_matView );
      m_pd3dDevice->GetTransform( D3DTS_PROJECTION, &m_matProj );
      m_pEffect->Begin( NULL, 0 );
   }
}

void COLORED_PENCIL_SHADER::Step1BeginPass()
{
   if( m_pEffect )
   {
      m_pEffect->BeginPass( 0 );
   }
}

void COLORED_PENCIL_SHADER::Step1SetAmbient( float Ambient )
{
   if( m_pEffect )
   {
      D3DXVECTOR4 A;
      A = D3DXVECTOR4( Ambient, Ambient, Ambient, 1.0f );
      m_pEffect->SetVector( m_pAmbient, &A );
   }

   else
   {
      D3DMATERIAL9 old_material;
      m_pd3dDevice->GetMaterial( &old_material );
      old_material.Ambient.r = Ambient;
      old_material.Ambient.g = Ambient;
      old_material.Ambient.b = Ambient;
      old_material.Ambient.a = 1.0f;
      m_pd3dDevice->SetMaterial( &old_material );
   }
}

void COLORED_PENCIL_SHADER::Step1SetAmbient( D3DXVECTOR4* pAmbient )
{
   if( m_pEffect )
      m_pEffect->SetVector( m_pAmbient, pAmbient );

   else
   {
      D3DMATERIAL9 old_material;
      m_pd3dDevice->GetMaterial( &old_material );
      old_material.Ambient.r = pAmbient->x;
      old_material.Ambient.g = pAmbient->y;
      old_material.Ambient.b = pAmbient->z;
      old_material.Ambient.a = pAmbient->w;
      m_pd3dDevice->SetMaterial( &old_material );
   }
}

//ローカル座標系
void COLORED_PENCIL_SHADER::Step1SetMatrix( D3DXMATRIX* pMatWorld, D3DXVECTOR4* pLightDir )
{
   if( m_pEffect )
   {
      D3DXMATRIX m, m1;
      D3DXVECTOR4 LightDir;
      D3DXVECTOR4 v;

      m = (*pMatWorld) * m_matView * m_matProj;
      m_pEffect->SetMatrix( m_pWVP, &m );

      //Light
      LightDir = *pLightDir;
      D3DXMatrixInverse( &m1, NULL, pMatWorld );
      D3DXVec4Transform( &v, &LightDir, &m1 );
      //XYZ成分について正規化する
      D3DXVec3Normalize( (D3DXVECTOR3*)&v, (D3DXVECTOR3*)&v );
      m_pEffect->SetVector( m_pLightDir, &v );
   }

   else
      m_pd3dDevice->SetTransform( D3DTS_WORLD, pMatWorld );
}

void COLORED_PENCIL_SHADER::Step1EndPass()
{
   if( m_pEffect )
   {
      m_pEffect->EndPass();
   }
}


void COLORED_PENCIL_SHADER::Step1End()
{
   if( m_pEffect )
   {
      m_pEffect->End();
   }
}

void COLORED_PENCIL_SHADER::Step2Render()
{
   if( m_pEffect )
   {
      m_pEffect->Begin( NULL, 0 );
      m_pEffect->BeginPass(1);

      D3D2DSQUARE::Render();

      m_pEffect->EndPass();
      m_pEffect->End();
   }
}


void COLORED_PENCIL_SHADER::CommitChanges()
{
   if( m_pEffect )
      m_pEffect->CommitChanges();
}

BOOL COLORED_PENCIL_SHADER::IsOK()
{
   if( m_pEffect )
      return TRUE;

   return FALSE;
}

色鉛筆画風シェーダークラスです。Step1～となっている関数はパス０つまり色鉛筆画風にモデルをレンダリングします。 Step2～となっている関数はパス１つまりキャンバスエフェクトを適応します。

---Main.cpp---


LPDIRECT3D9 m_pdirect3d9 = NULL;
LPDIRECT3DDEVICE9 m_pd3dDevice = NULL;
D3DPRESENT_PARAMETERS m_d3dParameters;

D3DCAPS9 Caps;

//シーンのメッシュ
//DirectX SDK(December 2004) に添付されているDXUTMesh.cppファイルにあるヘルパークラス群
CDXUTMesh* m_pMeshBack = NULL;

//2Dオブジェクト(表面化散乱(Subsurface Scattering) ページ参照)
D3D2DSQUARE* m_pSquObj = NULL;

//色鉛筆シェーダークラスの宣言
COLORED_PENCIL_SHADER* m_pColoredPencilShader = NULL;

//色鉛筆テクスチャー
LPDIRECT3DTEXTURE9 m_pColoredPencilTexture = NULL;

//シーンのレンダリングイメージ用サーフェイス
LPDIRECT3DTEXTURE9    m_pColorTexture = NULL;
LPDIRECT3DSURFACE9    m_pColorSurface = NULL;

//スクリーンの解像度
UINT nWidth = 1024;
UINT nHeight = 768;

//太陽の位置ベクトル
//光源の位置はカメラの視線方向にある
D3DXVECTOR4 LightPos = D3DXVECTOR4( 100.0f, 100.0f, -700.0f, 1.0f );

//平行光源の光の方向ベクトル
D3DXVECTOR4 LightDir;

//視点の位置ベクトル
D3DXVECTOR4 EyePos   = D3DXVECTOR4( 0.0f, 0.0f, 0.0f, 1.0f );

bool RenderOK = false;

int APIENTRY WinMain( HINSTANCE hInstance,
                      HINSTANCE /*hPrevInstance*/,
                      LPSTR     /*lpCmpLine*/,
                      INT       /*nCmdShow*/)
{  
   char* AppName = "Tutrial";

   MSG msg;
   ZeroMemory(&msg, sizeof(MSG));
   HWND hWnd = NULL;

   WNDCLASSEX wc;
   wc.cbSize      = sizeof(WNDCLASSEX);
   wc.style      = CS_VREDRAW | CS_HREDRAW;
   wc.lpfnWndProc   = (WNDPROC)WndProc;
   wc.cbClsExtra   = 0;
   wc.cbWndExtra   = sizeof(DWORD);
   wc.hCursor      = LoadCursor(NULL, IDC_ARROW);
   wc.hIcon      = NULL;
   wc.hIconSm      = NULL;
   wc.lpszMenuName    = NULL;
   wc.lpszClassName = AppName;
   wc.hbrBackground = (HBRUSH)GetStockObject( BLACK_BRUSH );
   wc.hInstance    = hInstance;
   RegisterClassEx(&wc);


   //****************************************************************
   //ここでウィンドウの作成処理
   //****************************************************************


   //****************************************************************
   //ここでDirect3Dの初期化を行う。
   //****************************************************************

   m_pd3dDevice->GetDeviceCaps(&Caps);

   //色鉛筆シェーダークラスの初期化
   m_pColoredPencilShader = new COLORED_PENCIL_SHADER( m_pd3dDevice, &m_d3dParameters );
   m_pColoredPencilShader->Load();

   //2Ｄオブジェクトのロード
   m_pSquObj = new D3D2DSQUARE( m_pd3dDevice, &m_d3dParameters );
   m_pSquObj->Load();

   //メッシュのロード
   //背景
   m_pMeshBack = new CDXUTMesh();
   m_pMeshBack->Create( m_pd3dDevice, _T("res\\back.x") );
   m_pMeshBack->SetFVF( m_pd3dDevice, D3DFVF_XYZ | D3DFVF_NORMAL | D3DFVF_TEX1 );

   //色鉛筆テクスチャーの初期化
   D3DXCreateTextureFromFileEx( m_pd3dDevice,
                                _T("res\\ColoredPencil.bmp"),    //ファイル名
                                D3DX_DEFAULT,                    //幅
                                D3DX_DEFAULT,                    //高さ
                                1,                               //ミップマップレベル
                                0,                               //テクスチャーの使用目的
                                D3DFMT_UNKNOWN,                  //フォーマット
                                D3DPOOL_MANAGED,                 //メモリ管理方法
                                D3DX_DEFAULT,                    //フィルタリング方法
                                D3DX_DEFAULT,                    //フィルタリング方法
                                0x0,                             //カラーキー
                                NULL,                            //ファイルの情報を格納する構造体
                                NULL,                            //256色パレットを示す構造体
                                &m_pColoredPencilTexture );      //IDirect3DTexture9 インターフェイス


   //平行光源の位置ベクトルから方向ベクトルを計算する
   LightDir = D3DXVECTOR4( -LightPos.x, -LightPos.y, -LightPos.z, 0.0f );
   D3DXVec3Normalize( (D3DXVECTOR3*)&LightDir, (D3DXVECTOR3*)&LightDir );

   RenderOK = true;

   //デバイス消失後にリストアする必要があるオブジェクトの初期化
   Restore();

   ::ShowWindow(hWnd, SW_SHOW);
   ::UpdateWindow(hWnd);

   do
   { 
      if( ::PeekMessage( &msg, 0, 0, 0, PM_REMOVE ) )
      {
         ::TranslateMessage(&msg); 
         ::DispatchMessage(&msg); 
      }
      else
      {
         if( MainLoop(hWnd) == FALSE )
            ::DestroyWindow( hWnd );
      }
   }while( msg.message != WM_QUIT );

   ::UnregisterClass( AppName, hInstance );

   return msg.wParam;
}

//デバイスのリセット前に開放すべきオブジェクト
void Invalidate()
{
   m_pColoredPencilShader->Invalidate();

   SafeRelease( m_pColorSurface );
   SafeRelease( m_pColorTexture );
}

//デバイスのリセット後に初期化すべきオブジェクト
void Restore()
{
   m_pColoredPencilShader->Restore();

   m_pd3dDevice->CreateTexture( nWidth,
                                nHeight,
                                1,
                                D3DUSAGE_RENDERTARGET,
                                D3DFMT_A8R8G8B8,
                                D3DPOOL_DEFAULT,
                                &m_pColorTexture,
                                NULL );
   m_pColorTexture->GetSurfaceLevel( 0, &m_pColorSurface );

   //固定機能パイプラインライティングを設定する
   D3DLIGHT9 Light;
   ZeroMemory(&Light, sizeof(D3DLIGHT9));
   Light.Type = D3DLIGHT_DIRECTIONAL;
   Light.Direction = D3DXVECTOR3( LightDir.x, LightDir.y, LightDir.z );
   Light.Ambient   = D3DXCOLOR( 1.0f, 1.0f, 1.0f, 1.0f );
   Light.Diffuse   = D3DXCOLOR( 1.0f, 1.0f, 1.0f, 1.0f );
   Light.Specular  = D3DXCOLOR( 0.0f, 0.0f, 0.0f, 0.0f );
   m_pd3dDevice->SetLight(0, &Light);
   m_pd3dDevice->LightEnable(0, TRUE);

   D3DMATERIAL9 Material;
   ZeroMemory( &Material, sizeof( Material ) );
   Material.Diffuse.r = 1.0f;
   Material.Diffuse.g = 1.0f;
   Material.Diffuse.b = 1.0f;
   Material.Diffuse.a = 1.0f;
   m_pd3dDevice->SetMaterial( &Material );
}

//メッセージループからコールされる関数
BOOL MainLoop( HWND HWnd )
{
   HRESULT hr;
   
   //レンダリング不可能
   if( RenderOK == false )
   {
      hr = m_pd3dDevice->TestCooperativeLevel();
      switch( hr )
      {
      //デバイスは消失しているがReset可能
      case D3DERR_DEVICENOTRESET:

         //開放
         Invalidate();

         //デバイスをリセットする
         hr = m_pd3dDevice->Reset( &m_d3dParameters );
         
         switch( hr )
         {
         //デバイスロスト
         case D3DERR_DEVICELOST:
            break;

         //内部ドライバーエラー
         case D3DERR_DRIVERINTERNALERROR:
            return FALSE;
            break;

         //メソッドの呼び出しが無効です
         case D3DERR_INVALIDCALL:
            return FALSE;
            break;

         case S_OK:

            //初期化
            Restore();

            RenderOK = true;
         }
         break;
      }
   }

   //レンダリング可能
   else
   {
      D3DXMATRIX matPProj, matView, matWorld;

      //遠近射影座標変換
      //クリップ面はアプリケーションごとに調整すること
      D3DXMatrixPerspectiveFovLH( &matPProj,
                                  D3DX_PI/4.0f,
                                  4.0f / 3.0f,
                                  30.0f,
                                  700.0f );
      m_pd3dDevice->SetTransform( D3DTS_PROJECTION, &matPProj );


      //ビュー座標変換
      D3DXMatrixIdentity( &matView );
      m_pd3dDevice->SetTransform( D3DTS_VIEW, &matView );

      m_pd3dDevice->SetSamplerState( 0, D3DSAMP_MINFILTER, D3DTEXF_LINEAR );
      m_pd3dDevice->SetSamplerState( 0, D3DSAMP_MAGFILTER, D3DTEXF_LINEAR );
      m_pd3dDevice->SetSamplerState( 0, D3DSAMP_MIPFILTER, D3DTEXF_NONE );
      m_pd3dDevice->SetSamplerState( 1, D3DSAMP_MINFILTER, D3DTEXF_LINEAR );
      m_pd3dDevice->SetSamplerState( 1, D3DSAMP_MAGFILTER, D3DTEXF_LINEAR );
      m_pd3dDevice->SetSamplerState( 1, D3DSAMP_MIPFILTER, D3DTEXF_NONE );

      m_pd3dDevice->BeginScene();

      //****************************************************************
      //ステップ１ : 色鉛筆画風にモデルをレンダリング
      //****************************************************************

      LPDIRECT3DSURFACE9 OldSurface = NULL;
      m_pd3dDevice->GetRenderTarget( 0, &OldSurface );
      m_pd3dDevice->SetRenderTarget( 0, m_pColorSurface );

      m_pd3dDevice->Clear( 0L,
                           NULL,
                           D3DCLEAR_TARGET | D3DCLEAR_ZBUFFER,
                           0x000f0fff,
                           1.0f,
                           0L
                         );

      //色鉛筆テクスチャー
      m_pd3dDevice->SetTexture( 1, m_pColoredPencilTexture );

      //背景レンダリング
      m_pColoredPencilShader->Step1Begin();
      D3DXMatrixIdentity( &matWorld );
      m_pColoredPencilShader->Step1SetMatrix( &matWorld, &LightDir );
      m_pd3dDevice->SetTexture( 0, m_pMeshBack->m_pTextures[0] );
      m_pColoredPencilShader->Step1SetAmbient( 0.2f );
      m_pColoredPencilShader->Step1BeginPass();
      
      //テーブルのつもり
      m_pMeshBack->m_pLocalMesh->DrawSubset( 0 );

      //グラスのつもり
      m_pd3dDevice->SetRenderState( D3DRS_CULLMODE, D3DCULL_NONE );
      m_pd3dDevice->SetTexture( 0, m_pMeshBack->m_pTextures[1] );
      m_pMeshBack->m_pLocalMesh->DrawSubset( 1 );
      m_pd3dDevice->SetRenderState( D3DRS_CULLMODE, D3DCULL_CCW );

      //かごのつもり
      m_pd3dDevice->SetTexture( 0, m_pMeshBack->m_pTextures[2] );
      m_pMeshBack->m_pLocalMesh->DrawSubset( 2 );

      //りんごのつもり
      m_pd3dDevice->SetTexture( 0, m_pMeshBack->m_pTextures[3] );
      m_pMeshBack->m_pLocalMesh->DrawSubset( 3 );

      //レモンのつもり
      m_pd3dDevice->SetTexture( 0, m_pMeshBack->m_pTextures[4] );
      m_pMeshBack->m_pLocalMesh->DrawSubset( 4 );

      //ぶどうのつもり
      m_pd3dDevice->SetTexture( 0, m_pMeshBack->m_pTextures[5] );
      m_pMeshBack->m_pLocalMesh->DrawSubset( 5 );

      m_pColoredPencilShader->Step1EndPass();
      m_pColoredPencilShader->Step1End();

      m_pd3dDevice->SetRenderTarget( 0, OldSurface );
      SafeRelease( OldSurface );

      //****************************************************************
      //ステップ２ : キャンバスの適応
      //****************************************************************

      m_pd3dDevice->SetRenderState( D3DRS_ZWRITEENABLE, FALSE );

      m_pd3dDevice->SetTexture( 0, m_pColorTexture );
      m_pColoredPencilShader->Step2Render();

      m_pd3dDevice->SetTexture( 1, NULL );

      m_pd3dDevice->SetRenderState( D3DRS_ZWRITEENABLE, TRUE );


      m_pd3dDevice->EndScene();

      hr = m_pd3dDevice->Present( NULL, NULL, NULL, NULL );
      
      //デバイスロストのチェック
      switch( hr )
      {
      //デバイスロスト
      case D3DERR_DEVICELOST:
         RenderOK = false;
         break;

      //内部ドライバーエラー
      case D3DERR_DRIVERINTERNALERROR:
         return FALSE;
         break;

      //メソッドの呼び出しが無効です
      case D3DERR_INVALIDCALL:
         return FALSE;
         break;
      }
   }

   return TRUE;
}

以上です。まあ作ったからアップしましたが、これって微妙だな。

Prev　　Top　　Next

■色鉛筆画風シェーダー	Prev　　Top　　Next
	関連ページ：なし