@nantcomGiffyHackMan
CoreSharp.net on Facebook

วาดภาพ 2D ด้วย Direct3D ด้วย Managed DirectX Mobile

Posted 25/10/2009 01:27 by nantcom

PIC091025004

สวัสดีครับ ช่วงนี้มีเรื่องให้เขียนเยอะเลยทีเดียว ต้องขอบคุณโปรเจค Twitter ของผมจริงๆ ครับ ที่ทำให้ผมมีข้ออ้างกับตัวเองในการอู้งาน ได้มาเล่น Direct3D อย่างที่อยากเล่นมานานได้เสียที เหตุผลก็เพื่อจะลองวาด UI ของโปรแกรมผมด้วย Direct3D ดูนั่นเองครับ ตอนนี้ละที่ผมเริ่มมีกิเลสอยากได้ Acer F1 (Neo Touch) ขึ้นมาแล้ว SnapDragon กันให้รู้แล้วรู้รอดไปเลย เหอๆ จะได้เห็นกันเลยว่า GPU Acceleration มันจะเทพขนาดไหน

แต่ก่อนกิเลสผมมันจะเลยเถิดไปกว่านั้น ลองมาดูหลักการและเหตุผล รวมไปถึงขั้นตอนในการใช้งาน Direct3D วาดภาพ 2D กันก่อนครับ

Direct3D…แต่ใช้ทำ 2D???

เรื่องของเรื่องก็คือ อย่างที่เราทราบกันแล้วนั่นเองครับ ว่า System.Drawing.Graphics บน Windows Phone ไม่รองรับ Alpha Blending แถมยังเป็น Software ล้วนๆ ไม่มี Hardware Acceleration เลยแม้แต่นิดเดียว ส่วนการทำงาน ก็จะต้องใช้การ PInvoke ไปเรียกคำสั่งของ Windows ให้มันทำให้ แต่จากการทดสอบคร่าวๆ ของผม ก็ยังติดที่เรื่อง Performance อยู่พอสมควรเลยทีเดียวละครับ

อันทีจริง API ที่เป็นการวาดภาพ 2D จริงๆ ของ Microsoft คือ DirectDraw ครับ แต่เราก็ติดอีก ตรงที่ Windows Phone ไม่มี API ของ DirectDraw แบบ Managed ให้ นั่นก็หมายถึงการ PInvoke กระหน่ำอีกแล้ว ผมเลยกลับมามองที่ MDX หรือ Managed DirectX แทน เพราะว่า Microsoft มี Managed API ให้เรียกใช้ได้โดยง่ายจาก C# อยู่ใน Assembly ชื่อ Microsoft.WindowsMobile.DirectX ครับ (แต่มีข่าวแว่วๆ มาว่า มันอาจจะ Obsolete ใน Windows Mobile 7 Sad)

แล้ว…จะทำได้ยังไง?

image แน่นอนว่า พอเราพูดถึง 3D เราก็มักจะนึกถึงภาพโพลีกอนในเกม แต่ถ้าเรามองย้อนมาดูจริงๆ โพลีกอน ก็คือภาพ 2D ชิ้นเล็กๆ ที่เรียงต่อกันจนเป็นพื้นผิว 3D ดังนั้น ถ้า API ที่แสดงภาพ 3D ได้ แล้วทำไม จะทำภาพ 2D ไม่ได้ละ?

จริงๆ ผมอยากจะพูดไปถึงเรื่องเบื้องหลังด้วย แต่เดี๋ยวจะยาวเกินไป ผมเกริ่นให้แล้วกันว่า องค์ประกอบที่เล็กที่สุดของโพลีกอน หรือ Mesh คือ สามเหลี่ยม (Triangle) ซึ่งก็คือที่มาของตัวเลข Million Triangle Per Second ของการ์ดจอ ที่เป็นตัววัดความเร็วว่า ถ้าในจอมีโพลีกอนเท่ากัน ใครจะได้ FPS สูงกว่า แต่เดี๋ยวนี้เราลืมๆ มันไปแล้ว เพราะเราไปเน้นที่ Pixel/Vertex Shader มากกว่า

ดังนั้น ถ้าเราจะวาดภาพ 2D ซึ่งส่วนมาก มันก็คือสี่เหลี่ยม เราก็เลยใช้สามเหลี่ยมสองรูปมาต่อกัน เรียกว่า Quad ครับ แล้วก็ใช้การกำหนด Texture Coordinate (Tu, Tv) นิดหน่อย เราก็จะได้ภาพโพลีกอนสีเหลี่ยม ที่เอาภาพ Texture แปะลงไปได้ดังตัวอย่างด้านบนนั่นเอง

เอาละครับ พอจะเก็ทบ้างนิดๆ แล้วใช่หรือเปล่า มาเริ่มกันที่โค๊ดต่อเลยดีกว่า

เริ่มงาน!

แต่ก่อนที่เราจะไปถึงการวาดกันได้ เราต้องเริ่มใช้ Direct3D ให้เป็นก่อนครับ มาดูกันเลย (เนื่องจาก DirectX แต่ละรุ่น ต่างกัน ผมแนะนำให้ใช้ WM6.5 Emulator นะครับ เพราะผมทดสอบโค๊ดพวกนี้กับ 6.5 เท่านั้น)

  1. ขั้นแรก Add Reference Microsoft.WindowsMobile.DirectX มาก่อนครับ
    image
  2. แล้วก็ทำการ Using มันด้วย

    1. using Microsoft.WindowsMobile.DirectX;
    2. using Microsoft.WindowsMobile.DirectX.Direct3D;

  3. จากนั้น เราจะต้องทำการ Initialize ระบบ DirectX ก่อน ให้สร้าง Function ชื่อ InitializeGraphics ขึ้นมา แบบนี้ (อย่าลืมประกาศตัวแปรชนิด Device ไว้ในคลาสด้วยละครับ)

    1. private Device device;
    2. public void InitializeGraphics()
    3. {
    4.     PresentParameters pres = new PresentParameters();
    5.     pres.Windowed = true;
    6.     pres.SwapEffect = SwapEffect.Discard;
    7.  
    8.     device = new Device(0, DeviceType.Default,
    9.             this, CreateFlags.None, pres);
    10. }

  4. จากนั้น ทำการ Override Method OnPaintBackground และ OnPaint เพื่อเปลี่ยนเป็นการวาดด้วย Direct3D แทน
    1. protected override void OnPaintBackground(PaintEventArgs e)
    2. {
    3.     // Do nothing
    4. }
    5.  
    6. protected override void OnPaint(PaintEventArgs e)
    7. {
    8.     // Sets the surface to black everywhere
    9.     device.Clear(ClearFlags.Target, Color.Black, 1.0F, 0);
    10.     device.BeginScene();
    11.  
    12.     // Drawing Code Goes Here
    13.  
    14.     device.EndScene();
    15.     device.Present();
    16. }


    จะเห็นว่า การวาดนั้น เริ่มจากการ Clear พื้นด้วยสีดำก่อน (ไม่ต้องห่วงครับ ไม่มีการ Flicker เนื่องจากเป็น Double Buffering) แล้วจึงสั่ง Begin Scene เพื่อบอกว่า เราจะเริ่มวาด แล้วจบด้วยการ EndScene และ Present ซึ่งก็คือการ Flip Buffer เอาภาพจาก BackBuffer ที่เราวาดอยู่ ไปแสดงบน Front Buffer หรือหน้าจอนั่นเอง

  5. จากนั้น เราจะต้องไปแก้ไฟล์ Program.cs นิดหน่อย ดังนี้
    1. /// <summary>
    2. /// The main entry point for the application.
    3. /// </summary>
    4. [MTAThread]
    5. static void Main()
    6. {
    7.     MdxForm mdx = new MdxForm();
    8.     mdx.InitializeGraphics();
    9.     mdx.Show();
    10.     Application.Run(mdx);
    11. }


    นั่นก็คือ เราจะสั่ง InitializeGraphics เพิ่มเข้าไปด้วย แล้วจึงค่อยปล่อยให้ Application.Run จัดการต่อ ทางที่ดีก็คือ ควรจะมีฟังก์ชั่น DisposeGraphics ด้วย เอาไว้คาย Resource คืนระบบ ก่อนออกจาก Main()

  6. จากนั้น ถ้าทดลองรันดู ก็จะได้หน้าจอสีดำๆ แบบนี้ ที่ Render ด้วย DirectX เรียบร้อย จะลองเปลี่ยนเป็นสีอื่นดูก็ได้นะครับ

    image image

โอว เยี่ยม แล้วถ้าจะวาดภาพล่ะ

หลังจากเราได้โครงมาแล้ว คราวนี้เราจะต้องสร้าง Quad และส่วนประกอบอีกมากมายจิปาถะขึ้นมาครับ ผมจะบอกเป็นข้อๆ นะครับ เริ่มจาก Quad ก่อนเลย

Quad (Polygon)

การจะวาดโพลีกอนบน Direct3D เราจะต้องมี Vertex Buffer ครับ สำหรับผู้ที่สงสัยว่าอะไรคือ Vertex มันคือ จุด ที่อยู่บนมุมของสามเหลี่ยมครับ จริงๆ พูดให้ถูกคือ มันคือผู้กำหนดว่า สามเหลี่ยมจะออกมาหน้าตาเป็นอย่างไรมากกว่า เพราะ GPU จะสร้างพื้นผิว โดยค่อยๆ ไล่ดูจากจุดทั้งสามนี้ครับ

Vertex Buffer ที่เราจะสร้าง เราจะสร้างทั้งหมด 4 จุดครับ (อ้าว) เมื่อกี้ผมเพิ่งบอกหยกๆ ว่าใช้สามเหลี่ยม 2 รูป ทำไมมีสี่จุดได้ นั่นก็เพราะเราจะใช้โพลีกอนแบบ Triangle Fan ครับ สำหรับโค๊ดสร้าง Triangle Fan ที่จะออกมาได้ Quad ของเรา มีดังนี้

  1. private VertexBuffer quad;
  2. private void CreateQuad()
  3. {
  4.     this.quad = new VertexBuffer(
  5.             typeof(CustomVertex.PositionTextured), // What type
  6.             4,                                    // How many
  7.             device,                               // The device
  8.             0,                                    // Default usage
  9.             CustomVertex.PositionTextured.Format,  // Vertex format
  10.             Pool.SystemMemory);
  11.  
  12.     CustomVertex.PositionTextured[] vertices =
  13.             (CustomVertex.PositionTextured[])this.quad.Lock(0, 0);
  14.  
  15.     vertices[0].X = 0.0f;
  16.     vertices[0].Y = 0.0f;
  17.     vertices[0].Z = 1.0f;
  18.     vertices[0].Tu = 0.0f;
  19.     vertices[0].Tv = 0.0f;
  20.  
  21.     vertices[1].X = 1.0f;
  22.     vertices[1].Y = 0.0f;
  23.     vertices[1].Z = 1.0f;
  24.     vertices[1].Tu = 1.0f;
  25.     vertices[1].Tv = 0.0f;
  26.  
  27.     vertices[2].X = 1.0f;
  28.     vertices[2].Y = -1.0f;
  29.     vertices[2].Z = 1.0f;
  30.     vertices[2].Tu = 1.0f;
  31.     vertices[2].Tv = 1.0f;
  32.  
  33.     vertices[3].X = 0.0f;
  34.     vertices[3].Y = -1.0f;
  35.     vertices[3].Z = 1.0f;
  36.     vertices[3].Tu = 0.0f;
  37.     vertices[3].Tv = 1.0f;
  38.  
  39.     this.quad.Unlock();
  40. }

สังเกตว่า เรากำหนดให้ Z เป็น 1 ทั้งหมด และเราสร้างภาพสี่เหลี่ยมที่มีขนาด 1 Unit พอดี ส่วน Tu และ Tv นั้น คือ Coordinate ของ Texture ครับ โดย 0,0 หมายถึง มุมบนซ้ายของภาพ Texture และ 1,1 หมายถึง มุมล่างขวาของ Texture

อย่าลืมเพิ่ม CreateQuad() ในฟังก์ชั่น InitializeGraphics ละครับ

Projection, World, View

ทีนี้ ก่อนที่เราจะวาดภาพได้ เราก็จะต้องตั้งค่าการมองของ Direct3D เสียก่อน เนื่องจากว่า เราจะเอาแค่ระนาบ 2 มิติ จึงไม่ต้องมีการกำหนด View Matrix ซึ่งก็คือมุมกล้อง แต่ถ้าจะให้ภาพออกมาเป็นสองมิติแบบไม่เพี้ยนนั้น Projection จะต้องเป็น Orthographic projection ครับ (อ้างอิงจาก http://www.gamedev.net/reference/articles/article1972.asp) ส่วน World Matrix นั้น ตอนนี้ยังไม่ต้องทำอะไรกับมัน เนื่องจากเรายังไม่ได้วาดภาพออกมา เพิ่มโค๊ดพวกนี้ลงไปใน InitializeGraphics ได้เลยครับ

  1. device.Transform.Projection = Matrix.OrthoLH(this.Width, this.Height, 1f, 10f);
  2. device.Transform.World = Matrix.Identity;
  3. device.Transform.View = Matrix.Identity;

Rendering Stage

ในการทำงานของ GPU แบบที่อยู่ใน Windows Phone นั้น เราจะเป็นการสั่งให้มันทำงานเป็นชุดๆ ไป ไม่สามารถโปรแกรมมันด้วย Pixel/Vertex Shader ได้ เฃ่น ถ้าเราอยากจะทำ Alpha Blending เราก็จะต้องเลือก Stage ให้เป็น Alpha Blending แล้วจึงค่อยวาดภาพ (Render) ลงไป ในขณะที่ GPU ปัจจุบัน อยากจะให้แต่ละ Pixel ออกมาเป็นสีอะไร เราก็จะเขียนโปรแกรมคำนวณแบบ Per Pixel กันเลย

สำหรับงานที่เราต้องการ ก็คือการเปิด Alpha Blending เพื่อให้ Texture มันใสได้ครับ ก็ทำได้โดยการใช้โค๊ดดังนี้ใน InitializeGraphics

  1. device.RenderState.CullMode = Cull.None;
  2. device.RenderState.Lighting = false;
  3. device.RenderState.AlphaBlendEnable = true;
  4. device.RenderState.SourceBlend = Blend.SourceAlpha;
  5. device.RenderState.DestinationBlend = Blend.InvSourceAlpha;
  6.  
  7. device.TextureState[0].AlphaOperation = TextureOperation.Modulate;

Texture และ StreamSource

ตอนนี้ เราก็มาถึงขั้นตอนสุดท้าย ก่อนจะเริ่มลงมือ Render กันแล้ว ก็คือการโหลด Texture ซึ่งผมเลือกที่จะกำหนดทุกอย่างเองหมด (จริงๆ จบแค่ชื่อไฟล์ก็ได้) แต่เหมือนว่า กำหนดแบบนี้ ชัวร์กว่าครับ และขั้นสุดท้าย ก็คือการตั้งค่าว่า เวลาที่ GPU Render จะให้เอา Triangle มาจากไหน แน่นอนว่า มันก็คือ VertexBuffer ที่ชื่อ quad ของเรานั่นเอง ใส่โค๊ดนี้เพิ่มใน InitializeGraphics ครับ

  1. tex = TextureLoader.FromFile(device, Program.Path + "\\beat_brick.png", 96, 96, 1, Usage.Texture, Format.A8R8G8B8, Pool.SystemMemory, Filter.Linear, Filter.None, 0);
  2. device.SetStreamSource(0, quad, 0);

เรนเดอร์!!!!

เอาละ คราวนี้ก็ถึงตอน Render แล้ว ก่อนเราจะ Render ได้ เราจะต้องคำนวณ Transformation Matrix เพื่อปรับขนาดของ Quad ของเราให้ตรงตามต้องการก่อน (มันถึงมีขนาด 1x1 ไงละ!!!) ซึ่งการคำนวณ Matrix นี้ DirectX เขาก็มีให้แล้ว เราก็แค่สร้าง Matrix ที่เราต้องการ แล้วเอามาคูณกันเท่านั้นเอง ซึ่งเราจะใช้ Matrix 3 ตัว ได้แก่

  • Scale เอาไว้ปรับขนาด
  • Translate เอาไว้ขยับ
  • Rotate เอาไว้หมุน ซึ่งแกนที่เราหมุนคือ แกน Z หรือแกนที่ยิงจากด้านหลังจอมาใส่คนมอง เพราะ X, Y มันก็คือ Left/Top ของจอ

สำหรับ Matrix ที่คำนวณแล้ว ก็เอาไป Set เป็น World Transform เพื่อให้เกิดการ Transform เวลาที่วาด Quad ลงไปครับ สำหรับการวาด Quad นั้นก็ง่ายมาก เราเพียงแค่ทำการ SetTexture แล้วสั่ง DrawPrimitives เท่านั้นเอง และถ้าเราอยากวาดภาพอื่นๆ เราก็ไม่จำเป็นต้องใช้ Quad อันอื่น เราก็ใช้อันนี้ละครับ วาดได้เลย ผมเลยสร้างเป็น Function ขึ้นมาครับ (สำหรับ sz คือ ขนาดของหน้าจอ) อย่าลืมว่า เรากำลังเล่นแบบ Immediate Mode คือการวาดภาพ 3D ลง Buffer โดยตรง เราไม่ได้จำโพลีกอนเอาไว้ หรือจำเอาไว้ว่ามันคือภาพเหมือนเวลาเราทำงานกับ Win Form ครับ มันเหมือนเป็นแค่แปรงระบายสีเท่านั้นเอง

  1.  
  2. public void Render(Device device, Texture texture, Size sz, RectangleF rDest, float? rotate )
  3. {
  4.     float X;
  5.     float Y;
  6.     Matrix matTranslation;
  7.     Matrix matScaling;
  8.     Matrix matTransform;
  9.  
  10.     //Get coordinates
  11.     X = rDest.Left - (float)(sz.Width) / 2;
  12.     Y = -rDest.Top + (float)(sz.Height) / 2;
  13.  
  14.     //Setup translation and scaling matrices
  15.     matScaling = Matrix.Scaling(rDest.Width, rDest.Height, 1.0f);
  16.     matTranslation = Matrix.Translation(X, Y, 0.0f);
  17.     matTransform = matScaling * matTranslation;
  18.  
  19.     //Check if quad is rotated
  20.     if (rotate.HasValue)
  21.     {
  22.         //Create rotation matrix about the z-axis
  23.         //Multiply matrices together
  24.         matTransform *= Matrix.RotationZ( rotate.Value );
  25.     }
  26.  
  27.     //Draw the quad
  28.     device.Transform.World = matTransform;
  29.     device.SetTexture(0, texture);
  30.     device.DrawPrimitives(PrimitiveType.TriangleFan, 0, 2);
  31. }

องศาที่กำหนดด้วยตัวแปร rotation ต้องใช้เป็นเรเดียนนะครับ ถ้าจะแปลงจากองศาเป็นเรเดียน ใช้ 0.0174532925F ได้ครับ (คูณ เร็วกว่าหาร)

ถ้าลองสั่ง Render ใน OnPaint ก็จะได้ผลลัพทธ์ ตามภาพด้านล่างนี้ครับ

  1. protected override void OnPaint(PaintEventArgs e)
  2. {
  3.     // Sets the surface to black everywhere
  4.     device.Clear(ClearFlags.Target, Color.PowderBlue, 1.0F, 0);
  5.     device.BeginScene();
  6.  
  7.     // Drawing Code Goes Here
  8.     this.Render(device, tex, this.Size, new RectangleF(0, 0, 96, 96), 0.1f);
  9.  
  10.     device.EndScene();
  11.     device.Present();
  12. }

image

ถ้าเกิดรันแล้วมีปัญหา ลองเช็คดูว่า โค๊ด InitializeGraphics นั้นถูกต้องหรือเปล่า ของผมเป็นแบบนี้

  1. private Device device;
  2. private Texture tex;
  3. public void InitializeGraphics()
  4. {
  5.     PresentParameters pres = new PresentParameters();
  6.     pres.Windowed = true;
  7.     pres.SwapEffect = SwapEffect.Discard;
  8.  
  9.     device = new Device(0, DeviceType.Default,
  10.             this, CreateFlags.None, pres);
  11.  
  12.     device.Transform.Projection = Matrix.OrthoLH(this.Width, this.Height, 1f, 10f);
  13.     device.Transform.World = Matrix.Identity;
  14.     device.Transform.View = Matrix.Identity;
  15.  
  16.     device.RenderState.CullMode = Cull.None;
  17.     device.RenderState.Lighting = false;
  18.     device.RenderState.AlphaBlendEnable = true;
  19.     device.RenderState.SourceBlend = Blend.SourceAlpha;
  20.     device.RenderState.DestinationBlend = Blend.InvSourceAlpha;
  21.  
  22.     device.TextureState[0].AlphaOperation = TextureOperation.Modulate;
  23.  
  24.     this.CreateQuad();
  25.  
  26.     tex = TextureLoader.FromFile(device, Program.Path + "\\beat_brick.png", 96, 96, 1, Usage.Texture, Format.A8R8G8B8, Pool.SystemMemory, Filter.Linear, Filter.None, 0);
  27.     device.SetStreamSource(0, quad, 0);
  28. }

TIPS

  • ถ้าอยากให้มันเรนเดอร์ไปเรื่อยๆ เหมือนเกม ให้เพิ่มว่า this.Invalidate() เป็นบรรทัดสุดท้าย และ Application.DoEvents() เป็นบรรทัดแรก ใน OnPaint จะทำให้จับ Event ได้ และภาพมันก็รันไปเรื่อยๆ ใช้ทำเกมได้ครับ
  • อย่าใช้คลาส Sprite มันช้ากว่าราว 10 เท่าได้
  • การคำนวณ FPS สามารถทำได้โดยการคำนวณผลต่างระหว่าง Environment.TicksCount สองครั้ง คือ ก่อน และหลัง Render จากนั้น เอาไปส่วน 1000 (1000d / (After – Before))

เอาละครับ วันนี้คงพอแค่นี้ก่อน ขอให้สนุกนะครับ! Smile

Published Oct 25 2009, 01:27 AM by nantcom

ร่วมให้กำลังใจนักเขียน

อ่านแล้วชอบใจ อยากให้กำลังใจกับผู้แต่งบทความนี้ ขอเชิญร่วมให้กำลังใจผ่าน Paysbuy/Paypal นะครับ ปลอดภัยเพราะทำงานผ่าน SSL และไม่มีค่าใช้จ่ายเพิ่มเติมครับ เว็บเราให้นักเขียน 100% ครับ

Comment ระบบเก่า

 

varavut said:

Program.Path

ตัวแปร Path นี่ต้องประกาศเองใช่ไหมครับ

December 25, 2009 8:08 PM
 

nantcom said:

ใช่แล้วครับ :)

December 25, 2009 11:06 PM
 

ning said:

direct  3d

April 2, 2010 10:35 AM
(required)  
(optional)
(required)  
Add

DisQUS Comment (ยังเอ๋อๆ อยู่)

blog comments powered by Disqus