- वेब डेवलपर 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 की दिशा दिखाने वाला काम है
अभी कोई टिप्पणी नहीं है.