अपने ऐप्लिकेशन में 3D मॉडल को पसंद के मुताबिक बनाना

इन XR डिवाइसों पर लागू होता है
इस गाइड की मदद से, इन तरह के एक्सआर डिवाइसों के लिए अनुभव बनाए जा सकते हैं.
एक्सआर हेडसेट
तार वाले एक्सआर स्मार्ट ग्लास

किसी 3D मॉडल को पसंद के मुताबिक बनाने से पहले, आपको उसे अपने ऐप्लिकेशन में जोड़ना होगा. अपने ऐप्लिकेशन में 3D मॉडल जोड़ने के बाद, उसे दिखने और हिलने-डुलने के तरीके को पसंद के मुताबिक बनाकर, विज़ुअल और इंटरैक्टिव अनुभव को बेहतर बनाया जा सकता है.

उदाहरण के लिए, एम्बेड किए गए glTF ऐनिमेशन चलाए और कंट्रोल किए जा सकते हैं. साथ ही, आपके मॉडल को बनाने वाले नोड ऐक्सेस किए जा सकते हैं और उन्हें एक जगह से दूसरी जगह ले जाया जा सकता है. इसके अलावा, कस्टम टेक्सचर लोड किए जा सकते हैं और इंटरनल मेश को बदलने के लिए, मटीरियल प्रॉपर्टी तय की जा सकती हैं. इन सुविधाओं की मदद से, रनटाइम में किसी ऑब्जेक्ट के लुक और व्यवहार में डाइनैमिक तरीके से बदलाव किया जा सकता है.

Android XR में 3D ऑब्जेक्ट

Jetpack XR SDK, 3D मॉडल के लिए Khronos Group के glTF 2.0 ओपन स्टैंडर्ड के साथ काम करता है. साथ ही, glTF 2.0 स्टैंडर्ड में बताई गई फ़िज़िकली बेस्ड रेंडरिंग (पीबीआर) तकनीकों का इस्तेमाल करके, इन ऑब्जेक्ट को रेंडर करता है. इसके अलावा, यह एक्सटेंशन के साथ भी काम करता है. glTF (ग्राफ़िक्स लाइब्रेरी ट्रांसमिशन फ़ॉर्मैट), 3D सीन और मॉडल को ट्रांसमिट और लोड करने के लिए इस्तेमाल किया जाने वाला स्टैंडर्ड फ़ाइल फ़ॉर्मैट है. glTF मॉडल में, इंटरनल कॉम्पोनेंट का हैरारिकल स्ट्रक्चर होता है.

यहां कुछ मुख्य कॉम्पोनेंट दिए गए हैं:

  • नोड: इनसे मॉडल के स्ट्रक्चर और क्रम के बारे में पता चलता है. हर नोड की अपनी पोज़िशन, रोटेशन, और स्केल हो सकती है.
  • मेश: यह स्ट्रक्चरल, 3D ज्यामिति होती है, जो 3D ऑब्जेक्ट का आकार बनाती है.
  • मटेरियल: ये मेश के विज़ुअल अपीयरेंस को तय करते हैं. जैसे, उनका रंग, खुरदरापन या वे रोशनी पर कैसी प्रतिक्रिया देते हैं.
  • टेक्सचर: यह एक इमेज ऐसेट होती है. जैसे, PNG फ़ाइल. इसका इस्तेमाल 3D मॉडल की सतह पर किया जा सकता है. इससे कस्टम पैटर्न, रंग, बारीकियां या अन्य विज़ुअल इफ़ेक्ट बनाए जा सकते हैं.
  • ऐनिमेशन: ये पहले से तय किए गए सीक्वेंस या ऐनिमेशन ट्रैक होते हैं. इनमें समय के साथ मूवमेंट दिखाने के लिए, अलग-अलग नोड और मेश में बदलाव शामिल होते हैं.

एक्सआर के लिए Jetpack Compose में, इन फ़ाइलों को SpatialGltfModel का इस्तेमाल करके रेंडर किया जाता है. साथ ही, SpatialGltfModelState का इस्तेमाल करके, फ़ाइल के लोड होने और ऐनिमेशन की स्थिति को ट्रैक किया जाता है. ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन में 3D मॉडल जोड़ना लेख पढ़ें.

3D मॉडल को ऐनिमेट करना

3D मॉडल में एम्बेड किए गए ऐनिमेशन हो सकते हैं. आंतरिक तौर पर, ऐनिमेशन में सैंपलर का इस्तेमाल किया जाता है. इससे किसी मूवमेंट की टाइमिंग और वैल्यू तय की जाती हैं. साथ ही, चैनल का इस्तेमाल किया जाता है. इससे उन मूवमेंट को अलग-अलग नोड और मेश से कनेक्ट किया जाता है. Jetpack XR SDK में, KHR_animation_pointer glTF एक्सटेंशन की मदद से बनाए गए स्केलेटल ऐनिमेशन और मटीरियल ऐनिमेशन काम करते हैं.

XR के लिए Compose का इस्तेमाल करके, किसी ऐनिमेशन को चलाने के लिए, 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()
    }
}

नोड में बदलाव करना: पोज़ और रोटेशन

किसी मॉडल के कुछ हिस्सों में बदलाव करने और उसकी प्रॉपर्टी बदलने के लिए, आपको SpatialGltfModelState का इस्तेमाल करके, gITF मॉडल के इंटरनल nodes को क्वेरी करना होगा. जैसे, रोटेशन या पोज़.

// 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 प्रॉपर्टी सेट करके, इसकी 3D पोज़िशन और रोटेशन को इसके पैरंट GltfModelNode के हिसाब से बदला जा सकता है. इसके अलावा, modelPose का इस्तेमाल करके, इसकी पोज़िशन को GltfModelEntity रूट के हिसाब से सेट किया जा सकता है. इसी तरह, localScale/modelScale का इस्तेमाल करके, मॉडल के स्केल को उसके पैरंट या रूट के हिसाब से बदला जा सकता है.

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

अपने 3D मॉडल के मटीरियल की प्रॉपर्टी को पसंद के मुताबिक बनाना

रनटाइम के दौरान, मटीरियल एट्रिब्यूट में बदलाव किया जा सकता है. इससे, उपयोगकर्ता के इनपुट या ऐप्लिकेशन की मौजूदा स्थिति के आधार पर, किसी ऑब्जेक्ट की बनावट को डाइनैमिक तरीके से बदला जा सकता है.

Jetpack XR में, इन मटीरियल को बनाने और उनमें बदलाव करने के लिए KhronosPbrMaterial और KhronosUnlitMaterial क्लास का इस्तेमाल किया जाता है. नाम से ही पता चलता है कि KhronosUnlitMaterials में रोशनी नहीं होती है. साथ ही, सीन की रोशनी का इन पर कोई असर नहीं पड़ता. KhronosPbrMaterial की मदद से, कई प्रॉपर्टी को पसंद के मुताबिक बनाया जा सकता है. जैसे, चमक का रंग, कोई ऑब्जेक्ट कितना मेटैलिक या खुरदरा है, और क्या वह रोशनी देता है.

Android XR में काम करने वाली हर प्रॉपर्टी और पसंद के मुताबिक बनाए जा सकने वाले पैरामीटर के बारे में ज़्यादा जानने के लिए, रेफ़रंस के लिए दस्तावेज़ देखें. इन प्रॉपर्टी के बारे में बेहतर तरीके से जानने के लिए, Khronos की शब्दावली देखें.

पहली इमेज. 3D मॉडल पर बेस कलर बदलने का उदाहरण.

अपने 3D मॉडल की मटीरियल प्रॉपर्टी को पसंद के मुताबिक बनाने के लिए, सबसे पहले 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
            )
        )
    }

अपने 3D मॉडल के लिए कस्टम टेक्सचर लोड करना

Texture एक इमेज ऐसेट होती है. इसे 3D मॉडल की सतह पर लागू किया जा सकता है, ताकि रंग, जानकारी या सतह की अन्य जानकारी दी जा सके. Jetpack XR Texture API की मदद से, इमेज डेटा लोड किया जा सकता है. जैसे, PNG फ़ाइलों को आपके ऐप्लिकेशन के /assets/ फ़ोल्डर से एसिंक्रोनस तरीके से लोड किया जा सकता है.

टेक्सचर लोड करते समय, TextureSampler तय किया जा सकता है. इससे यह कंट्रोल किया जा सकता है कि टेक्सचर कैसे रेंडर किया जाए. सैंपलर, फ़िल्टर करने की प्रॉपर्टी तय करता है. जैसे, टेक्सचर अपने मूल साइज़ से छोटा या बड़ा कब दिखेगा. साथ ही, रैपिंग मोड तय करता है. जैसे, स्टैंडर्ड [0, 1] रेंज से बाहर के कोऑर्डिनेट को कैसे हैंडल किया जाएगा. किसी 3D मॉडल पर विज़ुअल इफ़ेक्ट डालने के लिए, Texture को KhronosPbrMaterial के तौर पर असाइन करना ज़रूरी है.

दूसरी इमेज. 3D मॉडल के टेक्स्चर में बदलाव करने का उदाहरण.

कस्टम टेक्सचर लोड करने के लिए, आपको सबसे पहले इमेज फ़ाइल को अपने /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
    )
}

अपने 3D ऑब्जेक्ट में मटीरियल और टेक्सचर जोड़ना

नया मटीरियल या टेक्स्चर लागू करने के लिए, अपने glTF node पर मौजूद किसी नोड के लिए, मौजूदा मटीरियल को बदलें. इसके लिए, setMaterialOverride को कॉल करें:

node?.setMaterialOverride(
    material = material
)

नए बनाए गए मटीरियल को हटाने के लिए, पहले से बदले गए नोड पर clearMaterialOverride को कॉल करें. इससे आपका 3D मॉडल अपनी डिफ़ॉल्ट स्थिति में वापस आ जाता है:

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


glTF और glTF लोगो, Khronos Group Inc. के ट्रेडमार्क हैं.