पेश है 1.1

आपके वेब पेज के 3D मॉडल, एचटीएमएल लिखने जितनी आसानी से काम करते हैं.

जो मेडली

रॉब कोचमैन

3D मॉडल पहले से कहीं ज़्यादा काम के हो गए हैं. खुदरा दुकानदार, ग्राहकों के घरों में स्टोर में खरीदारी का अनुभव देते हैं. संग्रहालय अपनी कलाकृतियों के 3D मॉडल बना रहे हैं, जो वेब पर सभी के लिए उपलब्ध हैं. किसी वेबसाइट पर 3D मॉडल को इस तरह से जोड़ना मुश्किल हो सकता है कि 3D टेक्नोलॉजी की जानकारी के बिना, उपयोगकर्ता को बेहतरीन अनुभव मिले. इसके अलावा, तीसरे पक्ष की साइट पर 3D कॉन्टेंट होस्ट करने की सुविधा भी मुश्किल हो सकती है. <model-viewer> वेब कॉम्पोनेंट, 2019 की शुरुआत में पेश किया गया. इसका मकसद, वेब पर 3D मॉडल डालना उतना ही आसान बनाना है जितना कि एचटीएमएल की कुछ लाइनें लिखना. तब से, टीम समुदाय के सुझावों और अनुरोधों पर काम कर रही है. इस काम का नतीजा <model-viewer> वर्शन 1.0 था, जो इस साल की शुरुआत में रिलीज़ किया गया था. अब हम <model-viewer> 1.1 की रिलीज़ का एलान कर रहे हैं. GitHub में रिलीज़ नोट पढ़े जा सकते हैं.

पिछले साल से नया क्या है?

वर्शन 1.1 में वेब पर ऑगमेंटेड रिएलिटी (एआर) के साथ काम करने की सुविधा, स्पीड और फ़िडेलिटी में सुधार करने के साथ-साथ ऐसी अन्य सुविधाएं भी शामिल हैं जिनका अक्सर अनुरोध किया जाता है.

ऑगमेंटेड रिएलिटी (एआर)

किसी खाली कैनवस पर 3D मॉडल देखना अच्छा होता है, लेकिन इसे अपनी जगह पर देखना और भी बेहतर है. पूरी तरह से ब्राउज़र में इस्तेमाल किए जा सकने वाले 3D और एआर (ऑगमेंटेड रिएलिटी) Chrome के लिए Android, WebXR का इस्तेमाल करके बढ़ी हुई वास्तविकता के साथ काम करता है .

तैयार हो जाने के बाद, <model-viewer> टैग में ar एट्रिब्यूट जोड़कर इसका इस्तेमाल किया जा सकता है. दूसरे एट्रिब्यूट से, WebXR एआर अनुभव को पसंद के मुताबिक बनाया जा सकता है, जैसा कि modelViewer.dev पर WebXR सैंपल में दिखाया गया है. नीचे दिए गए कोड सैंपल से पता चलता है कि यह कैसा दिख सकता है.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

यह इस हेडिंग के नीचे एम्बेड किए गए वीडियो की तरह दिखता है.

कैमरे के कंट्रोल

<model-viewer> अब व्यू के वर्चुअल कैमरे (दर्शक के नज़रिए से) पर पूरा कंट्रोल देता है. इसमें कैमरा टारगेट, ऑर्बिट (मॉडल के हिसाब से पोज़िशन), और फ़ील्ड ऑफ़ व्यू शामिल है. साथ ही, अपने-आप रोटेशन को चालू किया जा सकता है और उपयोगकर्ता इंटरैक्शन पर सीमाएं सेट की जा सकती हैं. उदाहरण के लिए, व्यू के ज़्यादा से ज़्यादा और कम से कम फ़ील्ड.

वीडियो के ऊपर टेक्स्ट, लिंक वगैरह

एचटीएमएल और सीएसएस का इस्तेमाल करके, अपने मॉडल के बारे में भी बताया जा सकता है. इस क्षमता का इस्तेमाल अक्सर मॉडल के हिस्सों में लेबल "अटैच" करने के लिए किया जाता है. यह मॉडल, मॉडल के साथ बदलाव करने पर भी, "अटैच" करने की सुविधा देता है. एनोटेशन को पसंद के मुताबिक बनाया जा सकता है. इनमें, एनोटेशन उनके दिखने और इस बात की सीमा भी शामिल है कि मॉडल ने उन्हें किस सीमा तक छिपाया है. एनोटेशन भी एआर (ऑगमेंटेड रिएलिटी) में काम करते हैं.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

ज़्यादा जानकारी के लिए, एनोटेशन के दस्तावेज़ वाला पेज देखें.

एडिटर

वर्शन 1.1 में <model-viewer> "एडिटिंग" टूल उपलब्ध कराया जाता है और उसे होस्ट किया जाता है. इससे अपने मॉडल की तुरंत झलक देखी जा सकती है. साथ ही, अलग-अलग <model-viewer> कॉन्फ़िगरेशन (जैसे, एक्सपोज़र और शैडो सॉफ़्टनेस) को आज़माया जा सकता है. साथ ही, पोस्टर इमेज जनरेट की जा सकती है, और इंटरैक्टिव तरीके से एनोटेशन के लिए कोऑर्डिनेट हासिल किए जा सकते हैं.

रेंडरिंग और परफ़ॉर्मेंस में सुधार

खास तौर पर, हाई डाइनैमिक रेंज (एचडीआर) वाले एनवायरमेंट में, रेंडरिंग की क्वालिटी में बहुत सुधार हुआ है. अब <model-viewer>, सीधे तौर पर रेंडर होने वाले पाथ का भी इस्तेमाल करता है. ऐसा तब होता है, जब सिर्फ़ एक <model-viewer> एलिमेंट व्यूपोर्ट में होता है, जिससे परफ़ॉर्मेंस बेहतर होती है (खास तौर पर Firefox पर). आखिर में, डाइनैमिक रूप से रेंडर रिज़ॉल्यूशन को बढ़ाने से फ़्रेम रेट बहुत बेहतर हुआ. नीचे दिए गए उदाहरण में, हाल ही में किए गए कुछ सुधार दिखाए गए हैं.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

स्थिरता

<model-viewer> के पहले मुख्य वर्शन के रिलीज़ होने के बाद, एपीआई की स्थिरता बेहद अहम है. इसलिए, वर्शन 2.0 रिलीज़ होने तक, नुकसान पहुंचा सकने वाले बदलावों से बचा जा सकेगा.

आगे क्या करना है?

<model-viewer> के वर्शन 1.0 में ऐसी सुविधाएं शामिल हैं जिनके लिए सबसे ज़्यादा अनुरोध किए गए हैं, लेकिन टीम को अभी तक पूरा नहीं किया गया है. और सुविधाएं जोड़ी जाएंगी, जैसे कि परफ़ॉर्मेंस, स्थिरता, दस्तावेज़, और टूल में सुधार. अगर आपके पास सुझाव हों, तो GitHub में समस्या दर्ज करें. साथ ही, पीआर का स्वागत है. आप Twitter पर <model-viewer> को फ़ॉलो करके और स्पेक्ट्रम पर कम्यूनिटी चैट देखकर जुड़े रह सकते हैं.