ARKit Demo: การสร้างภาพยนตร์เสมือนจริง

เผยแพร่แล้ว: 2022-03-11

AR และ VR กำลังกลายเป็นกระแสหลัก และบริษัทไฮเทครายใหญ่ทั้งหมดกำลังไล่ตามพวกเขา: Apple มี ARKit, Google มี ARCore และ Microsoft มี HoloLens ของตัวเอง (และแน่นอนว่ามี Unity) และด้วยแอปพลิเคชั่นบางตัวที่ได้รับความสนใจจากสาธารณชนเป็นจำนวนมาก การพัฒนาแอพ Augmented Reality จึงกลายเป็นทักษะที่นักพัฒนามือถือต้องการอย่างมาก

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

ข้อมูลเบื้องต้นเกี่ยวกับ ARKit

ARKit เป็นเฟรมเวิร์กของ Apple สำหรับสร้างแอป AR สำหรับอุปกรณ์ iOS สามารถใช้ตัวแสดงภาพได้หลายตัว: SpriteKit สำหรับวัตถุ 2D, SceneKit สำหรับ 3D และ Metal หากเราต้องการใช้ตัวแสดงภาพแบบกำหนดเอง

สำหรับการสาธิตนี้ เราจะใช้ SceneKit ในการเรนเดอร์และวางวัตถุ 3 มิติ (มีด) ที่แสดงผลอย่างสมบูรณ์

ภาพ: ความแตกต่างระหว่างตัวแสดงภาพ

จาก ARKit v2 รองรับการกำหนดค่าห้าประเภทใน ARKit:

AROrientationTrackingConfiguration – เมื่อคุณต้องการติดตามเฉพาะการวางแนวของอุปกรณ์ (เช่น สำหรับแอปพลิเคชันกลุ่มดาว) ด้วยการกำหนดค่านี้ การเคลื่อนไหวทางกายภาพ เช่น การเหยียบด้านข้างจะไม่ถูกติดตาม และจะไม่ส่งผลต่อตำแหน่งหรือทิศทางของวัตถุในฉาก

ARWorldTrackingConfiguration – นี่อาจเป็นการกำหนดค่าที่ใช้บ่อยที่สุดสำหรับ AR เนื่องจากรองรับสิ่งที่คนส่วนใหญ่คิดว่าเป็นเทคโนโลยีความจริงเสริม ตัวอย่าง ได้แก่ แอปพลิเคชันสัตว์เลี้ยงเสมือนจริงหรือเกมล่าโปเกมอน

ARFaceTrackingConfiguration – การกำหนดค่านี้ได้รับการสนับสนุนโดย iPhone X เท่านั้นในขณะนี้เนื่องจากต้องใช้กล้อง TrueDepth (เช่น Face ID) การกำหนดค่านี้จะติดตามคุณลักษณะบนใบหน้าและการชดเชยที่สัมพันธ์กันจากการแสดงออกทางสีหน้าที่เป็นกลาง (เช่น แอปพลิเคชันที่ผู้ใช้สามารถลองใช้แว่นกันแดดแฟชั่นก่อนสั่งซื้อ)

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

ARObjectScanningConfiguration – การกำหนดค่านี้เป็น ARImageTrackingConfiguration เวอร์ชัน 3 มิติ

ในการสาธิตนี้ เราจะเพิ่มมีดและกระสุนเข้าไปในฉาก และเราอยากได้อิสระหกองศา ดังนั้นเครื่องมือที่เหมาะสมคือ ARWorldTrackingConfiguration

แนวคิดของแอพ

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

แอพของเราจะมีโมเดล 3 มิติของกระสุนและมีด ขึ้นอยู่กับผู้ใช้ว่าต้องการกระสุนหรือมีดกี่เล่มในภาพยนตร์ หากคุณต้องการใช้เวลาและเพิ่มรุ่นอื่นๆ โค้ดของแอปนั้นเป็นแบบโอเพนซอร์สและมีอยู่ใน GitHub (https://github.com/altaibayar/toptal_ar_video_maker) แม้ว่านี่จะไม่ใช่บทช่วยสอน AR แบบเต็ม แต่การสาธิตและแหล่งที่มาควรเป็นทรัพยากรที่มีค่า หากคุณกำลังพยายามเข้าสู่การพัฒนาแอป AR บน iOS

สถานการณ์จำลองกรณีการใช้งานที่ตั้งใจไว้มีดังนี้:

  1. ให้เพื่อนแต่งตัวเป็น Neo (ไม่จำเป็นสำหรับการทำงานของแอพพลิเคชั่นอย่างเคร่งครัด แต่อาจดูดีในขณะที่เราทำสิ่งนี้)
  2. ขอให้ "นีโอ" ยืนห่างจากคุณประมาณ 10 เมตร (30 ฟุต)
  3. เริ่มแอปพลิเคชันและสแกนระนาบพื้น
  4. เพิ่มกระสุนและมีดที่บินไปที่ "นีโอ"
  5. กดปุ่มบันทึกค้างไว้เพื่อบันทึกวิดีโอในขณะที่ “นีโอ” ทำท่าเจ๋งๆ เพื่อหลบหรือหยุดกระสุน
  6. ปล่อยปุ่มบันทึกและบันทึกวิดีโอลงในห้องสมุดของคุณ

การสร้างแอพ

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

เพื่อจุดประสงค์ในการสาธิต เราจะมีวัตถุเสมือนเพียงสองประเภทเท่านั้น: มีดและกระสุนปืนลูกซอง

มีดเป็นวัตถุที่มีรายละเอียดและฉันจะใช้โมเดลฟรีจาก https://poly.google.com/view/3TnnfzKfHrq (ขอบคุณ Andrew)

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

GameplayKit เป็นเครื่องมือที่มีประโยชน์ซึ่งสะดวกทุกเมื่อที่คุณต้องการสร้างเสียงรบกวนแบบสุ่ม ระบุเครื่องจักร AI หรือการตัดสินใจตามความน่าจะเป็น

 override init() { super.init(); // generate 50 gaussian distributed position around [0, 0, 0] let positions = Randomness.gaussian(center: SCNVector3Zero, count: 50); for pos in positions { let node = SCNNode(geometry: sphereGeometry()); node.position = pos; self.addChildNode(node); } } private func sphereGeometry() -> SCNGeometry { // radius of one projectile sphere is 5mm/0.2inch let sphere = SCNSphere(radius: 0.005); // sphere is reddish sphere.firstMaterial?.diffuse.contents = UIColor.red; // reflection on light is gray/silver sphere.firstMaterial?.reflective.contents = UIColor.gray; // metalness is 0.3 sphere.firstMaterial?.metalness.contents = 0.3; // shading should be realistic sphere.firstMaterial?.lightingModel = .physicallyBased; return sphere; }

สามารถใช้ตรรกะออฟเซ็ตแบบสุ่มที่คล้ายกันสำหรับมีดได้ แต่เนื่องจากมีดเหล่านี้ไม่ได้ทำงานเป็นกลุ่ม จึงสามารถใช้การแจกแจงแบบสุ่มอย่างง่ายได้

สถาปัตยกรรมแอพ

อยู่นอกเหนือขอบเขตของการสาธิตนี้เพื่อเจาะลึกการอภิปรายว่ากระบวนทัศน์สถาปัตยกรรมใดดีที่สุด มีบทความมากมายที่เจาะลึกในหัวข้อนั้น

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

แอปพลิเคชันมีเพียงสามหน้าจอ:

PermissionViewController – หน้าจอที่เราขอให้ผู้ใช้อนุญาตให้แอปพลิเคชันเข้าถึงคุณสมบัติมือถือที่จำเป็น

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

ExportViewController – หน้าจอนี้แสดงวิดีโอที่บันทึกไว้และมีตัวเลือกในการแชร์หรือบันทึกวิดีโอ

MainViewController – ความมหัศจรรย์ทั้งหมดเกิดขึ้นที่นี่

จากประสบการณ์ของฉัน เป็นการดีที่สุดที่จะรวมคลาส ARKit ที่จำเป็นทั้งหมด เช่น ARSession, ARConfiguration และ SCNNode ทุกประเภทที่ไม่เหมือนใคร ด้วยวิธีนี้ รหัสจะอธิบายตนเองได้

ARSession ได้รับการสืบทอดไปยัง ToptalARSession และคลาสเซสชันใหม่มีเพียงสามวิธีเท่านั้น: ตัวสร้างคลาสที่เราตั้งค่าทุกอย่างที่จำเป็น และวิธีการ resetTracking และ pauseTracking

แอปพลิเคชันรู้จัก SCNNodes สี่ประเภทที่ไม่ซ้ำกัน:

  • KnifeNode – หมายถึงวัตถุ 3D ของมีด และโหลดมีด 3D เป็นรูปทรงเรขาคณิตโดยอัตโนมัติ

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

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

  • ReticleNode – ล้อมโมเดล 3 มิติซึ่งปรากฏในฉากเหนือพื้นเพื่อแสดงตำแหน่งที่มีดหรือกระสุนจะถูกเพิ่ม
  • DirectionalLightNode – นี่คือโหนดที่แสดงแสงแนวตั้งที่ชี้ลง

ข้อมูลอ้างอิงและเครดิต

มีดรุ่น: https://poly.google.com/view/3TnnfzKfHrq

การบันทึกจาก SCNScene: https://github.com/svtek/SceneKitVideoRecorder

ไอคอนปุ่ม แอปพลิเคชันสาธิต ARKit: https://developer.apple.com/documentation/arkit/handling_3d_interaction_and_ui_controls_in_augmented_reality