เทคนิค Fake 3D จากภาพ 2D ด้วย Mesh Animation

โปรแกรมอย่าง Spine, Anima2D, After Effects, etc. มีความสามารถหั่นภาพแผ่นเป็น mesh แล้วขยับแค่บางส่วนของภาพได้ ครั้งนี้จะมาแนะนำวิธีทำให้ภาพดูมิติเพิ่มขึ้นกันครับ

ในที่นี้จะใช้ Spine แต่แนวคิดเอาไปใช้ที่อื่นก็ได้เหมือนกัน ส่วนภาพที่ใช้ในบทความนี้วาดโดยคุณ Kikansha

.::Kikansha's BloG::.
My little room full of rhythm games and art hobby ♫kikansha.blog132.fc2.com

https://www.facebook.com/kikansha

Mesh Animation เบื้องต้น

ก่อนอื่นมาลองสร้าง vertex ตามขอบก่อน ครบแล้วโปรแกรมก็คงจะแบ่งภาพเป็น mesh ให้เราตามที่มันคิดว่าโอเค (ดูจากเส้น edge สีเทา) ซึ่งทีนี้พอเราขยับจุด vertex สีฟ้า ข้อมูลภาพที่อยู่ในสามเหลี่ยมสีเทาแต่ละอัน มันจะ deform ไปตามจุดสีฟ้าที่เป็นเจ้าของมันได้ครับ

สังเกตุได้ว่าผมสามารถพับสามเหลี่ยมนึงลงมาได้โดยไม่กระทบภาพที่อื่น เพราะ vertex นั้นมันเป็นเจ้าของแค่นั้น

สร้าง Vertex เพิ่มเพื่อให้ขยับตรงกลางภาพได้

เพื่อให้เกิดมิติ มีจุดขยับแค่ขอบภาพอาจจะไม่พอดังนั้นเรามาลองเพิ่มจุดให้ mesh ละเอียดขึ้น และที่สำคัญเพื่อให้เกิด edge ที่มีความหมาย

ภาพนี้อยากให้ท่อนแขนหมุนแบบอื่นได้นอกจากหมุนตามแกนที่ชี้ออกมาจากจอมาหาหน้าเรา ดังนั้นจะลองเพิ่มเข้าไป 4 จุด

ผลจากการเติมจุดที่ว่า ทำให้เราได้ edge สีเทาเพิ่ม ที่ยาวลงมาตามท่อนแขนพอดี

บีบ Edge 2 อันเข้าหากัน

เมื่อเราขยับจุด 4 จุดนี้พร้อมกันไปทางขอบซ้ายหรือขวาที่อยู่นิ่งๆ ก็จะดูเหมือนว่าทรงกระบอกหมุนไปเป็น 3 มิติทั้งๆที่ใช้ภาพเดิม

แนวคิดนี้อาจจะใช้ได้กับทรงที่ไม่ใช่ทรงกระบอกด้วยนะครับ ต้องลองๆดูว่าจะหลอกตายังไงดี

การบังคับให้เกิด Edge ในจุดที่ต้องการ

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

ที่เห็นนี้ผมเพิ่มจุดเข้าไป 2 จุด เพื่อให้เกิด mesh ครอบตรงที่ไม่อยากให้กระทบ

สีส้มที่เห็นคือบังคับไว้ว่าอยากได้ edge นี้ ส่วนที่อื่นโยงยังไงก็ได้

ทีนี้พอขยับ 4 จุดเดิม (ไม่ขยับ 2 จุดใหม่) ก็จะเห็นว่าตรงนั้นมันไม่ขยับแล้ว เพราะ vertex ที่เป็นเจ้าของ edge สีส้มทั้งหมดมันไม่ได้ขยับครับ ดังนั้นข้อมูลภาพในสามเหลี่ยมคู่นั้นไม่มีสิทธิ์ขยับ

ปล. ผลที่ตามมาจะเห็นว่ามีสามเหลี่ยมแหลมที่ทำให้ deform ได้ไม่สวยงามเท่าไหร่เกิดขึ้น เพราะเสื้อมันเป็นแนวยาวลงมาแต่นี้ออกมาเกือบจะตั้งฉากกับที่ต้องการเลย แบบนี้อาจจะต้องเพิ่ม vertex ซักหน่อยแล้วบังคับให้มันมี edge ตามแนวเสื้อหน่อยครับ

อาจจะแก้เป็นแบบนี้

ใช้ Animation มาควบคุมจุด Vertex ตามชอบ

ทีนี้ เราก็จะ animate ไอ้จุดสีฟ้าๆพวกนี้ (อาจจะผูกจุดจำนวนมากเข้ากับ bone เดียว จะได้ไม่ต้องมาลำบากขยับทีละจุด) เพิ่มได้แทนที่จะ animate แค่ภาพวัตถุดิบทั้งแผ่นที่ทำได้แค่ translate, rotate, scale ที่เล่นกับ pivot point ของภาพนั้น

ถ้าโปรแกรม Spine เราสามารถ translate rotate scale กับ vertex ได้เหมือนเดิมหมด ซึ่งการ rotate กับ scale นี้จริงๆเป็นการ translate ตำแหน่ง vertex แบบ relative ซึ่งกันนั่นเอง เพราะโดยธรรมชาติจุด vertex ไม่มีขนาดและไม่มีมุมเป็นของตัวเอง เราไม่สามารถ “หมุนจุด” ได้

ภาพนี้มีวัตถุดิบ 3 ภาพเท่านั้น คือกระโปรง แขนตามที่เห็นไปแล้ว และก็ที่เหลือทั้งหมด (ตัว หัว ผ้าคลุม เป็นภาพเดียวกัน)