ปรับแต่งโมเดล 3 มิติในแอป

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยให้คุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทนี้ได้
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
ชุดหูฟัง XR
แว่นตา XR แบบมีสาย
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ก่อนปรับแต่งโมเดล 3 มิติ คุณต้องเพิ่มโมเดลลงในแอปก่อน หลังจากเพิ่มโมเดล 3 มิติลงในแอปแล้ว คุณสามารถปรับปรุงประสบการณ์ด้านภาพและ การโต้ตอบได้โดยการปรับแต่งลักษณะและการเคลื่อนไหวของโมเดล 3 มิติ

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

ออบเจ็กต์ 3 มิติใน Android XR

Jetpack XR SDK รองรับมาตรฐานเปิด glTF 2.0 ของ Khronos Group สำหรับโมเดลและการแสดงผล 3 มิติ ออบเจ็กต์เหล่านี้ด้วยเทคนิคการแสดงผลตามหลักการทางฟิสิกส์ (PBR) ที่ระบุไว้ในมาตรฐาน glTF 2.0 (พร้อมด้วยส่วนขยายที่รองรับ) glTF (Graphics Library Transmission Format) เป็นรูปแบบไฟล์มาตรฐานสำหรับ การส่งและโหลดฉากและโมเดล 3 มิติ โมเดล glTF ประกอบด้วย โครงสร้างแบบลำดับชั้นของคอมโพเนนต์ภายใน

องค์ประกอบสำคัญที่ควรทราบมีดังนี้

  • โหนด: โหนดเหล่านี้กำหนดโครงสร้างและลำดับชั้นของโมเดล แต่ละโหนด จะมีตำแหน่ง การหมุน และการปรับขนาดของตัวเองได้
  • ตาข่าย: โครงสร้างเรขาคณิต 3 มิติที่สร้างรูปร่างของออบเจ็กต์ 3 มิติ
  • วัสดุ: กำหนดลักษณะที่มองเห็นของ ตาข่าย เช่น สี ความหยาบ หรือวิธีที่ตาข่ายตอบสนองต่อ แสง
  • พื้นผิว: ชิ้นงานรูปภาพ เช่น ไฟล์ PNG ที่คุณใช้กับ พื้นผิวของโมเดล 3 มิติเพื่อสร้างลวดลาย สี รายละเอียด หรือ เอฟเฟ็กต์ภาพอื่นๆ ที่กำหนดเองได้

ใน Jetpack Compose สำหรับ XR คุณจะแสดงไฟล์เหล่านี้โดยใช้ SpatialGltfModel และติดตามสถานะการโหลดโดยใช้ SpatialGltfModelState ดูข้อมูลเพิ่มเติมได้ที่เพิ่มโมเดล 3 มิติลงในแอป

ปรับแต่งโหนด: ท่าทางและการหมุน

หากต้องการจัดการบางส่วนของโมเดลและเปลี่ยนพร็อพเพอร์ตี้ เช่น การหมุน หรือท่าทาง คุณจะต้องค้นหาnodesภายในของโมเดล glTF โดยใช้ SpatialGltfModelState

// Retrieve the list of nodes (individual components/meshes) defined within the glTF model.
val entityNodes = modelState.nodes

// Find a specific node by name to apply modifications, such as material overrides.
val node = entityNodes.find { it.name == "node_name" }

หลังจากพบโหนดที่ถูกต้องแล้ว คุณสามารถตั้งค่า localPose เพื่อเปลี่ยนตำแหน่งและการหมุน 3 มิติ ที่สัมพันธ์กับโหนดแม่ GltfModelNode หรือ ใช้ modelPose เพื่อตั้งค่าตำแหน่งที่สัมพันธ์กับ รูท GltfModelEntity ในทำนองเดียวกัน คุณสามารถใช้ localScale/modelScale เพื่อเปลี่ยนสเกลของโมเดลที่สัมพันธ์กับองค์ประกอบระดับบนหรือรูท

LaunchedEffect(node, degrees) {
    val rotation = Quaternion.fromEulerAngles(degrees, 0f, degrees)
    node?.let {
        it.localPose = Pose(it.localPose.translation, rotation)
    }
}

ปรับแต่งคุณสมบัติของวัสดุของโมเดล 3 มิติ

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

ใน Jetpack XR จะใช้คลาส KhronosPbrMaterial และ KhronosUnlitMaterial เพื่อสร้างและจัดการวัสดุเหล่านี้ ตามชื่อที่สื่อถึง KhronosUnlitMaterials จะไม่สว่างและไม่ได้รับผลกระทบจากแสงในฉาก KhronosPbrMaterial ช่วยให้คุณปรับแต่งพร็อพเพอร์ตี้ได้หลากหลายมากขึ้น เช่น สีเงา ความเป็นโลหะหรือความหยาบของออบเจ็กต์ และการเปล่งแสง

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ที่รองรับแต่ละรายการและพารามิเตอร์ที่ปรับแต่งได้ใน Android XR ได้ที่เอกสารอ้างอิง โปรดดูอภิธานศัพท์ของ Khronos เพื่อให้เข้าใจพร็อพเพอร์ตี้เหล่านี้ได้ดียิ่งขึ้น

รูปที่ 1 ตัวอย่างการเปลี่ยนสีพื้นฐานในโมเดล 3 มิติ

หากต้องการปรับแต่งคุณสมบัติของวัสดุของโมเดล 3 มิติ คุณจะต้องสร้างวัสดุใหม่โดยใช้ KhronosPbrMaterial ก่อน คุณจะต้องตั้งค่าAlphaModeที่เหมาะสมสำหรับลักษณะที่ปรากฏของภาพที่คุณต้องการ ให้เป็นดังนี้

จากนั้นกำหนดพร็อพเพอร์ตี้ที่ต้องการแก้ไข ตัวอย่างนี้ใช้ setBaseColorFactor เพื่อเปลี่ยนสีพื้นฐานของตาข่ายเป็นสีม่วง เมธอดนี้ต้องใช้ Vector4 โดยที่คอมโพเนนต์ x, y, z และ w จะสอดคล้อง กับค่า RGBA (แดง เขียว น้ำเงิน และอัลฟ่า) ตามลำดับ

// Maintain a reference to the custom material to avoid re-creating it on every recomposition.
var pbrMaterial by remember { mutableStateOf<KhronosPbrMaterial?>(null) }

// Create and apply the custom material once the session is ready and the target node is available.
LaunchedEffect(node) {
    val material = KhronosPbrMaterial.create(
        session = xrSession,
        alphaMode = AlphaMode.OPAQUE
    ).also {
        pbrMaterial = it
        // Apply a base color factor (RGBA) to change the color of the model.
        it.setBaseColorFactor(
            Vector4(
                x = 0.5f,
                y = 0.0f,
                z = 0.5f,
                w = 1.0f
            )
        )
    }

โหลดพื้นผิวที่กำหนดเองสำหรับโมเดล 3 มิติ

Texture คือชิ้นงานรูปภาพที่คุณใช้กับพื้นผิวของโมเดล 3 มิติเพื่อระบุสี รายละเอียด หรือข้อมูลพื้นผิวอื่นๆ ได้ Jetpack XR Texture API ช่วยให้คุณโหลดข้อมูลรูปภาพ เช่น ไฟล์ PNG จากโฟลเดอร์ /assets/ ของแอปได้แบบไม่พร้อมกัน

เมื่อโหลดเท็กซ์เจอร์ คุณสามารถระบุ TextureSampler ซึ่งควบคุม วิธีแสดงผลเท็กซ์เจอร์ Sampler จะกำหนดพร็อพเพอร์ตี้การกรอง (เมื่อเท็กซ์เจอร์ปรากฏเล็กหรือใหญ่กว่าขนาดเดิม) และโหมดการตัดขอบ (สำหรับการจัดการพิกัดนอกช่วง [0, 1] มาตรฐาน) ต้องกำหนด Texture ให้กับ KhronosPbrMaterial เพื่อให้มีเอฟเฟกต์ภาพในโมเดล 3 มิติ

รูปที่ 2 ตัวอย่างการเปลี่ยนพื้นผิวในโมเดล 3 มิติ

หากต้องการโหลดพื้นผิวที่กำหนดเอง ก่อนอื่นคุณจะต้องบันทึกไฟล์รูปภาพลงในโฟลเดอร์ /assets/ แนวทางปฏิบัติแนะนำคือคุณควรสร้างtextures ไดเรกทอรีย่อยในโฟลเดอร์นั้นด้วย

หลังจากบันทึกไฟล์ในไดเรกทอรีที่เหมาะสมแล้ว ให้สร้างพื้นผิวด้วย API Texture นอกจากนี้ คุณยังใช้TextureSamplerที่ไม่บังคับได้ที่นี่ด้วย หากต้องการ

ตัวอย่างนี้ใช้เท็กซ์เจอร์การบดบังและตั้งค่าความแรงของการบดบัง

LaunchedEffect(node) {
    val material = KhronosPbrMaterial.create(
        session = xrSession,
        alphaMode = AlphaMode.OPAQUE
    ).also {
        pbrMaterial = it

        // Load a texture
        val texture = Texture.create(
            session = xrSession,
            path = Path("textures/texture_name.png")
        )

        // Set the texture and configure occlusion to define how the material surface handles ambient lighting.
        it.setOcclusionTexture(
            texture = texture,
            strength = 1.0f
        )
    }
    node?.setMaterialOverride(
        material = material
    )
}

ใช้วัสดุและพื้นผิวกับออบเจ็กต์ 3 มิติ

หากต้องการใช้วัสดุหรือพื้นผิวใหม่ ให้ลบล้างวัสดุที่มีอยู่สำหรับโหนดที่เฉพาะเจาะจงใน glTF โดยโทรไปที่ setMaterialOverride

node?.setMaterialOverride(
    material = material
)

หากต้องการนำเนื้อหาที่สร้างขึ้นใหม่ ให้เรียกใช้ clearMaterialOverride ใน node ที่ลบล้างก่อนหน้านี้ การดำเนินการนี้จะเปลี่ยนโมเดล 3 มิติกลับสู่สถานะเริ่มต้น 

if (removeMaterial) {
    node?.clearMaterialOverride()
}

สร้างภาพเคลื่อนไหวโมเดล 3 มิติ

โมเดล 3 มิติสามารถมีภาพเคลื่อนไหวที่ฝังไว้ได้ ภายในแล้ว ภาพเคลื่อนไหวจะใช้ ตัวอย่างเพื่อกำหนดเวลาและค่าของการเคลื่อนไหว และ แชแนลเพื่อเชื่อมต่อการเคลื่อนไหวเหล่านั้นกับโหนดและ ตาข่ายแต่ละรายการ Jetpack XR SDK รองรับภาพเคลื่อนไหวโครงกระดูกและภาพเคลื่อนไหวของวัสดุที่สร้างด้วยKHR_animation_pointer ส่วนขยาย glTF

คุณควบคุมภาพเคลื่อนไหวได้โดยใช้ GltfAnimation ของ SceneCore เท่านั้น พร้อมด้วย GltfModelEntity หากต้องการเพิ่มเอนทิตีนี้ลงในเลย์เอาต์ Compose for XR คุณจะต้องใช้ SceneCoreEntity แทน SpatialGltfModel

ระบุชื่อแทร็กที่เฉพาะเจาะจงจาก รายการ animations ใน GltfModelEntity ใช้ GltfAnimationStartOptions เพื่อควบคุมการเล่นภาพเคลื่อนไหว นอกจากนี้ คุณยังระบุความเร็ว เวลาในการค้นหา และเลือกว่าควรวนซ้ำภาพเคลื่อนไหวหรือไม่ได้ด้วย 

val animation = gltfEntity.getAnimations().find { it.name == "Walk" }
animation?.start(GltfAnimationStartOptions(shouldLoop = true))

glTF และโลโก้ glTF เป็นเครื่องหมายการค้าของ Khronos Group Inc.