Guilty Gear Xrd part 1 - Model, Shading, Lighting

ทันทีที่ trailer Guilty Gear Xrd ออกมาให้ชมกัน Toon shade ของเกมนี้ก็กลายเป็นที่ฮือฮากันทันทีในเวบบอร์ด 3D หลายๆ แห่ง



ตัวเกมออกวางให้เล่นตามอาเขตตั้งแต่เดือนกุมภาพันธ์แล้ว จนมาถึงวันที่ 26 กรกฎาคม เวบ 4Gamer จึงได้ตีแผ่บทความของ Zenji Nishikawa ซึ่งมีเกร็ดน่าสนใจมากมายทีเดียว เนื้อหาใกล้เคียงกับที่ลงในนิตยสาร CGWorld แต่ Zenji กล่าวว่าไม่มีความเกี่ยวข้องกัน

บทความต้นฉบับ - http://www.4gamer.net/games/216/G021678/20140703095/
กระทู้ polycount ที่ถกกันเรื่องนี้ - http://www.polycount.com/forum/showthread.php?t=121144
PDF บทความใน CGWorld (ภาษาญี่ปุ่น) - https://dl.dropboxusercontent.com/u/2851501/CGW_GG.rar

ทริกที่ทีมพัฒนานำมาใช้เพื่อให้ภาพที่ได้ เหมือน 2D ที่สุดนั้น น่าทึ่งจริงๆ ครับ Physical ถือเป็นเรื่องรองไปเลย เรามาดูกันว่าเขาทำอะไรบ้าง

หากใครคล่องภาษาญี่ปุ่นและพบข้อผิดพลาดตรงไหนก็รบกวนช่วยแจ้งด้วยนะครับ

ผู้พัฒนาเลือกใช้ Unreal Engine 3 เพราะขณะนั้นมีราคาถูกมาก (ลดราคาเพราะ Unreal Engine 4 เพิ่งเปิดตัว) โดยมองที่ความเสถียร การซัพพอร์ต และการ export ไปลงเครื่องคอนโซลได้ง่าย

ทีมงานมองว่าการเขียนเอนจิ้นเองนั้นใช้เวลามากเกินไป (พวกเขาเคยลองแล้วตอนสร้างเกม GG Overture แต่ได้ผลไม่น่าพอใจ)  พวกเขามีโปรแกรมเมอร์เพียงไม่กี่คนเท่านั้น การที่สามารถใช้ script สั้นๆ ได้จึงมีข้อดีมากเพราะศิลปินเองก็พอจะปรับเปลี่ยนหลายๆ อย่างในตัวเกมได้เองโดยตรง  ทางทีมจึงทำการแปลงระบบพื้นฐานและเครื่องมือต่างๆ ที่เคยทำไว้แล้วให้สามารถใช้ในเอนจิ้นได้ด้วย

นอกจากนี้ทางทีมงานยังสร้าง Shader ให้ตรงกัน ทั้งใน Softimage และ Unreal Engine เพื่อให้ศิลปินสามารถดูผลได้ใน Softimage โดยตรง

Shader ใน Softimage

ทีมงานในขณะนั้นมีกัน 25 คน เป็นโปรแกรมเมอร์ 4 คน, เกมแพลนเนอร์ 3 คน และศิลปิน 12 คน นอกนั้นจะเป็น out source ซึ่งมีจำนวนราวร้อยคน

เกมเริ่มทำคอนเซปต์เมื่อปี  2008 และเริ่มโปรดักชั่นในปี 2011 พวกเขาลองสร้างแอนิเมชันสั้นๆ ขึ้นมาเป็นต้นแบบ ซึ่งช่วยให้พวกเขามั่นใจว่าจะทำเกมเป็น 3D ได้แน่ และนำไปสู่ขั้นโปรดักชันเต็มตัวเมื่อกลางปี 2012 จนเสร็จสิ้นเมื่อปลายปี 2013

ต้นฉบับทดลอง

อันที่จริงพวกเขาเคยลองทำ 3D มาตั้งแต่ปี 2007 แล้ว แต่ในขณะนั้นยังไม่ได้ผลที่น่าพึงพอใจ อีกทั้ง resolution ที่ค่อนข้างต่ำของหน้าจอ Arcade ทำให้พวกเขามองว่า 2D sprite แบบเดิมๆ ยังเป็นตัวเลือกที่ดีกว่า ต่างกับเกมเวอร์ชั่นล่าสด Xrd ซึ่งมีการแสดงผลได้ถึง 1280x720 สำหรับอาเขต และสูงถึง 1080p สำหรับ PS4

ทีมงานเลือกใช้ FXAA สำหรับ anti-alias และมี budget สำหรับ polygon ราว 8 แสน, 5 แสนสำหรับฉาก และ 2.5 แสนสำหรับตัวละคร ซึ่งอันที่จริง ตัวละครแต่ละตัวจะใช้ราว 4 หมื่นเท่านั้น จึงมีเหลือสำรองไว้สำหรับข้าวของต่างๆ ได้พอสมควร

โมเดลมีการสลับหัวสำหรับระยะใกล้-ไกล แต่ไม่ใช่ LoD นะครับเพราะ poly count ไม่ได้น้อยลงในระยะไกลเลย พวกเขาสลับหัวเพื่อเน้นบางส่วนให้โดดเด่นและเห็นได้ง่ายขึ้นในระยะไกล เช่น ทำผมให้หนาขึ้น ทำดวงตาให้ใหญ่ขึ้น เป็นต้น

ตัวอย่างด้านล่างคือ Milia ซ้ายคือใบหน้าในระยะใกล้ และขวาคือระยะไกล

Milia สลับโมเดลส่วนหัวสำหรับระยะต่างๆ

ใบหน้าของตัวละครมี bone หลายจุดมาก (ตั้งแต่ 170 จุดขึ้นไป)เพื่อให้สามารถจัดหน้าได้เหมือน 2D อย่างไม่มีขีดจำกัด สามารถบิดจมูก ย้ายปาก ฯลฯ สุดแต่เราต้องการ คุณสมบัติดังกล่าวรวมไปถึงลำตัว ผม เสื้อผ้า ด้วย เพื่อให้สามารถจัดท่าได้เหมือน 2D แทบทุกกระเบียดนิ้ว รวมแล้วบางตัวมี bone ถึง 600 กว่าจุดทีเดียว

ออ เสื้อผ้าเกมนี้ไม่มีซิมนะครับ แอนิเมตมือล้วนๆ ทุกอย่าง

 

การเรนเดอร์นั้นจะแบ่งออกเป็น 4 pass ได้แค่ Z, สี, เส้น, และสุดท้ายเป็นตัวโมเดล มี Texture ของฉากราว 160Mb มี shader ราว 60-70 shader ซึ่งสร้างใน Unreal Engine ทั้งหมด

อย่างที่กล่าวข้างต้นว่าความถูกต้องไม่ใช่สิ่งที่เกมนี้ต้องการ
- แสงเงาของฉากหลังเป็น paint ทั้งหมด

- มีแสง 1 ดวงที่มีหน้าที่ทอดเงาตัวละครลงพื้นเท่านั้น
- ตัวละครแต่ละตัวจะมีไฟประจำตัวอีกดวงนึง ทำหน้าที่กำหนดทิศทางแสง เพื่อให้ได้ส่วนมืดที่ถูกต้องดูดีที่สุดโดยไม่สนทิศทางแสงของฉากหลัง ไฟดวงนี้จะ animate เฟรมต่อเฟรมเพื่อให้ได้แสงที่สวยในทุกอิริยาบท
- ตัวละครจะไม่มีการทอดเงาลงบนตัวเอง แสงเงาที่เห็นเกิดจากฟอร์มของโมเดลเท่านั้น

ซ้ายคือวางแสงตามฉากหลัง ขวาวางแสงจัดโดยไม่สนใจฉากหลัง

ในส่วนของ Cell Shade นั้น ถือว่าเป็น Cell Shade แบบดั้งเดิมธรรมดา แต่ส่วนที่ทีมงานให้ความสนใจเป็นพิเศษก็คือเงา เพราะโดยส่วนใหญ่แล้ว Cell Shade จะดูไม่สวย และดูเป็น 3D ก็ตรงเงานี่แหละ

เทียบ ซ้ายคือแสงเงาที่มองออกว่าเป็นโมเดล 3 มิติ ในขณะที่ภาพขวาซึ่งผ่านการใช้ลูกเล่นและเทคนิกต่างๆ แล้ว จะดูใกล้เคียง anime กว่า

อย่างแรก มีการใช้ Red Channel ของ vertex color ในการควบคุมเงา vertex ไหนมีค่า R น้อย ก็จะเกิดเงาได้ง่ายกว่า ซึ่งการคำนวณหาค่า R นี้ จะใช้วิธีคล้ายๆ การคำนวณ Ambient Occlusion

ซ้ายคือ R Channel แสดงผลแบบขาวดำ ซึ่งคล้าย AO มาก
กลางคือแสงเงาที่เกิดจากทิศแสงตรงๆ
ขวาคือแสงเงาเมื่อนำค่า R จากภาพแรกมาคำนวณแล้ว

ถัดมาครับ คือ Texture ที่เอาไว้ควบคุมแสงเงาที่ทางทีมตั้งชื่อว่า ILM Texture ซึ่งไม่เกี่ยวอะไรกับลูคัสนะครับ

Green Channel ของ ILM Texture เป็นการควบคุมความสว่างโดยตรง ทำให้ทีมงานสามารถหลอกให้เหมือนตัวละครทอดเงาลงบนตัวเองได้ ทั้งที่ความจริงไม่มี ตัวละครจะทอดเงาลงพื้นเท่านั้น


ส่วน Red เอาไว้ควบคุมความสว่างของไฮไลท์ ในขณะที่ Blue Channel ไว้ควบคุมขนาด ยกตัวอย่าง I-No ซึ่งมีขนาดไฮไลท์ต่างกันระหว่างซ้ายและขวา

รายละเอียดยิบย่อยของโมเดลที่จะทำให้เกิดแสงเงาเล็กๆ จนไม่สวยนั้น ทางทีมงานใช้วิธีนำ Normal จากโมเดลที่เรียบง่ายกว่ามาใช้ในการคำนวณแสง ทำให้สามารถกำจัดหลืบเงาเล็กๆ เหล่านั้นได้ เช่น บนเส้นผม หรือบนกางเกง

ต่อมา การคำนวณสีของเงา ทางทีมจะใช้ SSS Texture ซึ่งก็อีกนั่นแหละ ชื่อ SSS แต่ไม่เกี่ยวอะไรกับ Sub Surface Scatter

ซึ่งวิธีคำนวณโดยคร่าวๆ จะมีการแยกคำนวณสีส่วนสว่าง กับสีส่วนเงา ดังนี้

สีส่วนสว่าง = ( สีแสง + สี ambient ) X สี Texture
สีส่วนมืด = สี ambient X สี texture X สี SSS

ทำให้สามารถปรับสีตัวละครให้เข้ากับฉากได้ตามตัวอย่าง

การลากเส้นไม่ใช่ post effect แต่จะใช้วิธีที่ในบทความกล่าวว่า เป็นวิธีแบบ “ดั้งเดิม” กล่าวคือ

1. ขยายโมเดลขึ้นเล็กน้อย ทำ front face culling (คือตัดโพลิกอนที่หันมาหาเราทิ้ง) แล้ว render สีเข้ม
2. Render สีธรรมดา
3. เอา 2 ไปทับ 1
http://www.4gamer.net/games/216/G021678/20140703095/screenshot.html?num=090

แต่ทางทีมยังมีเพิ่มเติมลูกเล่นเข้าไปด้วย นั่นคือ การใช้ alpha channel ของ vertex color มาช่วยควบคุมความหนาของเส้น

ตามตัวอย่างครับ ซ้ายคือเส้นธรรมดา ขวาคือเส้นที่ใช้เทคนิกนี้

และยังไม่หมดครับ เพื่อซ่อนเส้นในส่วนที่ไม่ต้องการ ทีมงานนำ Blue Channel ของ Vertex color มาใช้ทำ Z off set เพื่อดันเส้นนั้นให้ลึกลงไปใน z buffer ... หรือพูดง่ายๆ ก็คือหลอกดันเส้นเหล่านั้นไปไกลๆ เพื่อให้โมเดลบังเอาไว้นั่นแหละครับ ซึ่งใช้เยอะมากในส่วนเส้นผม

ซ้ายคือปกติ ขวาคือใช้ Z off set

เทคนิกดังกล่าวรับมือเส้นที่วิ่งรอบนอกตัวละคร

ส่วนลายเส้นภายใน ทีมงานจะใช้วิธีวาดลงใน texture เป็นแนวนอนและแนวตั้งเท่านั้น เพื่อไม่ให้เกิดปัญหาเส้นมีรอยหยัก

ตัวอย่าง Texture ลายเส้นของ I-No

จากนั้น ทีมงานสามารถขยับ UV เล็กน้อยเพื่อเล่นกับความหนา-บางของลายเส้นได้ ยกตัวอย่าง UV ของ Sol และผลที่ได้

ถ้าลองโหลด PDF ที่ผมลงไว้ตอนต้นบทความไปดู จะแปลกใจครับที่ Texture ตัวละครแทบทุกตัว วางเป็นตารางๆ แบบนี้หมดเลย ทีแรกเห็นแล้วเล่นเอางง

จบ Part แรกครับ ติดตามต่อ Part 2: Animation และอื่นๆ ได้เลยครับ