निस्संदेह सबसे शानदार 3D वेबसाइट्स में से एक
(bruno-simon.com)- वेब डेवलपर Bruno Simon द्वारा बनाया गया 3D पोर्टफोलियो साइट, जो उपयोगकर्ताओं को कार चलाकर एक्सप्लोर करने वाला एक इंटरैक्टिव वातावरण देता है
- Three.js पर निर्मित, और WebGL व WebGPU दोनों का उपयोग करके real-time 3D rendering लागू करता है
- साइट में achievement system, छिपे हुए elements, और visitor messages (Whisper) जैसी गेम-जैसी विशेषताएँ शामिल हैं
- पूरा code और Blender files GitHub पर MIT license के तहत उपलब्ध हैं, और संगीत CC0 license के तहत स्वतंत्र रूप से उपयोग किया जा सकता है
- वेब तकनीक और रचनात्मक interaction को जोड़ने वाला यह एक उदाहरण है, जो 3D web experience की संभावनाएँ दिखाता है
Bruno Simon के 3D पोर्टफोलियो का अवलोकन
- यह एक interactive portfolio के रूप में बना है, जहाँ वेब-आधारित 3D दुनिया को एक्सप्लोर करते हुए निर्माता के projects और experiments का अनुभव किया जा सकता है
- उपयोगकर्ता कार को नियंत्रित करके virtual space में घूम सकते हैं और विभिन्न objects के साथ interaction कर सकते हैं
- “Don’t break anything!” जैसी पंक्ति एक हल्का-फुल्का एक्सप्लोरेशन माहौल बनाती है
- WASD, arrow keys, space, enter जैसे keyboard controls और touch·gamepad input दोनों का समर्थन करता है
- movement, jump, brake, booster, horn, suspension जैसी कई control सुविधाएँ दी गई हैं
गेम-जैसे तत्व और achievement system
- साइट में 38 achievements हैं, जिन्हें खास actions के जरिए हासिल किया जा सकता है
- उदाहरण: “Traveler” (सभी क्षेत्रों का दौरा), “Cookie Clicker” (1000 cookies स्वीकार करना), “Flip of faith” (backflip सफल करना) आदि
- driving distance, weather experience, exploding boxes को तोड़ना जैसी विभिन्न शर्तें शामिल हैं
- achievements का समय और progress real-time में दिखाया जाता है, और server leaderboard सुविधा भी मौजूद है
- हालांकि, अगर server offline हो तो score save नहीं किया जा सकता
Whisper और community सुविधाएँ
- आगंतुक Whisper फीचर के जरिए छोटे messages छोड़ सकते हैं
- अधिकतम 30 अक्षर, और प्रति उपयोगकर्ता केवल एक message संभव है
- नया message जुड़ने पर पुराने messages हट जाते हैं
- गाली-गलौज निषिद्ध है और देश के अनुसार flag चुना जा सकता है
- यदि Whisper server offline हो, तो messaging सुविधा निष्क्रिय हो जाती है
तकनीकी स्टैक और open source संरचना
- 3D rendering को Three.js से लागू किया गया है
- Three.js, mr.doob द्वारा बनाई गई library है, और Sunag द्वारा जोड़ी गई TSL (Three.js Shading Language) की वजह से WebGL और WebGPU दोनों को सपोर्ट करती है
- physics engine के लिए Rapier, audio के लिए Howler.js, और fonts के लिए Amatic SC व Nunito का उपयोग किया गया है
- पूरा source code GitHub (brunosimon/folio-2025) पर उपलब्ध है, और इस पर MIT license लागू है
- इसमें Blender files भी शामिल हैं, इसलिए इन्हें स्वतंत्र रूप से modify और सीखने के लिए उपयोग किया जा सकता है
- सुरक्षा कारणों से server code सार्वजनिक नहीं है, लेकिन पोर्टफोलियो server के बिना भी काम करता है
संगीत और अतिरिक्त सामग्री
- बैकग्राउंड संगीत Kounine ने इस पोर्टफोलियो के लिए विशेष रूप से बनाया है
- इसे CC0 license के तहत जारी किया गया है, इसलिए इसे स्वतंत्र रूप से download और reuse किया जा सकता है
- यह GitHub repository में
/static/sounds/musicsपथ पर उपलब्ध है
- Three.js Journey नामक ऑनलाइन कोर्स के जरिए Three.js सीखने की सामग्री भी उपलब्ध कराई गई है
- इसमें Three.js का उपयोग करके 3D web बनाने की पूरी प्रक्रिया शामिल है
- YouTube Devlog series के जरिए पोर्टफोलियो के development process का रिकॉर्ड रखा गया है
- पूरा होने के बाद भी अंतिम वीडियो बनाना जारी है
समग्र महत्व
- Bruno Simon का पोर्टफोलियो web technology, game interaction, artistic expression के मेल का एक उदाहरण है
- open source और स्वतंत्र license के जरिए इसे सीखने और reuse किए जा सकने वाले 3D web project के रूप में इस्तेमाल किया जा सकता है
- Three.js ecosystem और WebGPU-आधारित rendering के वास्तविक implementation उदाहरण के रूप में यह अगली पीढ़ी के web graphics की दिशा दिखाने वाला काम है
4 टिप्पणियां
ये तो बस एक गेम ही है ..
कंपनी के मुख्य प्रोजेक्ट में
tjsइस्तेमाल करने की राय को नज़रअंदाज़ करकेbabylon.jsइस्तेमाल करने की बात करने वाले डेवलपमेंट डायरेक्टर साहब.. अपने फैसले की ज़िम्मेदारी लेना तो दूर, कंपनी और लोगों को खींचकर अलग ले गए और नई कंपनी खड़ी कर ली.. अच्छी तरह रह रहे हैं न?इसे टेस्ट करने के लिए मैंने थोड़ी देर के लिए खोलकर छोड़ा था.. मेरे M1 MacBook पर तो जैसे विमान उड़ने लगा। लेकिन यह वाकई शानदार है।
Hacker News की राय
1~2 बार refresh करने पर ठीक से खुल गया, और कुल मिलाकर शानदार काम है
बस अगर और ज़्यादा zoom out किया जा सकता तो अच्छा होता। Bruno को बधाई
हर social media को दर्शाने वाले छोटे मंदिर जैसे objects हैं, और गाड़ी से टकराने पर वे गिर जाते हैं, लेकिन links फिर भी clickable रहते हैं
portal में घुसने पर ‘अराजकता के देवता को बलि चढ़ाना’ counter बढ़ता है, यानी global state भी मौजूद है
कुल मिलाकर art style consistent है, और लगभग 5 मिनट explore करने के बाद यह काफ़ी polished लगा
लेकिन HN शीर्षक की तरह “सबसे शानदार 3D website” कहने से ज़्यादा, इसे बहुत अच्छी तरह बनाई गई portfolio site कहना सही होगा
पहले cereal box में मिलने वाले मुफ्त game Chex Quest के साथ भी ऐसा ही था
लेकिन अब मैंने site को लगभग 30 सेकंड देखा, “अच्छा है” कहा और तुरंत बंद कर दिया
शायद वजह (A) समय के मूल्य में बदलाव, (B) game immersion के मानक का बढ़ना, (C) पहले ही games पर बहुत ज़्यादा समय खर्च कर चुकना है
पिछले 10 सालों में countless three.js/babylon.js demos आए हैं, और यह लगभग top 10% स्तर का है
मज़ेदार है और quality भी ऊँची है, लेकिन नया कुछ नहीं है और जानकारी पहुँचाने की efficiency कम है
indie 3D games से तुलना करें तो completeness के मामले में भी अभी दूरी है
अगर threejs beginner की recommendation की कोई अहमियत है, तो मैं इसे ज़ोरदार तरीके से recommend करूँगा
लेकिन उंगली से drive करते समय iOS का long-press menu बार-बार खुल जाता था, जिससे immersion टूट जाता था
इसमें बारीक details और आनंद साफ़ महसूस हुआ, और मैंने अपने बेटे के साथ racing minigame खेलकर मज़ा लिया
मुझे हैरानी हुई कि 20 सेकंड का record बनाने वालों ने यह कैसे किया। क्या इसमें कोई speed boost है?
मेरा मानना है कि technology की असली value यह है कि “क्या इससे वह किया जा सकता है जो पहले नहीं किया जा सकता था”
उदाहरण के लिए, जब पाषाण युग के किसी इंसान को steel axe मिली होगी, तो महत्वपूर्ण चीज़ कुल्हाड़ी खुद नहीं बल्कि metallurgy थी
उसी तरह bitcoin से ज़्यादा महत्वपूर्ण cryptography है, और threejs से ज़्यादा महत्वपूर्ण यह है कि उससे क्या नया बनाया जा सकता है
निजी तौर पर मुझे लगता है कि threejs, react-three-fiber, shader आदि का उपयोग करके इससे कहीं ज़्यादा किया जा सकता है
मेरे लिए “शानदार” वही है जो दुनिया को अलग नज़र से देखने पर मजबूर कर दे
उदाहरण के तौर पर यह CodePen demo लिया जा सकता है
मैंने उम्मीद की थी कि 3D के इस्तेमाल को जायज़ ठहराने लायक navigation experience में innovation मिलेगी, लेकिन वही हिस्सा थोड़ा निराशाजनक रहा