ब्राउज़र गेम्स: हमने Three.js और AI तस्वीरों से Relic Hunter कैसे बनाया

मैं चाहता था कि Relic Hunter: Temple Collapse असली मंदिर जैसा दिखे, वीडियो गेम वाली उसकी नक़ल जैसा नहीं। AI वाली इमेज में तराशा हुआ पत्थर था, मशालों की गर्म रोशनी थी और गहरी परछाइयाँ। मेरा पहला Three.js बिल्ड था डिब्बे, जिन पर एक ही भूरी बनावट बार-बार चिपकी थी।

यह कहानी है कि मैंने वह फ़ासला कैसे पाटा और AI से बने एक गलियारे को घूमने लायक़ भूलभुलैया कैसे बनाया। Relic Hunter एक मुफ़्त ब्राउज़र गेम है जो डेस्कटॉप और मोबाइल पर चलता है, बिना किसी डाउनलोड या इंस्टॉल के। इस सीधे-सादे लिंक के पीछे एक प्रोजेक्शन सिस्टम है, एक कस्टम शेडर है और कुछ व्यावहारिक समझौते हैं, जो एक सवाल के इर्द-गिर्द बने: वेब ब्राउज़र में सिनेमा जैसा 3D गेम जल्दी कैसे लोड कराएँ?

ब्राउज़र के लिए 3D गेम क्यों?

ब्राउज़र गेम्स का सबसे बड़ा फ़ायदा पहुँच है। खिलाड़ी लिंक पर क्लिक करता है और तुरंत खेलने लगता है। जिज्ञासा और पहली दौड़ के बीच न कोई इंस्टॉलर है, न ऐप स्टोर का पेज, न अकाउंट। इसीलिए मुफ़्त ब्राउज़र गेम्स ढूँढना, आज़माना और दूसरों को भेजना आसान होता है।

दिक़्क़त यह है कि हर अतिरिक्त मॉडल, टेक्सचर और एनिमेशन खेलने से पहले का इंतज़ार बढ़ाता है। इसलिए Relic Hunter को ऐसा विज़ुअल सिस्टम चाहिए था जो कम से कम एसेट्स को छह लेवल में दोबारा इस्तेमाल करे, फिर भी हर गलियारा कॉपी-पेस्ट न लगे।

विज़ुअल प्रयोग के नीचे छिपा गेम

Relic Hunter भूलभुलैया जैसा रंगा हुआ अंतहीन सीधा गलियारा नहीं है। इसकी छह परीक्षाओं में से हर एक एक बनी-बनाई भूलभुलैया से बनी है, जिसमें चौराहे हैं, दूसरे रास्ते हैं और सचमुच के बंद रास्ते। दौड़ शुरू होने से पहले नक़्शा देखने के लिए आपको कुछ सेकंड मिलते हैं। टाइमर चालू होते ही आपको रास्ता याद रखना है, हर चौराहे पर सही मोड़ लेना है और चलते रहना है।

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

तीन साझा जानें पूरे अभियान में चलती हैं। ख़तरे एक-एक करके आते हैं, फिर एक-दूसरे पर चढ़ने लगते हैं: झूलती धारों के नीचे झुकना है, गिरे बीम और टूटे फ़र्श के ऊपर से कूदना है, और तराशे हुए सिंह के मुँह रास्ते पर आग उगलते हैं। पाँचवीं परीक्षा में Mira या Vikram आख़िरकार स्यमंतक मणि, सूर्य की मणि, हासिल करता है। छठी है भाग निकलना, पीछे बिखरते मंदिर के साथ।

आम 3D टेक्सचर ग़लत क्यों लग रहे थे

विज़ुअल दिशा की शुरुआत तराशे पत्थर के गलियारों, गर्म मशाल की रोशनी और गहरी परछाई वाली AI तस्वीरों से हुई। स्थिर तस्वीर के रूप में वे यक़ीन दिलाती थीं। पहला खेलने लायक़ वर्ज़न नहीं। पत्थर को आम टेक्सचर की तरह दोहराने से टाइल लगे डिब्बे बन गए और स्रोत इमेज की सबसे अहम चीज़, उसकी रोशनी, हाथ से निकल गई।

तस्वीर असली इसलिए लगती है कि उसमें रोशनी असली होती है: दीवार और फ़र्श के मिलने पर नरम परछाई, मशाल के आसपास चमक और हॉल के दूसरे सिरे का अँधेरा। दोहराए जा सकने वाले टेक्सचर को जानबूझकर सपाट बनाया जाता है, ताकि वह बिना जोड़ के टाइल हो सके। इमेज दोहराने के लिए मैंने रोशनी हटाई तो उसी के साथ वह चीज़ भी हट गई जो उसे असली बनाती थी।

Tour Into the Picture: इमेज को 3D पर प्रोजेक्ट करना

हल कंप्यूटर ग्राफ़िक्स की एक तकनीक से आया, जिसका नाम है Tour Into the Picture, यानी TIP। मान लीजिए स्रोत इमेज किसी असली कैमरे से खींची गई थी। मैं Three.js के सीन में उसी जगह एक वर्चुअल कैमरा रखता हूँ, उसे मेल खाता व्यू देता हूँ और इमेज को फ़र्श, दीवार और छत की सीधी-सादी ज्यामिति पर स्लाइड प्रोजेक्टर की तरह प्रोजेक्ट कर देता हूँ।

उस नज़रिए के आसपास गलियारे में मूल इमेज की परछाइयाँ, चमक और गहराई बनी रहती हैं, और वह ऐसी जगह की तरह भी काम करता है जिसमें खिलाड़ी चल सके। शेडर में सतह का हर बिंदु पूछता है कि प्रोजेक्टर की इमेज में मैं कहाँ पड़ता हूँ, और वहीं का रंग उठा लेता है। पहला कामयाब प्रोटोटाइप ऐसा लगा जैसे किसी पेंटिंग के अंदर चल रहे हों।

खिलाड़ी के हिलते ही सामने आईं पाँच दिक़्क़तें

1. खिंचाव: खिलाड़ी प्रोजेक्टर से जितना दूर जाता, इमेज उतनी बिगड़ती थी।
2. खाली जगहें: किनारे के खुले रास्तों और स्रोत कैमरे की नज़र से बाहर वाली दूर की सतहों पर कोई प्रोजेक्ट किया हुआ ब्योरा था ही नहीं।
3. झिलमिलाहट: चौराहों पर प्रोजेक्शन की दिशा बदलने से दीवारें उछलती या झिलमिलाती थीं।
4. धुँधली लकीर: फ़र्श और बग़ल की दीवारों पर स्रोत इमेज का एक पिक्सल स्क्रीन के कई पिक्सल में खिंच जाता था।
5. इमेज में पकी रोशनी: प्रोजेक्ट की गई इमेज में रोशनी पहले से थी, इसलिए आम रीयल-टाइम मशालें उसे दोबारा रोशन नहीं कर सकती थीं।

स्क्रीनशॉट में ये दिक़्क़तें आसानी से छूट जाती थीं, पर दौड़ते वक़्त अनदेखी करना नामुमकिन था। इससे ग्राफ़िक्स परखने का मेरा तरीक़ा बदल गया: हर सुधार को हरकत, मुड़ने और वापस लौटने में भी टिकना था, सिर्फ़ चुनकर निकाले गए किसी अच्छे स्टिल फ़्रेम में नहीं।

जो हाइब्रिड सिस्टम आख़िर में बना

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

मुश्किल वास्तुशिल्प बिंदुओं पर असली ज्यामिति इस्तेमाल होती है। आख़िरी दीवारों पर तराशे हुए पैनल लगते हैं, ताकि वे गलियारे के अनंत तक चलते रहने जैसी न लगें। बग़ल के खुले रास्तों के लिए असली खुले हिस्से वाले मेहराब के पैनल हैं, जिससे हर मोड़ साफ़ पढ़ा जाता है। जो सतहें सबसे अच्छे प्रोजेक्शन के दायरे से बाहर हैं, वे काले की जगह पत्थर पर लौट आती हैं।

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

किरदारों और जालों को अलग रखना

गलियारा मंच है। Mira, Vikram, झूलती धारें, आग उगलते सिंह के मुँह, गिरे बीम और टूटे फ़र्श अलग इंटरैक्टिव परतें हैं। खिलाड़ी जिस चीज़ से टकरा सकता है, बच सकता है या जिसे हिलते देखता है, उसका अपना ऑब्जेक्ट होना चाहिए। ख़तरे को गलियारे की इमेज में ही पका दें तो इंटरैक्शन सपाट लगता है।

हिलने वाले हिस्सों की पाइपलाइन अलग है: ChatGPT से बनी साफ़ स्टिल तस्वीरें, Grok से बने छोटे एनिमेटेड क्लिप, और Three.js सीन में रखने से पहले ग्रीन-स्क्रीन हटाना। दुनिया और उसकी हिलती चीज़ों को अलग रखने से दोनों को ट्यून करना आसान हुआ।

वेब ब्राउज़र गेम्स के लिए इस तरीक़े का मतलब

आज के वेब ब्राउज़र गेम्स एक आम पेज के अंदर रीयल-टाइम 3D ग्राफ़िक्स, कस्टम शेडर, एनिमेशन, साउंड और तुरंत जवाब देने वाला इनपुट दे सकते हैं। Relic Hunter यह ब्योरेवार 3D माहौल की भारी लाइब्रेरी के बिना करता है: एक मुख्य गलियारे की इमेज, एक मेहराब का पैनल और पत्थर के कुछ टेक्सचर।

नतीजा एक कॉम्पैक्ट Three.js गेम है, जिसके गलियारे AI आर्टवर्क का मूड तब भी बनाए रखते हैं जब खिलाड़ी दौड़ता, मुड़ता और लौटता है। बिना डाउनलोड वाले गेम्स के लिए एसेट्स की यह किफ़ायत मायने रखती है: फ़ाइलें छोटी हों तो पेज खोलने और असल में खेलने के बीच का फ़ासला भी घटता है।

Relic Hunter ऑनलाइन कैसे खेलें

1. अपने ब्राउज़र में Relic Hunter: Temple Collapse खोलिए।
2. अपने रेलिक हंटर के रूप में Mira या Vikram चुनिए।
3. हर परीक्षा शुरू होने से पहले नक़्शा देख लीजिए।
4. चौराहों पर मुड़िए, जालों के पास से कूदकर या झुककर निकलिए, और समय ख़त्म होने से पहले निकास पर पहुँचिए।
5. स्यमंतक मणि हासिल कीजिए और आख़िरी ढहने से बच निकलिए।

अगर आप कोई मुफ़्त 3D ब्राउज़र गेम, तेज़ मंदिर भूलभुलैया रनर या ऐसा मुफ़्त ऑनलाइन ब्राउज़र गेम ढूँढ रहे हैं जो बिना अकाउंट के शुरू हो जाए, तो एक दौड़ शुरू कीजिए और देखिए कि क्या आप सूर्य की मणि को उजाले तक वापस ला पाते हैं।

Relic Hunter अभी खेलिए। मुफ़्त है, ऑनलाइन है और डाउनलोड नहीं करना पड़ता। · और ब्राउज़र गेम्स देखिए · बिना डाउनलोड वाले फ्री गेम्स के बारे में पढ़िए।