HYPERSOLID: एक स्टूडियो साइट का कॉन्सेप्ट, जो पूरी की पूरी एक रियल-टाइम 3D सीन है

VITON¹³ कॉन्सेप्ट साइटें बनाता है ताकि उन क्षेत्रों में भी अपनी रेंज दिखा सके जहाँ अभी दिखाने लायक़ कोई क्लाइंट प्रोजेक्ट नहीं है। HYPERSOLID इनमें सबसे तकनीकी है: एक काल्पनिक क्रिएटिव-टेक्नोलॉजी स्टूडियो की साइट, जो इमर्सिव वेब, रियल-टाइम 3D, XR और इंस्टॉलेशन बनाता है। यह उस शैली की साइट है जिसमें पूरा पेज एक 3D सीन होता है और इंटरफ़ेस उसके ऊपर रखा टेक्स्ट। स्टूडियो, उसके प्रोजेक्ट और पता काल्पनिक हैं, और साइट अंग्रेज़ी में है।

हमने ख़ुद को जो ब्रीफ़ दिया, उसके दो हिस्से थे। सीन को ख़ुद स्टूडियो की बात कहनी थी: प्रतीक-चिह्न, वर्ल्ड, ट्रांज़िशन और संगीत, सब इसी साइट के लिए बने और विज़िटर के डिवाइस पर गणना से तैयार हों, किसी वीडियो से चलाए न जाएँ। और फिर भी यह इस्तेमाल करने लायक़ वेबसाइट रहे: कैनवस के ऊपर असली टेक्स्ट, कीबोर्ड से नेविगेशन, कम मोशन माँगने वालों के लिए शांत संस्करण और बिना WebGL वाले ब्राउज़रों के लिए स्थिर संस्करण।

एक पता, 12 व्यू: पाँच अध्यायों वाली स्क्रॉल कहानी, वर्क गैलरी, आठ प्रोजेक्ट पेज, About और Contact। हर व्यू का अपना हैश रूट है (#/work, #/work/aurora-dome वग़ैरह), ताकि उसका लिंक दिया जा सके और उसे सीधे खोला जा सके। प्रतीक-चिह्न एक टेसरैक्ट है, यानी चार आयामों वाला घन, जो 4D में घूमता है और हर फ़्रेम में 3D में प्रोजेक्ट होता है। उसके किनारे इंद्रधनुषी पतली परत वाली काँच की नलियाँ हैं, और चारों ओर GPU पर चलने वाले कण (डेस्कटॉप पर 7,000, फ़ोन पर 2,400) और वॉल्यूमेट्रिक रोशनी की किरणें हैं।

पाँच अध्याय हैं: स्टूडियो का परिचय, छह क्षमता-पैनलों में खुलता टेसरैक्ट, उसके किनारों से बनी सुरंग, काम, और संपर्क का न्योता। गैलरी आठ काल्पनिक प्रोजेक्ट का 3D घेरा है: प्लैनेटेरियम के लिए ऑरोरा, स्नीकर ड्रॉप के लिए एरीना गेम, खोई हुई आवाज़ों का WebXR संग्रहालय, एक फ़ेस्टिवल की जेनरेटिव पहचान, मौसम की मूर्ति, ख़ुशबू का कॉन्फ़िगरेटर, डेटा का समुद्र और होलोग्राफ़िक मेन्यू। हर कार्ड रेमार्चिंग से लाइव बनने वाला शेडर वर्ल्ड है। एक शेडर ट्रांज़िशन कार्ड को फ़ुल-स्क्रीन प्रोजेक्ट में ले जाता है, जिसमें विचार, भूमिका, स्टैक, तीन पैराग्राफ़, उसी वर्ल्ड से ली गई तीन तस्वीरें और अगले प्रोजेक्ट का लिंक है।

साउंडट्रैक में चार प्रोसीजरल ट्रैक हैं, जिन्हें Web Audio API बनाता है। जब तक विज़िटर ख़ुद साउंड चालू न करे, वह बंद रहता है, और ऑडियो का कोड तभी लोड होता है। About में पाँच पंक्तियों का घोषणापत्र और काम के चार चरण हैं; Contact में एक उदाहरण पता है, जिस पर लिखा है कि उसे कोई नहीं पढ़ता, और असली संदेशों के लिए लेखक के पोर्टफ़ोलियो का लिंक है।

साइट three.js 0.186 में लिखी गई है और esbuild से relative URL वाले एक स्टैटिक फ़ोल्डर में बनाई गई है, इसलिए यह किसी भी पाथ से चलती है; पोर्टफ़ोलियो पर यह /demos/hypersolid/ पर है। पोस्ट-प्रोसेसिंग में ब्लूम, क्रोमैटिक एबरेशन, डेप्थ ऑफ़ फ़ील्ड, रोशनी की किरणें, टोन मैपिंग, विनेट और ग्रेन जुड़ते हैं। डिवाइस के हिसाब से क्वालिटी के तीन स्तरों में से एक चुना जाता है: डेस्कटॉप पर पूरी सीन, फ़ोन और कमज़ोर मशीनों पर हल्की सीन, और WebGL न होने पर उसी सामग्री वाला स्थिर पेज। जब फ़्रेम धीमे होने लगते हैं, तो इंजन फ़्रेम छोड़ने के बजाय भारी वर्ल्ड का रिज़ॉल्यूशन घटा देता है, और टैब छिपा हो तो रेंडरिंग रुक जाती है।

हर व्यू में कैनवस के ऊपर असली HTML टेक्स्ट है: हेडिंग, लिंक और प्रोजेक्ट के टेक्स्ट, जिन्हें स्क्रीन रीडर पढ़ सकता है और कीबोर्ड से पहुँचा जा सकता है — Tab, Enter, Esc और गैलरी में ऐरो कीज़। कम मोशन की सेटिंग में कैमरे की उड़ानें धीमे क्रॉसफ़ेड बन जाती हैं। पहली बार जो दिखता है, वह HTML में ही लिखा प्रीलोडर है, जो किसी भी स्क्रिप्ट या स्टाइलशीट से पहले आता है; वह लोड हुई फ़ाइलें गिनते हुए लोगो को एक-एक किनारा करके बनाता है। बिल्ड में टेक्सचर, 3D मॉडल, वीडियो या ऑडियो की एक भी फ़ाइल नहीं है: बस कोड, दो वेरिएबल फ़ॉन्ट, आइकन और सोशल प्रीव्यू की एक इमेज।

अभी tarasovvitalii.com/demos/hypersolid/ पर एक काम करता कॉन्सेप्ट मौजूद है: 12 व्यू वाला एक पता, आठ शेडर वर्ल्ड और चार प्रोसीजरल ट्रैक, जो 23–24 सितंबर 2026 को बने। 24 सितंबर को इंजन के अपने फ़्रेम काउंटर को 14 स्थितियों में पढ़ा गया — पाँचों अध्याय, गैलरी और आठों वर्ल्ड — Apple M5 वाले MacBook पर headless Chrome में, 1600 × 1000 पर Retina स्केल के साथ: माध्यिका 60 fps रही और सबसे कम रीडिंग 55.7। मुख्य स्क्रिप्ट three.js सहित 0.77 MB की है, gzip में 0.21 MB; पूरा प्रकाशित फ़ोल्डर 1.1 MB का है।

उसी दिन लाइव पते पर हर डिवाइस के लिए तीन बार चलाए गए Lighthouse ने मोबाइल और डेस्कटॉप दोनों पर सुलभता 100 और बेहतरीन तरीक़े 100 दिए, और परफ़ॉर्मेंस मोबाइल पर 91 और डेस्कटॉप पर 94 (माध्यिका)। लोड होते समय पेज 0.4 MB ट्रांसफ़र करता है, CLS 0 है, और LCP मोबाइल पर 2.8 सेकंड और डेस्कटॉप पर 0.9 सेकंड है। SEO 63 जानबूझकर है: डेमो पर noindex लगा है, क्योंकि सर्च में पोर्टफ़ोलियो पर इसका केस पेज मिलना चाहिए।

HYPERSOLID एक कॉन्सेप्ट है जिसे VITON¹³ ने अपनी रेंज दिखाने के लिए बनाया, किसी क्लाइंट के ऑर्डर पर नहीं। स्टूडियो, उसके आठ प्रोजेक्ट और उदाहरण पता काल्पनिक हैं: साइट का कोई क्लाइंट, अपना डोमेन, उपयोगकर्ता, ट्रैफ़िक या पूछताछ नहीं है, और वह किसी क्लाइंट, पुरस्कार या प्रेस का दावा नहीं करती। इसमें न तो पूछताछ का फ़ॉर्म है और न ही एनालिटिक्स, इसलिए यह कन्वर्ज़न के बारे में कुछ साबित नहीं करती, और न ही यह कि हमने WebXR, कोई इंस्टॉलेशन या बाक़ी काल्पनिक प्रोजेक्ट लॉन्च किए हैं: वे सिर्फ़ इस साइट पर शेडर वर्ल्ड के रूप में मौजूद हैं।

फ़्रेम रेट नए Apple चिप वाली एक ही मशीन पर, headless Chrome में, एक ही दिन मापा गया। यह पुराने लैपटॉप या फ़ोन के बारे में कुछ नहीं बताता, और आंशिक रूप से इसलिए टिका रहता है क्योंकि इंजन भारी वर्ल्ड का रिज़ॉल्यूशन घटा देता है। Lighthouse लोडिंग मापता है, 3D सीन कितनी सहजता से चलती है यह नहीं, और उसका मोबाइल टेस्ट प्रोसेसर और नेटवर्क को धीमा करता है, ग्राफ़िक्स चिप को नहीं। डेमो को जानबूझकर सर्च से बाहर रखा गया है, इसलिए उसके पास दिखाने को कोई सर्च नतीजे नहीं हैं।

वेब स्टूडियो का पोर्टफोलियो कैसे जाँचें →