👩🏾‍🎓 🌧️ 🕉️ HTML और सीएसएस पागलपन [अनुवाद] 👨🏾‍🎨 ⛹🏻 🌟

या HTML, CSS और JS का उपयोग करके 3D दुनिया बनाएं

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

डेमो Demo2

3D ऑब्जेक्ट बनाएं

आधुनिक 3 डी इंजन में, वस्तुओं को बिंदुओं (या वैक्टर) के एक सेट के रूप में संग्रहीत किया जाता है, प्रत्येक में 3 डी स्थान में अपनी स्थिति घोषित करने के लिए एक एक्स, वाई और जेड मूल्य होता है। एक वर्ग, उदाहरण के लिए, 4 वैक्टर द्वारा निर्धारित किया जाएगा, प्रत्येक कोने के लिए एक। प्रत्येक वैक्टर को एक्स, वाई और जेड एक्सिस के साथ स्थानांतरित करते हुए, व्यक्तिगत रूप से हेरफेर किया जा सकता है, जिससे स्क्वायर अलग-अलग आकृतियों में खिंचाव कर सकता है। 3D इंजन विज़ुअलाइज़र आपके 2 डी स्क्रीन पर 3 डी ऑब्जेक्ट खींचने के लिए इन वैक्टर और बहुत सारे स्मार्ट गणित का उपयोग करेगा।
CSS ट्रांसफ़ॉर्म के साथ, यह दूसरा तरीका है। हम बिंदुओं के एक सेट के रूप में मनमाना आकार नहीं सेट कर सकते हैं, हमारे हाथ एचटीएमएल तत्वों से बंधे हैं जो लगातार वर्गाकार होते हैं और इनमें दो आयामी गुण होते हैं, जैसे कि शीर्ष, बाएँ, चौड़ाई और ऊँचाई को उनके स्थान और आकारों को इंगित करने के लिए। लेकिन कई मायनों में, यह 3 डी के साथ काम करना बहुत आसान बनाता है, क्योंकि इस मामले में कोई जटिल गणित नहीं है - आपको कुल्हाड़ियों के चारों ओर तत्व को घुमाने के लिए सीएसएस परिवर्तन लागू करने की आवश्यकता है और आप कर रहे हैं!
वर्गों से ऑब्जेक्ट बनाना पहली बार में एक सीमित विधि की तरह लग सकता है, लेकिन आप उनमें से एक अद्भुत राशि बना सकते हैं, खासकर जब आप पीएनजी अल्फा चैनलों के साथ खेलना शुरू करते हैं। नीचे दिए गए आंकड़े में आप देख सकते हैं कि बैरल और पहिया के शीर्ष गोल दिखाई देते हैं, इस तथ्य के बावजूद कि वे वर्गों से बने हैं।

3 डी वस्तुओं का उदाहरण पूरी तरह से वर्ग <div> तत्वों से बनाया गया है

सभी ऑब्जेक्ट्स जावास्क्रिप्ट का उपयोग करके बनाए जाते हैं, आदिम ज्यामिति बनाने के लिए तरीकों का एक सेट का उपयोग करते हैं। बनाई जाने वाली सबसे सरल वस्तु एक विमान है, जो अनिवार्य रूप से एक साधारण <div> तत्व है। विमानों को सेट में जोड़ा जा सकता है, रैपर <div> उनके ऊपर पूरी वस्तु को एक इकाई के रूप में घूमने और स्थानांतरित करने की अनुमति देता है। एक पाइप अपने कुल्हाड़ियों के चारों ओर घुमाए गए विमानों का एक सेट है, और एक बैरल शीर्ष पर एक विमान और नीचे एक विमान के साथ एक पाइप है।

यह उदाहरण दिखाता है कि व्यवहार में क्या कहा गया है, जेएस टैब पर एक नज़र डालें।

प्रकाश

इस परियोजना में प्रकाश सबसे कठिन चुनौती थी। मैं झूठ नहीं बोलता, गणित ने मुझे लगभग तोड़ दिया, लेकिन यह इसके लायक था क्योंकि प्रकाश ने एक सपाट और बेजान जगह में गहराई और वातावरण की एक अविश्वसनीय भावना लाई।

बिना रोशनी के एक कमरे का स्क्रीनशॉट

जैसा कि मैंने कहा, नियमित 3 डी इंजन में एक वस्तु को वैक्टर की एक श्रृंखला द्वारा परिभाषित किया गया है। प्रकाश की गणना करने के लिए, इन वैक्टरों का उपयोग "सामान्य" की गणना के लिए किया जाता है जिसका उपयोग वस्तु की सतह के केंद्र बिंदु से परावर्तित प्रकाश की मात्रा को निर्धारित करने के लिए किया जा सकता है।
जब आप HTML तत्वों का उपयोग करके 3D ऑब्जेक्ट बनाते हैं, तो यह समस्या होती है, क्योंकि ये वैक्टर मौजूद नहीं हैं। तो, पहली बाधा सीएसएस का उपयोग करके रूपांतरित किए गए तत्व के लिए चार वैक्टर (प्रत्येक कोने के लिए एक) की गणना के लिए तरीकों का एक सेट लिख रहा है, जिसके द्वारा प्रकाश की गणना की जा सकती है। जैसे ही मैंने यह निर्धारित किया, मैंने तुरंत वस्तुओं को रोशन करने के विभिन्न तरीकों के साथ प्रयोग करना शुरू कर दिया।

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

धीरे-धीरे छायांकन का उदाहरण

ऊपर की छवि पर सबसे गहरा प्रभाव प्राप्त करने के लिए, मैंने निम्नलिखित शैलियों को लागू किया:

element { background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url("texture.png"); }

व्यवहार में, इन शैलियों को पहले से घोषित नहीं किया जाता है, उन्हें गतिशील रूप से गणना की जाती है और जावास्क्रिप्ट का उपयोग करते हुए तत्व की शैली विशेषता पर सीधे लागू किया जाता है।
इस तकनीक को फ्लैट शेडिंग कहा जाता है। यह एक प्रभावी छायांकन विधि है, लेकिन इसका परिणाम यह है कि पूरी सतह का एक ही विवरण है। उदाहरण के लिए, यदि मैं एक 3 डी दीवार बनाता हूं जो एक निश्चित दूरी पर दूर जाती है, तो इसे पूरे लंबाई में समान रूप से छायांकित किया जाएगा। मैं कुछ अधिक यथार्थवादी करना चाहता था।

प्रकाश का दूसरा तूफान

वास्तविक प्रकाश व्यवस्था का अनुकरण करने के लिए, सतहों को प्रकाश स्रोत से दूर करने की आवश्यकता होती है, और अगर हमारे पास कई ऐसे स्रोत हैं जो सतह पर गिर रहे हैं, तो इसे तदनुसार छायांकित किया जाना चाहिए।
एक फ्लैट छायांकित सतह के लिए, मुझे केवल केंद्र बिंदु पर प्रकाश घटना की गणना करने की आवश्यकता थी, लेकिन अब मुझे सतह पर विभिन्न बिंदुओं पर प्रकाश को मापने की आवश्यकता है ताकि यह निर्धारित किया जा सके कि प्रत्येक बिंदु को कितना प्रकाश या छाया होना चाहिए। गणित को इस प्रकाश जानकारी के निर्माण की उसी तरह आवश्यकता थी जैसे कि विमान की छायांकन के मामले में। मैंने अपने पिछले प्रयास के रैखिक-ढाल के स्थान पर इसका उपयोग करने के लिए प्रकाश जानकारी से एक रेडियल-ग्रेडिएंट बनाने की कोशिश की। परिणाम अधिक यथार्थवादी थे, लेकिन कई प्रकाश स्रोत अभी भी एक समस्या थे, क्योंकि एक-दूसरे के ऊपर कई ग्रेडिएंट्स बिछाने से धीरे-धीरे अंतर्निहित बनावट को अस्पष्ट किया जाता है। यदि सीएसएस समर्थित छवि सम्मिश्रण और सम्मिश्रण मोड (सम्मिश्रण रास्ते में है), तो रेडियल ग्रेडिएंट्स काम करना संभव होगा।
समाधान के लिए <कैनवास> तत्व का उपयोग प्रोग्रामेटिक रूप से एक नई बनावट उत्पन्न करने के लिए किया गया था जिसका उपयोग प्रकाश मानचित्र के रूप में किया जा सकता है। गणना की गई प्रकाश जानकारी का उपयोग करते हुए, मैं ब्लैक पिक्सल्स के सेट को आकर्षित करने में सक्षम था, प्रत्येक अल्फा चैनल को प्रकाश की मात्रा के आधार पर बदल रहा था जो किसी दिए गए बिंदु पर सतह पर गिरना चाहिए।
अंत में, मैंने छवि को एन्कोड करने के लिए कैनवस .toDataURL () पद्धति का उपयोग किया, जिसका उपयोग मैंने अपने पहले प्रयोग के रैखिक-ढाल के बजाय किया। प्रत्येक सतह के लिए इस प्रक्रिया को दोहराते हुए, मैंने प्रयोग के पूरे स्थान के लिए यथार्थवादी प्रकाश के प्रभाव को पुन: पेश किया।
इस तरह के बनावट की गणना और ड्राइंग करना कठिन काम है। छत और तहखाने का फर्श, दोनों का आकार 1000x2000 पिक्सल है, इस पूरे क्षेत्र को कवर करने के लिए एक बनावट का निर्माण करना बहुत व्यावहारिक नहीं है, इसलिए मैं केवल हर 12 पिक्सल में प्रकाश को मापता हूं, जो सतह को कवर करने वाले सतह की तुलना में 12 गुना छोटा प्रकाश पैदा करता है।
बैकग्राउंड-साइज़ सेट करना : 100% ब्राउज़र को बिलिनियर (या समान) फ़िल्टरिंग का उपयोग करके बनावट को स्केल करने के लिए मजबूर करता है, इसलिए लाइट मैप में वह सारी सतह शामिल होती है जिसकी हमें ज़रूरत होती है। स्केलिंग प्रभाव एक परिणाम बनाता है जो प्रत्येक पिक्सेल के लिए उत्पन्न प्रकाश मानचित्र के लगभग समान है।

पृष्ठभूमि के लिए एक शैली नियम का एक उदाहरण, जिसका उपयोग प्रकाश मानचित्र और सतह को सेट करने के लिए किया जाता है, कुछ इस तरह दिखता है:

 element { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAyCAYAAAAqRkmtAAACiUlEQVRoQ9VZa0vEQAy8+/8/yPcbFVFEEREREcS/4eNSmpKmmU12t/XYD6W3beGmk8kk2a5Xq9XR5vjeHD+B47d/xjrTtdSxud3dl+d+OTmt+yvDmX4c9n8eAbtVoAeCyRRYBknMb4XRfRVyC6wEqYFK0Cj0HG4OfSr8HG56ZhR6AhoJO2u4JPxInxK4BDYCyYu9YOglk/xbsymvy8RhpjlrNEArqWRCrWlBQEsYRWC98EfAmlm/W8FoBKzWp2aT11KbZugJ6NKMzpJMFlANPJX1Wpdyjdj0NKozv9PoTjD0pRYVDb2b9VGgVtZHNKrLpuelEzb5DRhoRKel1alGox1wGfpmgFIYPbCIUa+MRiuTpdMJox7QrSdTM/bUlOFzZ7SERqM+6pbQZpqSZtq8ZhrnZkaRZoa7ZsblZjYgjgM1vmYClYOd1+LBnpRM9iQItLTFQ/0o6vLhXH9aCTTaOWnAehp1K9NZP4rUbufo2UnP9ajV82b6Tg70FudiZtKtHmrtoiOIpU9PpzD0Fwoo2n6sbZo9gJJZcwq9DGi0JpFyhjuoU7pxtSCjtXP9aDfv2gFaOoJofaKst5JJ+ukwM91kMirtyMp0a5MsOtyZicSobxMaLd3K0dZksZlt+HcZoUdsImZTY0g20PtA6OeypohFQR99MCqTDnnqA0NKp7My+ggYjerz34A+LQRUsolCrnWaNPznSqCoeyo1e/bV0T4+LV4KgCJwJAPNZI41WfV+MPzXAFDLluY2e83kqDoR2jcD6ByJhJoRrUtea31OgL4roCU9aORDWMRDIav0Fh890JR3lnz/1GVU1nsGlJX1n4UaRQkV6ZpQ+Uwm05ej0TkSycp8i2Hoo3+utUtvDhk9pwAAAABJRU5ErkJggg==") 0 0 / 100% 100%, url("texture.png") 0 0 / auto auto; } / PNG; बेस 64, iVBORw0KGgoAAAANSUhEUgAAACoAAAAyCAYAAAAqRkmtAAACiUlEQVRoQ9VZa0vEQAy8 + / element { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAyCAYAAAAqRkmtAAACiUlEQVRoQ9VZa0vEQAy8+/8/yPcbFVFEEREREcS/4eNSmpKmmU12t/XYD6W3beGmk8kk2a5Xq9XR5vjeHD+B47d/xjrTtdSxud3dl+d+OTmt+yvDmX4c9n8eAbtVoAeCyRRYBknMb4XRfRVyC6wEqYFK0Cj0HG4OfSr8HG56ZhR6AhoJO2u4JPxInxK4BDYCyYu9YOglk/xbsymvy8RhpjlrNEArqWRCrWlBQEsYRWC98EfAmlm/W8FoBKzWp2aT11KbZugJ6NKMzpJMFlANPJX1Wpdyjdj0NKozv9PoTjD0pRYVDb2b9VGgVtZHNKrLpuelEzb5DRhoRKel1alGox1wGfpmgFIYPbCIUa+MRiuTpdMJox7QrSdTM/bUlOFzZ7SERqM+6pbQZpqSZtq8ZhrnZkaRZoa7ZsblZjYgjgM1vmYClYOd1+LBnpRM9iQItLTFQ/0o6vLhXH9aCTTaOWnAehp1K9NZP4rUbufo2UnP9ajV82b6Tg70FudiZtKtHmrtoiOIpU9PpzD0Fwoo2n6sbZo9gJJZcwq9DGi0JpFyhjuoU7pxtSCjtXP9aDfv2gFaOoJofaKst5JJ+ukwM91kMirtyMp0a5MsOtyZicSobxMaLd3K0dZksZlt+HcZoUdsImZTY0g20PtA6OeypohFQR99MCqTDnnqA0NKp7My+ggYjerz34A+LQRUsolCrnWaNPznSqCoeyo1e/bV0T4+LV4KgCJwJAPNZI41WfV+MPzXAFDLluY2e83kqDoR2jcD6ByJhJoRrUtea31OgL4roCU9aORDWMRDIav0Fh890JR3lnz/1GVU1nsGlJX1n4UaRQkV6ZpQ+Uwm05ej0TkSycp8i2Hoo3+utUtvDhk9pwAAAABJRU5ErkJggg==") 0 0 / 100% 100%, url("texture.png") 0 0 / auto auto; } / xjrTtdSxud3dl + d + OTmt + yvDmX4c9n8eAbtVoAeCyRRYBknMb4XRfRVyC6wEqYFK0Cj0HG4OfSr8HG56ZhR6AhoJO2u4JPxInxK4BDYCyYu9YOglk / xbsymvy8RhpjlrNEArqWRCrWlBQEsYRWC98EfAmlm / W8FoBKzWp2aT11KbZugJ6NKMzpJMFlANPJX1Wpdyjdj0NKozv9PoTjD0pRYVDb2b9VGgVtZHNKrLpuelEzb5DRhoRKel1alGox1wGfpmgFIYPbCIUa + MRiuTpdMJox7QrSdTM / bUlOFzZ7SERqM + 6pbQZpqSZtq8ZhrnZkaRZoa7ZsblZjYgjgM1vmYClYOd1 + LBnpRM9iQItLTFQ / 0o6vLhXH9aCTTaOWnAehp1K9NZP4rUbufo2UnP9ajV82b6Tg70FudiZtKtHmrtoiOIpU9PpzD0Fwoo2n6sbZo9gJJZcwq9DGi0JpFyhjuoU7pxtSCjtXP9aDfv2gFaOoJofaKst5JJ + ukwM91kMirtyMp0a5MsOtyZicSobxMaLd3K0dZksZlt + HcZoUdsImZTY0g20PtA6OeypohFQR99MCqTDnnqA0NKp7My element { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAyCAYAAAAqRkmtAAACiUlEQVRoQ9VZa0vEQAy8+/8/yPcbFVFEEREREcS/4eNSmpKmmU12t/XYD6W3beGmk8kk2a5Xq9XR5vjeHD+B47d/xjrTtdSxud3dl+d+OTmt+yvDmX4c9n8eAbtVoAeCyRRYBknMb4XRfRVyC6wEqYFK0Cj0HG4OfSr8HG56ZhR6AhoJO2u4JPxInxK4BDYCyYu9YOglk/xbsymvy8RhpjlrNEArqWRCrWlBQEsYRWC98EfAmlm/W8FoBKzWp2aT11KbZugJ6NKMzpJMFlANPJX1Wpdyjdj0NKozv9PoTjD0pRYVDb2b9VGgVtZHNKrLpuelEzb5DRhoRKel1alGox1wGfpmgFIYPbCIUa+MRiuTpdMJox7QrSdTM/bUlOFzZ7SERqM+6pbQZpqSZtq8ZhrnZkaRZoa7ZsblZjYgjgM1vmYClYOd1+LBnpRM9iQItLTFQ/0o6vLhXH9aCTTaOWnAehp1K9NZP4rUbufo2UnP9ajV82b6Tg70FudiZtKtHmrtoiOIpU9PpzD0Fwoo2n6sbZo9gJJZcwq9DGi0JpFyhjuoU7pxtSCjtXP9aDfv2gFaOoJofaKst5JJ+ukwM91kMirtyMp0a5MsOtyZicSobxMaLd3K0dZksZlt+HcZoUdsImZTY0g20PtA6OeypohFQR99MCqTDnnqA0NKp7My+ggYjerz34A+LQRUsolCrnWaNPznSqCoeyo1e/bV0T4+LV4KgCJwJAPNZI41WfV+MPzXAFDLluY2e83kqDoR2jcD6ByJhJoRrUtea31OgL4roCU9aORDWMRDIav0Fh890JR3lnz/1GVU1nsGlJX1n4UaRQkV6ZpQ+Uwm05ej0TkSycp8i2Hoo3+utUtvDhk9pwAAAABJRU5ErkJggg==") 0 0 / 100% 100%, url("texture.png") 0 0 / auto auto; } + MPzXAFDLluY2e83kqDoR2jcD6ByJhJoRrUtea31OgL4roCU9aORDWMRDIav0Fh890JR3lnz / 1GVU1nsGlJX1n4UaRQkV6ZpQ + Uwm05ej0TkSycp8i2Hoo3 + utUtvDhk9pwAAAABJRU5ErkJggg == ") element { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAyCAYAAAAqRkmtAAACiUlEQVRoQ9VZa0vEQAy8+/8/yPcbFVFEEREREcS/4eNSmpKmmU12t/XYD6W3beGmk8kk2a5Xq9XR5vjeHD+B47d/xjrTtdSxud3dl+d+OTmt+yvDmX4c9n8eAbtVoAeCyRRYBknMb4XRfRVyC6wEqYFK0Cj0HG4OfSr8HG56ZhR6AhoJO2u4JPxInxK4BDYCyYu9YOglk/xbsymvy8RhpjlrNEArqWRCrWlBQEsYRWC98EfAmlm/W8FoBKzWp2aT11KbZugJ6NKMzpJMFlANPJX1Wpdyjdj0NKozv9PoTjD0pRYVDb2b9VGgVtZHNKrLpuelEzb5DRhoRKel1alGox1wGfpmgFIYPbCIUa+MRiuTpdMJox7QrSdTM/bUlOFzZ7SERqM+6pbQZpqSZtq8ZhrnZkaRZoa7ZsblZjYgjgM1vmYClYOd1+LBnpRM9iQItLTFQ/0o6vLhXH9aCTTaOWnAehp1K9NZP4rUbufo2UnP9ajV82b6Tg70FudiZtKtHmrtoiOIpU9PpzD0Fwoo2n6sbZo9gJJZcwq9DGi0JpFyhjuoU7pxtSCjtXP9aDfv2gFaOoJofaKst5JJ+ukwM91kMirtyMp0a5MsOtyZicSobxMaLd3K0dZksZlt+HcZoUdsImZTY0g20PtA6OeypohFQR99MCqTDnnqA0NKp7My+ggYjerz34A+LQRUsolCrnWaNPznSqCoeyo1e/bV0T4+LV4KgCJwJAPNZI41WfV+MPzXAFDLluY2e83kqDoR2jcD6ByJhJoRrUtea31OgL4roCU9aORDWMRDIav0Fh890JR3lnz/1GVU1nsGlJX1n4UaRQkV6ZpQ+Uwm05ej0TkSycp8i2Hoo3+utUtvDhk9pwAAAABJRU5ErkJggg==") 0 0 / 100% 100%, url("texture.png") 0 0 / auto auto; }

एक रोशन सतह क्या बनाती है:

एक छोटे से रिज़ॉल्यूशन की छवि को एक हल्के नक्शे की बनावट पर बढ़ाया और लगाया गया

छाया उपरिशायी

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

प्रकाश और छाया के साथ परिणामी कमरे का स्क्रीनशॉट

टकराव का पता लगाना

टक्करों को निर्धारित करने के लिए एक ऊंचाई मानचित्र का उपयोग किया जाता है - नीचे की छवि उस पर वस्तुओं की ऊंचाई को प्रदर्शित करने के लिए रंग का उपयोग करती है। सफेद रंग सबसे गहरे और काले रंग का उच्चतम संभव स्थान दर्शाता है जो एक खिलाड़ी तक पहुंच सकता है। जैसे ही खिलाड़ी स्तर पर घूमता है, मैं उसकी स्थिति को 2D निर्देशांक में बदल देता हूं और उनका उपयोग ऊंचाई के नक्शे पर रंग की जांच करने के लिए करता हूं। यदि रंग खिलाड़ी की अंतिम स्थिति से हल्का है, तो यह गिरता है; यदि रंग थोड़ा गहरा है, तो खिलाड़ी किसी वस्तु पर चढ़ सकता है या उछल सकता है। यदि रंग बहुत गहरा है, तो खिलाड़ी रुक जाता है, मैं इसका उपयोग दीवारों और बाधाओं को सेट करने के लिए करता हूं। यह चित्र हाथ से तैयार किया गया है, लेकिन यह वैसा ही दिखता है जैसा कि इसे गतिशील रूप से बनाया गया था।

ऊंचाई का नक्शा छवि और स्तरों के संबंध में

आगे क्या है?

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

प्राथमिक स्रोत

HTML और सीएसएस पागलपन [अनुवाद]