เว็บซิมูเลเตอร์ Cloth

[GN⁺]

ความคิดเห็นจาก Hacker News

• อีกตัวอย่างหนึ่งที่ดูได้ในเบราว์เซอร์: https://oimo.io/works/cloth/

  • สงสัยว่าเมื่อไรเราจะได้เห็น การโต้ตอบของผ้า แบบนี้ในเกม

• หลังจากอ่านบทความของ Marian Pekár ผมก็เข้าใจ Verlet integration และทำซิมูเลชันผ้าด้วยตัวเองได้: https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...

  • มุกที่ว่า “Verlet จะเป็น Verlet ได้ก็ต่อเมื่อมาจากแคว้น Verlet ในฝรั่งเศส ไม่อย่างนั้นก็เป็นแค่ Euler แบบมีฟอง” นี่เยี่ยมมาก

• สงสัยว่าจากความรู้ด้านเว็บดีเวลลอปเมนต์, Gradle, Java จะข้ามไปถึงขั้นสร้างอะไรแบบนี้ได้อย่างไร
  ผมไม่ได้เรียนปริญญาตรี CS เลยบางครั้งก็รู้สึกว่าไม่ว่าจะเรียนภาษาโปรแกรมมิงมากแค่ไหน ก็คงไม่มีวันเข้าใจของแบบนี้ได้เลย เคยลองจับ OPENLY, LIBGDX, GODOT, Unity นิดหน่อย แต่การสร้าง ซิมูเลชันผ้า ตั้งแต่ศูนย์นี่รู้สึกมืดแปดด้านจริง ๆ

  • มันง่ายกว่าที่คิดมาก ผมเคยทำเดโม “ผ้าฉีกขาด” ที่ลิงก์ไว้ที่อื่นในเธรดนี้ ก่อนจะเริ่มอาชีพวิศวกรซอฟต์แวร์ด้วยซ้ำ
    ตรงนี้ใช้ Verlet integration พื้นฐาน โดยอัปเดตเวกเตอร์ 2D ที่เป็นกริดจากตำแหน่งปัจจุบันและตำแหน่งก่อนหน้า แล้วจำกัดให้จุดที่อยู่ติดกันรักษาระยะห่างคงที่ไว้ วาดเส้นระหว่างจุดเหล่านั้นก็กลายเป็นผ้า ผมหลงใหลฟิสิกส์ซิมูเลชันเลยไปค้นดู และนี่เป็นหนึ่งในอย่างที่ทำได้ง่ายที่สุด จึงเป็นสิ่งแรก ๆ ที่ได้ลอง ผลลัพธ์ต่อแรงที่ลงไปคุ้มมาก แน่นอนว่าหลังจากนั้นมันจะซับซ้อนขึ้นมาก
  • ผมเคยรู้สึกคล้ายกันเพราะอยากเรียนฟิสิกส์ซิมูเลชัน เมื่อเวลาผ่านไปก็ได้เรียนรู้ว่าควรมอง โดเมนความรู้อย่างฟิสิกส์ แยกจากเครื่องมือโปรแกรมมิงที่ใช้ implement มัน
    โดยเฉพาะถ้าเริ่มจากการพัฒนาเกม จะรู้สึกเหมือนว่าซิมูเลชันหลัก ๆ แต่ละแบบ เช่น rigid body, ผ้า, สปริง, ของไหล น่าจะมีวิธีเขียนโปรแกรมที่เป็นธรรมชาติและเป็นสำนวนของมันเอง ตอนแรกผมก็คิดว่าซิมูเลชันของไหลจะถูกแสดงในภาษาได้อย่างเป็นธรรมชาติ เช่น สร้างกริดแล้วเลือกกฎอัปเดตในแต่ละ time step แต่ในความเป็นจริงคือการโมเดลปัญหาด้วยคณิตศาสตร์และฟิสิกส์ แล้วค่อยแมปมันไปยังภาษาและเครื่องมือ ซึ่งเครื่องมือเหล่านั้นก็ไม่ได้แสดงออกมาได้เป็นสำนวนเสมอไป
    มีอัลกอริทึมบางอย่างที่ย้ายมาเป็นโค้ดได้ง่าย เช่น ซิมูเลชันผ้าบนพื้นฐานตำแหน่งอนุภาคและสปริง แต่พอพยายามไปต่อ สิ่งนั้นกลับทำให้เข้าใจผิด สุดท้ายต้องขุดลึกลงไปในฟิสิกส์และ numerical analysis แล้วจึงย้ายปัญหามาเป็นโค้ด ซึ่งโค้ดที่ได้อาจดูทื่อ ๆ และมี magic number เยอะ
  • เว็บดีเวลลอปเมนต์ไม่ได้จำกัดอยู่แค่ Java และโดยรวมถูกครอบงำด้วยปัญหา การผสานคอมโพเนนต์ มีโครงสร้างมากแต่เนื้อหาน้อย งานคำนวณถูกโยนให้ไลบรารี และปัญหาในช่วง build คือความซับซ้อนของการผสาน ส่วนช่วง runtime คือสเกลของระบบกระจายศูนย์
    ในทางกลับกัน การเขียนซิมูเลชันมีงานคำนวณมาก โค้ดส่วนใหญ่จึงเป็นเนื้อหาจริง ๆ ถ้าเว็บดีเวลลอปเมนต์คือการประกอบสิ่งที่ต่างชนิดกัน ซิมูเลชันก็มีความเป็นเนื้อเดียวกันมากกว่า ปัญหาคือถูกจำกัดด้วยประสิทธิภาพของโปรเซสเดียวภายในงบเวลาที่จำนวนเฟรมต่อวินาทีกำหนด
    ดังนั้นจึงโฟกัสกับสภาพแวดล้อมรันไทม์เดียวได้ ผมแนะนำเบราว์เซอร์ เพราะช่วยแก้ปัญหาการ deploy ให้ Ganja[1] อาจเป็นโปรเจกต์ซิมูเลชันขั้นสุดที่ใกล้กับ “เนื้อหา ไม่ใช่โครงสร้าง” มากที่สุดก็ได้ มันแปลกมากและเข้าใจยากจนหยุดดูแลไปแล้ว แต่ก็ยังทำงานได้ ถ้าอยากได้แบบมีโครงสร้างขึ้นอีกหน่อยก็มี D3 และผู้เขียนก็ทำอัลกอริทึม visualization/layout สมัยใหม่อย่าง force-based graph[2] ไว้ให้แล้ว จุดเริ่มต้นที่เป็นมิตรกว่าอาจเป็นตระกูล Processing[3] ซึ่งเริ่มจาก Java แล้วถูกพอร์ตไปยัง Python และ JavaScript เป็นต้น
    อย่างไรก็ตาม ซิมูเลชันผ้าเพียงอย่างเดียว ถ้าเทียบกับเกมเอนจินก็เป็นระดับเซลล์หนึ่งของหนูหนึ่งตัวเท่านั้น เกมเอนจินมีขนาดใหญ่มาก และในนั้นคุณก็มักจะทำการผสานภายในจำนวนมาก มากกว่าจะเขียนซิมูเลชันเองโดยตรง
    1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
    2 - https://github.com/d3/d3-force/tree/main/src
    3 - https://processing.org/
  • สุดท้ายแล้วทั้งหมดคือ คณิตศาสตร์และฟิสิกส์
    แม้คุณไม่ได้ถามเจาะจงเรื่องการพัฒนาเกม แต่ความรู้ด้านกราฟิก คณิตศาสตร์ แสง และฟิสิกส์โดยทั่วไปกระจายอยู่ในสาขานั้นเยอะมาก ถ้าพยายามค้นหาเฉพาะหัวข้อเฉพาะทางอย่างซิมูเลชันผ้า อาจหาแหล่งข้อมูลที่ไม่โยงกับเนื้อหาพัฒนาเกมได้ยาก
    วันนี้ผมอ่าน https://alextardif.com/LearningGraphics.html ซึ่งน่าจะเป็นเข็มทิศได้หลายทาง https://learnopengl.com/ ก็ยังได้รับคำชมอย่างต่อเนื่อง แม้ตอนนี้จะมี API ใหม่กว่าอย่าง Vulkan, Metal, DX12 แล้วก็ตาม แต่ให้มองว่า API เป็นแค่ประมาณ 5% ของปัญหาที่ต้องแก้ พูดตรง ๆ อาจน้อยกว่านั้นด้วยซ้ำ แต่ Vulkan ก็หนักกว่าที่เคยได้ยินมาอีก
    ถ้าไม่อยากเรียน C/C++ ชุมชน WebGL ก็ใหญ่ เริ่มจาก subreddit หรือฟอรัมที่เกี่ยวข้องก็ได้ ถึงอย่างนั้น API และแพลตฟอร์มก็ใกล้เคียงกับเปลือกที่ห่อส่วนที่น่าประทับใจและแปลกใหม่จริง ๆ อย่าง ฟิสิกส์ซิมูเลชัน
    ขอเสริมที่มา: ผมเป็นนักพัฒนาเว็บ/Gradle/Java และกำลังกลับมาทำเกมเอนจินในเวลาว่างอีกครั้ง หลังจากเคยลองเมื่อหลายปีก่อน
  • มันไม่ได้ยากขนาดนั้น ใน JavaScript ให้แทนแต่ละจุดเป็น (x,y,z) แล้วกำหนดมวล จากนั้นในแต่ละเฟรมก็ใช้ แรงโน้มถ่วง และถ้าจำเป็นก็เติม noise เล็กน้อย
    ทุกครั้งที่อนุภาคพยายามเคลื่อนที่ ให้ใช้ตรีโกณมิติส่งแรงผ่านขอบไปยังจุดอื่น ๆ แล้วใส่ damping เล็กน้อยเพื่อไม่ให้หลุดการควบคุม มวลจะกำหนดในภายหลังว่าแต่ละจุดได้รับผลจากแรงมากแค่ไหน ถ้า 3D หนักไป ก็เริ่มจาก 2D ก่อนก็ได้

• นึกถึงวิดีโอของ Polygon ที่วิเคราะห์ การออกแบบผ้า อันน่าทึ่งใน Elden Ring: https://youtu.be/wSSqx-Dh6ko

  • ส่วนที่วิดีโอไม่ได้เน้นมากพอคือ ผ้ายังมีจุดประสงค์เชิงการใช้งานด้วย ผ้าบังรูปทรงของศัตรู ทำให้แยกแยะโมเดลได้ยากขึ้น
    ในเกมที่มี hitbox ที่แม่นยำและการต่อสู้ระยะประชิดเป็นหัวใจหลัก ซึ่งอาจเรียกได้ว่าเป็นหนึ่งในแง่มุมที่ล้ำที่สุดของเกม FromSoft ผ้าที่พลิ้วไหวอย่างอิสระทำให้ยากขึ้นที่จะตัดสินว่าต้องวางตัวละครไว้ใกล้แค่ไหนถึงจะโจมตีโดน หรืออยู่ห่างแค่ไหนถึงจะไม่โดนโจมตี เมื่อรวมกับการเคลื่อนไหวและรูปแบบการโจมตีที่คาดเดายาก ก็ยิ่งเพิ่มความยาก และทำให้การต่อสู้แต่ละครั้งมีเอกลักษณ์
    ในโลกจริง ผ้าก็มีคุณสมบัติแบบเดียวกัน ศัตรูที่สวมเสื้อคลุมหรือผ้าคลุมจะดูน่ากลัวและรับมือยากกว่ามาก
    โดยส่วนตัวไม่ได้สนุกกับเกมของ FromSoft เพราะโครงสร้างการเล่นซ้ำ ๆ แต่ในแง่การออกแบบ มองว่าเป็นวิดีโอเกมบางส่วนที่ทำออกมาดีที่สุดในประวัติศาสตร์

• ชอบแอนิเมชันผ้าแบบนี้มาตลอด ครั้งแรกที่เห็นน่าจะเป็นเดโม ผ้าฉีกขาด บน Codepen ของ dissimulate และแทบไม่น่าเชื่อว่าโค้ดนั้นเขียนไว้เมื่อ 9 ปีก่อน
  [1] - https://codepen.io/dissimulate/pen/eZxEBO
  [2] - https://github.com/Dissimulate/Tearable-Cloth

  • ผมก็มีเวอร์ชันของตัวเองที่ทำไว้เมื่อ 14 ปีก่อน: https://www.youtube.com/watch?v=G05M_Y6NQVM
    เห็นด้วยว่าโครงพื้นฐานแบบนี้นำไปทำได้ง่ายมาก และผลลัพธ์ก็ดูเจ๋งจริง ๆ
  • อันนั้นผมเป็นคนทำเอง เวอร์ชันต้นฉบับที่ลงบน Codepen น่าจะราว 13 ปีก่อน
    ผมเองก็ยังไม่อยากเชื่อ แต่พอนึกว่ามันเกิดขึ้นก่อนจะได้งานโปรแกรมเมอร์งานแรก ก็รู้สึกว่านานมากจริง ๆ
  • วิดีโอเกม Hitman ปี 2000 ก็มีผ้าแล้ว และ Mirror's Edge ปี 2008 ก็มีผ้าที่ฉีกขาดได้ ทั้งคู่อาจไม่ใช่เกมแรกด้วยซ้ำ

• ซิมูเลเตอร์ผ้าแบบนี้ให้ความรู้สึกไม่เสถียรอยู่เสมอในระดับหนึ่ง พอลองสร้างผ้าแบบ Grid มันจะเด้งและเริ่มเคลื่อนไหวแบบสุ่ม
  สงสัยว่าเป็นเพราะข้อผิดพลาดของ floating point ตาม IEEE 754 สะสมหรือเปล่า

  • ลองค้นหาเรื่อง numerical integration ในบริบทของฟิสิกส์ซิมูเลชันหรือเกมเอนจินดูได้ จุดเริ่มต้นคือ https://en.wikipedia.org/wiki/Numerical_methods_for_ordinary...
    ตามที่เข้าใจ สาเหตุไม่ได้มีแค่ข้อผิดพลาดของ floating point แบบง่าย ๆ แต่เกิดจากธรรมชาติของการประมาณฟังก์ชันต่อเนื่องด้วยขั้นตอนแบบไม่ต่อเนื่องที่เรียบง่ายด้วย ในบทความวิกิพีเดียที่ลิงก์ก็มีกราฟที่แสดงว่าเมื่อใช้ step ขนาดใหญ่ ข้อผิดพลาดจะสะสมตั้งแต่ก่อนที่ความแม่นยำของ floating point จะกลายเป็นปัญหาเสียอีก
    เทคนิค numerical integration แต่ละแบบมี trade-off ต่างกัน เช่น Euler method, Verlet, Runge-Kutta โดยบางวิธีมีแนวโน้มทำให้พลังงานรวมสะสมเพิ่มขึ้น ขณะที่บางวิธีมีแนวโน้มทำให้พลังงานสูญเสีย ซึ่งทั้งสองแบบเป็นพฤติกรรมที่ผิด วิธีที่ซับซ้อนกว่านั้นมักทำงานได้ดีกว่าเล็กน้อย แต่ก็เกิดคำถามว่าประโยชน์จากแต่ละ step ที่ซับซ้อนขึ้นคุ้มกว่าการวนอัลกอริทึมที่ง่ายและเร็วกว่าให้มากครั้งขึ้นหรือไม่
  • ในฟิสิกส์ซิมูเลชัน การอนุรักษ์พลังงาน จะไม่ทำงานเป็นค่าเริ่มต้นถ้าไม่ได้เขียนโค้ดไว้อย่างชัดเจน เช่น อาจต้องมีการปรับแก้เองเป็นระยะ
    ไม่ใช่แค่ข้อผิดพลาดจากการปัดเศษเท่านั้น แต่ยังรวมถึงการควอนไทซ์เวลา และข้อผิดพลาดเล็ก ๆ อื่น ๆ ที่มาจากโมเดลคณิตศาสตร์เองด้วย
    ถ้าข้อผิดพลาดเอนไปทางการลดทอน ก็จะเกิดผลเหมือนพลังงานสลายไปแบบโลกจริง ทำให้การเคลื่อนไหวหยุดลงในที่สุด แต่ถ้าเอนไปทางการเร่ง ซิมูเลชันก็จะพุ่งจนควบคุมไม่ได้

• อยากบอกผู้เขียนไซต์นี้ว่าทำได้ดีมาก มันรันได้ตรง ๆ โดย ไม่มี JavaScript ภายนอก และยังทำงานบนมือถือได้ด้วย
  เว็บไซต์ที่เน้นข้อความส่วนใหญ่ทุกวันนี้พูดแบบนี้ได้ยาก

• เป็นงานที่น่าประทับใจจริง ๆ เรียบง่ายแต่ชวนให้ดูต่อ และแสดงให้เห็นได้ดีว่า Verlet integration ทรงพลังแค่ไหนในการสร้างซิมูเลชันผ้าที่ดูเป็นธรรมชาติและสมจริง
  ถ้าสนใจ ขอแนะนำบทความของ Jakobsen จากเกมเอนจิน Hitman ด้วย เป็นเอกสารคลาสสิกเลย

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

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