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

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

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

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

ออบเจ็กต์ 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 for XR คุณจะแสดงผลไฟล์เหล่านี้โดยใช้ SpatialGltfModel และติดตามสถานะการโหลดและภาพเคลื่อนไหวโดยใช้ SpatialGltfModelState ดูข้อมูลเพิ่มเติมได้ที่เพิ่มโมเดล 3 มิติลงในแอป

ทำให้โมเดล 3 มิติเคลื่อนไหว

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

หากต้องการเล่นภาพเคลื่อนไหวโดยใช้ Compose for XR ให้ระบุชื่อแทร็กที่ต้องการจากรายการ animations ใช้ animation.start() เพื่อเริ่ม เล่น นอกจากนี้ คุณยังระบุความเร็ว เวลาที่ต้องการ และกำหนดว่าจะให้ภาพเคลื่อนไหวเล่นซ้ำหรือไม่โดยใช้ SpatialGltfModelAnimation ได้ด้วย

val animation = modelState.animations.find { it.name == "Walk" }

animation?.animationState?.let { state ->
    LaunchedEffect(state) {
        Log.i("SpatialGltfModelAnimationSample", "Animation State: $state")
    }
}

DisposableEffect(animation) {
    animation?.loop()
    onDispose {
        animation?.stop()
    }
}

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

หากต้องการจัดการบางส่วนของโมเดลและเปลี่ยนคุณสมบัติ เช่น การหมุนหรือท่าทาง คุณจะต้องค้นหา 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 มิติ

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

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

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

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

หลังจากบันทึกไฟล์ในไดเรกทอรีที่เหมาะสมแล้ว ให้สร้างพื้นผิว ด้วย Texture API นอกจากนี้ คุณยังใช้ 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 ใน โหนดที่ลบล้างไว้ก่อนหน้านี้ ซึ่งจะทำให้โมเดล 3 มิติกลับสู่สถานะเริ่มต้น

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

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