3D वेबसाइट: कब फ़ायदेमंद है और उसे तेज़ कैसे रखें

संक्षिप्त उत्तर

3D वेबसाइट तब फ़ायदेमंद है जब विषय स्थानिक (spatial) हो या उसमें घूमने से वह बात समझ आए जो एक तस्वीर नहीं समझा सकती: ऐसा प्रोडक्ट जिसे आप घुमाकर दिखाना चाहते हैं, कोई जगह, कोई डेटासेट, कोई दुनिया। यह तब फ़ायदेमंद नहीं है जब यह सिर्फ़ किसी ऐसे पेज को सजाती है जिसे एक फ़ोटो या छोटा वीडियो उतनी ही अच्छी तरह समझा देता। दोनों ही स्थितियों में 3D लेयर की एक असली कीमत होती है, डाउनलोड साइज़, बैटरी और एक्सेसिबिलिटी में, इसलिए पेज को उसके बिना भी काम करने लायक बनाएँ और 3D को एक एन्हांसमेंट मानें।

यह गाइड हमारे अपने दो प्रोजेक्ट्स पर आधारित है: Janus Observatory, दस 3D दुनियाओं वाला एक ब्राउज़र अनुभव, और dardo.studio, जिसका होमपेज एक रियल-टाइम 3D सीन से खुलता है।

3D कब अपनी जगह कमाता है

• विज़िटर को कोई चीज़ एक से ज़्यादा कोण से देखनी हो: कोई प्रोडक्ट, कोई इमारत, कोई उपकरण।
• स्पेस ही कहानी है: कोई मैप, साइट प्लान, या अलग-अलग जगहों से होकर गुज़रती यात्रा।
• इंटरैक्शन किसी सिस्टम को टेक्स्ट से तेज़ समझाता है, जैसे परिदृश्यों की तुलना करना या डेटा एक्सप्लोर करना।
• ब्रांड अनुभव ही प्रोडक्ट है: लॉन्च, प्रदर्शनियाँ और कैंपेन, जहाँ माहौल मायने रखता है और विज़िटर एक्सप्लोर करने की उम्मीद रखते हैं।

कब नहीं

• 3D सीन वही दोहराता है जो एक हेडलाइन और एक इमेज पहले से कह रहे हैं।
• ज़्यादातर विज़िटर मोबाइल डेटा पर मिड-रेंज फ़ोन से आते हैं और उन्हें जल्दी से एक जानकारी चाहिए, जैसे कीमत, पता या खुलने का समय।
• लॉन्च के बाद टीम में कोई भी मॉडल, कोड और फ़ॉलबैक को मेंटेन नहीं करेगा।

3D, वीडियो या इमेज?

WebGL हर आधुनिक ब्राउज़र में चलता है। WebGPU नया है और कुछ कामों के लिए तेज़ है, लेकिन उसका सपोर्ट अब भी हर जगह एक जैसा नहीं है, इसलिए फ़ॉलबैक की योजना बनाएँ। dardo.studio का 3D एंट्रेंस पहले WebGPU आज़माता है और ज़रूरत पड़ने पर WebGL 2 पर लौट आता है, जबकि सर्विस, वर्क और कॉन्टैक्ट पेज सादे HTML हैं जो कभी किसी 3D सीन का इंतज़ार नहीं करते।

Janus Observatory बनाते हुए हमने क्या सीखा

Janus Observatory पृथ्वी के भविष्य के दस प्रकाशित परिदृश्यों को 17 अध्यायों की एक कहानी, एक एटलस और एक वेधशाला में बदलता है, जिसमें दस मौलिक low-poly दुनियाएँ और जोड़ों से हिलने-डुलने वाला एक एलियन खगोलशास्त्री है। यह Cloudflare Workers के फ़्री प्लान पर चलता है, जो एप्लिकेशन के साइज़ की सीमा तय करता है। प्रोजेक्ट की 27 सितंबर 2026 की रिलीज़ रिपोर्ट दर्ज करती है कि इसे तेज़ रखने के लिए क्या करना पड़ा:

• मॉडल कंप्रेस करें और फ़ॉलबैक रखें। 59 3D मॉडल 15.8 MB की जगह कुल 8.2 MB के gzip वेरिएंट के रूप में भेजे जाते हैं, यानी डाउनलोड करने के लिए 47.9% कम। जो ब्राउज़र इन्हें डीकंप्रेस नहीं कर सकते, उन्हें मूल फ़ाइलें मिलती हैं।
• मेन थ्रेड से बाहर डीकोड करें, फिर रुक जाएँ। Meshopt डीकोडिंग एक अकेले बैकग्राउंड वर्कर पर चलती है, जो पाँच सेकंड तक निष्क्रिय रहने के बाद बंद हो जाता है।
• JavaScript बजट तय करें और उसे लागू करें। होमपेज का शुरुआती JavaScript 256,000 बाइट के बजट के मुकाबले gzip के बाद 197,059 बाइट है, और बिल्ड इसकी जाँच करता है।
• रिक्वेस्ट की बाढ़ पर नज़र रखें। Next.js और OpenNext स्टैक में एक speculative prefetch लूप ने एक विफल ब्राउज़र ट्रेस में 11,704 रिक्वेस्ट भेजीं। समाधान था उन लिंक्स के लिए prefetching बंद करना, और अब टेस्ट शून्य speculative रिक्वेस्ट की शर्त रखते हैं।
• फ़्रेम रेट के पीछे भागने के बजाय रेज़ोल्यूशन तय करें। Canvas एक तय 1 से 1.5 device pixel ratio पर रेंडर होते हैं। रिपोर्ट ने एक पुराना फ़्रेम-रेट आँकड़ा भी वापस ले लिया जो रेज़ोल्यूशन घटाने पर निर्भर था, इसलिए हम कोई आँकड़ा नहीं बताते।

इसे 3D के बिना भी काम करने लायक बनाएँ

Janus का एक नियम है जो बाकी सब कुछ तय करता है: मुख्य अनुभव WebGL के बिना और AI के बिना भी काम करना चाहिए। सभी दस परिदृश्यों के रिकॉर्ड JavaScript बंद होने पर भी लोड होते हैं, कंट्रोल WebGL के बिना काम करते हैं, और कीबोर्ड से घुमाना, दिखने वाला फ़ोकस और reduced motion हर फ़ीचर के साथ ही बनाए गए। इसका एक्सेसिबिलिटी पेज कंट्रोल, नॉन-विज़ुअल विकल्प और ज्ञात सीमाएँ सूचीबद्ध करता है। लक्ष्य WCAG 2.2 लेवल AA है, जिसे Chromium, Firefox और WebKit में ऑटोमेटेड टेस्ट से जाँचा जाता है।

यह नियम सर्च इंजन और AI असिस्टेंट की भी मदद करता है: टेक्स्ट, नाम और डेटा HTML में रहते हैं, canvas के अंदर नहीं।

तेज़ और एक्सेसिबल 3D पेज के लिए चेकलिस्ट

1. पहले पेज को 3D के बिना लिखें। अगर HTML वर्शन समझ में नहीं आता, तो 3D उसे ठीक नहीं करेगा।
2. तय करें कि 3D क्या समझाता है, और जो कुछ सिर्फ़ प्रभावशाली दिखने के लिए है उसे हटा दें।
3. बजट तय करें: JavaScript, मॉडल के वज़न और टेक्सचर साइज़ के लिए, मॉडलिंग शुरू होने से पहले, और बिल्ड में उनकी जाँच करें।
4. मॉडल कंप्रेस करें meshoptimizer जैसे टूल से, उन्हें glTF फ़ॉर्मेट में सर्व करें, और जब आप DecompressionStream जैसी नई ब्राउज़र सुविधाओं पर निर्भर हों तो एक अनकंप्रेस्ड फ़ॉलबैक रखें।
5. सीन को कंटेंट के बाद लोड करें, और सिर्फ़ तब जब वह स्क्रीन पर आने वाला हो।
6. पिक्सेल रेशियो सीमित करें ताकि हाई-डेंसिटी स्क्रीन चार गुना पिक्सेल रेंडर न करें।
7. prefers-reduced-motion का सम्मान करें, हर इंटरैक्शन के लिए कीबोर्ड का रास्ता दें और हर canvas के पास उसका टेक्स्ट विकल्प रखें।
8. असली मिड-रेंज फ़ोन पर टेस्ट करें और एक से ज़्यादा ब्राउज़र इंजन में भी, फिर लॉन्च के बाद Core Web Vitals पर नज़र रखें।

इसकी लागत

3D डिज़ाइन और डेवलपमेंट के ऊपर मॉडलिंग, ऑप्टिमाइज़ेशन और टेस्टिंग का समय जोड़ता है, और फ़ॉलबैक काम का हिस्सा हैं, कोई अतिरिक्त चीज़ नहीं। जब हम इसका कोटेशन देते हैं, तो यह उन लागत कारकों में "कस्टम मोशन, 3D या इंटरैक्टिव डेटा" वाली पंक्ति के रूप में दिखता है जिनका ज़िक्र हम कोलंबिया में वेबसाइट बनवाने के खर्च पर अपनी गाइड में करते हैं।

Dardo 3D वेबसाइटें कैसे बनाता है

हम अपनी इंटरैक्टिव 3D वेबसाइट सेवा के ज़रिए 3D अनुभव डिज़ाइन और बिल्ड करते हैं, और हल्के मोशन और स्क्रॉल का काम क्रिएटिव डेवलपमेंट के ज़रिए करते हैं। Hyper के लिए हमने React Three Fiber के साथ एक स्क्रॉल-आधारित 3D कहानी बनाई, जो बिखरे हुए संकेतों को एक ग्राहक प्रोफ़ाइल में बदल देती है। अगर आपके पास कोई ऐसा आइडिया है जिसे समझने के लिए जगह चाहिए, तो हमें उसके बारे में बताएँ।