Tight Mesh ศัตรูของมวลมนุษย์??

ได้นั่งไล่ดูทั้งโปรเจคด้วยเรื่อง texture ต่างๆ เรื่อง draw call ฯลฯ ทำให้เกมลื่นขึ้นพอสมควร และหนึ่งใน optimization ที่ผมทำคือใช้ Full Rect แทน Tight ในการวาด sprite

เมื่อสัปดาห์ก่อนผมอัพเดทเกม Duel Otters ครั้งใหญ่ต้อนรับ iOS 11 ที่จะไม่มีใครเห็นผลเลย เพราะเปลี่ยนแต่ระบบข้างในหมด ระบบไฟล์เซฟเป็น protobuf, ระบบ backend ย้ายจาก AWS มา Firebase, Unity อัพจาก 5.6 เป็น 2017.1 ฯลฯ แล้วก็แก้โค้ดให้ใช้ส่วนใหญ่ๆด้วยกันกับเกม Mel Cadence อีกเกมที่ทำอยู่ได้ จะได้ทำสองเกมพร้อมๆกันได้ แก้บัคหายพร้อมๆกัน

Mesh Type คือ?

ตรง import settings ของ Sprite จะมีให้ปรับ Tight กับ Full Rect ซึ่ง default จะเป็น Tight Mesh

จะรู้ว่าความต่างคืออะไรก่อนอื่นเปิดโหมด Wireframe นี้ก่อนครับ

อันนี้ Tight

อันนี้ Full Rect

จะเห็นว่าตรงกล่อง Statistics ด้าน Tight มีจำนวน Tris : 740 ส่วน Full Rect มี Tris : 156

จะเห็นว่า Tight พยายามจะเสก mesh ให้แคบที่สุดที่จะล้อมรอบภาพได้พอดีตาม alpha รอบๆมัน ส่วน Full Rect จะแค่เอาสี่เหลี่ยมครอบไปเลย (ก็คือเสียภาพละ 4 vertexes หรือก็คือ 2 tris)

จะเห็นว่าตรงใบบัวมันเป็นภาพโค้งเยอะ ดูข้างซ้ายหน้าต่าง Wireframe ผลที่ได้ดูไม่ค่อยฉลาดเท่าไหร่

ปรับแค่นี้ทั้งเกมก็ลดจำนวน vertex ได้เป็นเบือแล้ว! ดีมั้ย!

ไปไล่ดูโปรเจค ลองเปิดโหมด Wireframe แล้วซูมออกมากว้างๆจะเห็นชัดว่าเป็น Full Rect ทั้งฉากรึยัง อย่างแบบนี้ก็เป็นแล้ว ดูไปตรงไหนก็เห็นสี่เหลี่ยมโปร่งๆ

ตอนไหนควรใช้ Full Rect

จริงๆแล้วจำนวน tris น้อยกว่ามันก็ดีกว่าอยู่แล้วแหละครับ แต่ยังมีอีกอย่างนึง ที่เป็นจุดประสงค์ของ Tight คือ “Overdraw”

เวลาเครื่องจะวาดรูปเนี่ยคือมันจะรับ vertex 3 จุดเป็นรูป 3 เหลี่ยมเข้าไปทีละอันแล้วก็พยายามวาด pixel ในนั้นว่ามีสีอะไรบ้าง เท่ากับว่า Full Rect อาจจะแย่กว่า Tight ถ้ามันทำให้เครื่องต้องวาด pixel ว่างเปล่าเยอะๆนั่นเองครับ

เราสามารถ debug overdraw ได้โดยเปิดโหมด Overdraw ข้างล่างนี้คือ Tight

ส่วนอันนี้ Full Rect

สีส้มสว่างกว่า แปลว่าจุดนั้นๆเกิดการวาดทับกันหลายรอบกว่า (ถ้า best case คือทั้งฉากเป็นสีส้มเนื้อเดียวกันหมด แบบวาดครั้งเดียวเสร็จ แต่แบบนั้นมันคงไม่ใช่เกมแต่เป็นแอพดูภาพมากกว่า 555)

จะเห็นว่า Tight ตามภาพตึกอะไรงี้สี่เหลี่ยมมันไม่คม แต่มันพยายามโค้งไปตามรูปจริงๆ เราก็จะประหยัดการวาดตรงใสๆนิดนึงที่มันโค้งหลบได้นั่นแหละ (นิดจริงๆ)

กรณีนี้ Tight ไม่ค่อยจะดีเท่าไหร่ เพราะว่าภาพแต่ละภาพพยายามทำให้ fit ในกรอบสี่เหลี่ยมได้ตั้งแต่แรกแล้ว แบบนี้ปรับ Full Rect ดีกว่า ดูจากภาพข้างล่างนี้ อันที่จะประหยัด overdraw ได้มากสุดก็จะเป็นอะไรที่ทรงกลม หรือหลังคาบ้านที่เป็นทรงคางหมู ถ้ารูปที่ว่าวาดเยอะๆอาจจะคิดใหม่ แต่นี่มีนิดเดียว เอาลดจำนวน tris ดีกว่า

แต่ถ้าเกมมีภาพแปลกๆ เช่นดาบที่เผลอวางเป็นแนวเฉียง (จริงๆควรกลับไปแก้ให้มันตรงแล้วค่อยมาเฉียงในเกม…) ก็อาจน่าใช้ Tight ครับ

GPU vs CPU

จริงๆแล้ว overdraw vs. tris count เป็นปัญหา GPU แลกกับ CPU ครับ การรับคำสั่งวาดรูปถ้ามีจำนวน tris เยอะๆก็จะเหนื่อยที่ CPU กว่าจะวาดได้ frame นึงต้องดู vertex กี่ครั้ง แต่พอจะวาดจริง ถ้าต้องวาด pixel ใสๆเยอะจะเสียเวลาที่ GPU

ดังนั้น ถ้าเกมเครื่องคอมแรงๆ ถ้าคิดว่า CPU เหลือเฟือแต่อยากประหยัด GPU ให้ได้มากที่สุดก็ใช้ Tight น่าจะดีกว่า หรือแม้แต่เกมมือถือถ้าคิดว่าอยากเก็บ GPU ไว้วาดอะไรโหดๆ ในจังหวะนั้นๆมากกว่า Tight อาจจะดีกว่า Full Rect

ทั้งนี้ถ้าจุดประสงค์อยากทำให้เกมลื่นขึ้น แนะนำให้เปิด Frame Debugger แล้วไปพยายามลด Draw Call (SetPass Call) ก่อนมาปรับตรงจุดนี้ จะเห็นผลชัดกว่าครับ ดูที่หน้าต่าง Statistics อย่างเกมสีเขียวอันแรกผม optimize เหลือ 5 ได้ ส่วนเกมสีม่วงมีประมาณ 10–15 ซึ่งถ้าเกิน 10 นี่ถือว่าค่อนข้างแย่แล้วสำหรับมือถือ