2 महीने पहले मैंने GitHub पर WebQuake का पहला बीटा बिल्ड पोस्ट किया था - WebGL में ब्राउज़र में चलने वाले पहले Quake का पोर्ट।

इस पोस्ट में मैं आपको इंजन के विकास और कार्यान्वयन के विवरण के बारे में बताना चाहूंगा: ग्राफिक्स कैसे बनाए जाते हैं, ध्वनि कैसे काम करती है, इत्यादि।

यह सब कैसे शुरू हुआ

मैंने सितंबर 2012 में अपने वर्तमान स्वरूप में WebQuake को विकसित करना शुरू कर दिया। लेकिन विचार मुझे उससे बहुत पहले आया था।

पहली बार मैंने 2011 की गर्मियों में कुछ ऐसा ही करने का फैसला किया, जब मैं जावास्क्रिप्ट में कुछ भी नहीं सोच रहा था। फिर मैंने क्वेक कोड को देखे बिना पोर्ट को "आंख से" बनाया, और खेल मेनू का केवल एक छोटा टुकड़ा बनाया। उस संस्करण में, मैंने स्ट्रिंग्स के माध्यम से बाइनरी डेटा के साथ काम किया (और फ़्लोटिंग पॉइंट नंबरों के पार्सर में मैंने आमतौर पर Math.pow का उपयोग किया और बिट्स को 0 और 1 के एक स्ट्रिंग में संग्रहीत किया है)। यह बहुत अच्छा है कि वेबजीएल में बफ़र्स और शेड्स के साथ काम करने की प्रकृति की समझ की कमी ने दुनिया को इस तरह की उल्टी से बचाया।

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

मैंने शुद्ध HTML5 पर स्विच करना समाप्त कर दिया।

डिज़ाइन

शुरुआत से पहले बीटा तक 6 महीने बीत चुके हैं। यदि मेरी मेमोरी मुझे सही सेवा देती है, तो GWT Quake 2 को बनाने में Google को 2 महीने लगे, लेकिन Google ने उन तीनों को किया और Jake2 के रूप में उनका एक आधार था, और मैंने सभी कोड मैन्युअल रूप से कॉपी किए।

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

लेकिन इस दृष्टिकोण के नुकसान भी हैं। कभी-कभी मुझे टाइपो मिलता था, और गलत ऑपरेटर के कारण मैं इसे दो बार मिला (पहली बार जब मैं दीवारों की तरफ एक उन्मत्त गति से फिसल रहा था क्योंकि & # के बजाय, और दूसरा, नेटवर्क गेम में भयानक ट्विचेज थे! = = के बजाय !!) , मुझे पूरे सिस्टम को खोदते हुए 3 सप्ताह बिताने पड़े।

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

उप

अब हम इंजन के विवरण पर चलते हैं।

ग्राफिक्स

बेशक, ग्राफिक्स प्रतिपादन वेबलॉग के माध्यम से कार्यान्वित किया जाता है।

लेकिन WebQuake को GLQuake पोर्ट नहीं कहा जा सकता है। लगभग पूरे ग्राफिक्स सबसिस्टम को स्क्रैच से फिर से लिखा गया है।

WebQuake और GLQuake के बीच मुख्य अंतर OpenGL फ़ंक्शंस के एक निश्चित सेट के बजाय शेडर्स और बफ़र्स का उपयोग है। WebQuake में, shaders का उपयोग हर जगह, प्रत्येक प्रकार की वस्तु के लिए किया जाता है: BSP मॉडल, बहुभुज मॉडल, खिलाड़ी, स्प्राइट, कण, आकाश - आपका अपना shader लिखा जाता है।

शेडर्स के माध्यम से, प्रभाव वापस लौटाए गए थे जो डॉस क्वेक / विनक्वाक में मौजूद थे, लेकिन ओपन के पुराने संस्करणों की सीमाओं के कारण GLQuake से हटा दिया गया था, उदाहरण के लिए, रोशनी वाले क्षेत्रों और उज्ज्वल प्रकाश के साथ बनावट।


E1M1 को GLQuake में शुरू करें। लाइट बंद हैं।


WebQuake में एक ही जगह है।

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

precision mediump float; uniform float uGamma; uniform sampler2D tTexture; uniform sampler2D tLightmap; uniform sampler2D tDlight; uniform sampler2D tLightStyle; varying vec4 vTexCoord; varying vec4 vLightStyle; void main(void) { vec4 texture = texture2D(tTexture, vTexCoord.xy); gl_FragColor = vec4(texture.rgb * mix(1.0, dot(texture2D(tLightmap, vTexCoord.zw), vec4( texture2D(tLightStyle, vec2(vLightStyle.x, 0.0)).a, texture2D(tLightStyle, vec2(vLightStyle.y, 0.0)).a, texture2D(tLightStyle, vec2(vLightStyle.z, 0.0)).a, texture2D(tLightStyle, vec2(vLightStyle.w, 0.0)).a) * 43.828125) + texture2D(tDlight, vTexCoord.zw).a, texture.a), 1.0); gl_FragColor.r = pow(gl_FragColor.r, uGamma); gl_FragColor.g = pow(gl_FragColor.g, uGamma); gl_FragColor.b = pow(gl_FragColor.b, uGamma); } 

जैसा कि आप देख सकते हैं, डॉट का उपयोग इसके लिए थोड़ा असामान्य कार्य के लिए किया जाता है - किसी दिए गए प्रकाश स्रोत के लिए उनकी वर्तमान चमक द्वारा 4 लाइटमैप को गुणा करना, जो कि 64x1 बनावट में 0 से 25 तक या 0.0 से 0.0980392 के मान के रूप में है।

आकाश, GLQuake में बुरी तरह से टूटा हुआ है, यहाँ GLATake के विपरीत, गहराई परीक्षण के साथ हैक्स के माध्यम से पूरे स्तर के चारों ओर खींचे गए चपटे गोले के रूप में बनाया गया है, जो कई छोटे लोगों में आकाश की बनावट के साथ बहुभुज को विभाजित करता है और उन्हें अजीब तरीके से विकृत करता है, जिससे बुरा प्रभाव होता है। और लहरों जब चलती है।


GLQuake में स्काई।

WebGL के माध्यम से द्वि-आयामी चित्र भी खींचे जाते हैं (1 की लंबाई के साथ क्वाड के माध्यम से, वर्टेडर शेडर में गुणा किया जाता है)। मूल रूप से इसके लिए 2 डी कैनवस का उपयोग करने की योजना बनाई गई थी, लेकिन उच्च रिज़ॉल्यूशन पर एफपीएस 15 तक गिर गया।

इसके अलावा, मूल क्वेक (और GWT क्वेक 2) के विपरीत, WebQuake ब्राउज़र विंडो के आकार पर निर्भर नहीं करता है। इसके लिए, तथाकथित होर + लंब + FOV का भी उपयोग किया जाता है, जिसके बारे में मैंने पहले हब्रहाब पर लिखा था।

ध्वनि

ध्वनि को एक ही बार में दो तरह से लागू किया जाता है।

डिफ़ॉल्ट रूप से, वेब ऑडियो एपीआई का उपयोग किया जाता है, जो स्टीरियो साउंड और सुगम ध्वनि पुनरावृत्ति का समर्थन करता है।

यदि ब्राउज़र वेब ऑडियो एपीआई का समर्थन नहीं करता है, तो एचटीएमएल 5 ऑडियो सक्षम है, लेकिन इस मामले में ध्वनि एकल-चैनल है और कुछ देरी से दोहराता है।

शुरुआती बीटा रिलीज़ में, केवल HTML5 ऑडियो का उपयोग किया गया था, लेकिन इसकी वजह से, क्रोम पहले एंड्रॉइड, लिनक्स और मैक और फिर विंडोज पर क्रैश हो गया, इसलिए वेब ऑडियो समर्थन जोड़ा गया।

संगीत भी मौजूद है, लेकिन यह डिस्क से नहीं खेला जाता है, लेकिन HTML5 के माध्यम से सर्वर पर ओजीजी फाइलों से।

नेटवर्क गेम

चूँकि ब्राउज़र एक WebSocket सर्वर नहीं हो सकता है, लिहाज़ा सर्वर बनाना संभव नहीं था।

एक समर्पित सर्वर Node.js के माध्यम से चलता है और WebQuake के अधिकांश कोड का उपयोग करता है।

समर्पित सर्वर WebSockets और UDP दोनों का समर्थन करता है, इसलिए WebQuake सर्वर को एक नियमित क्वेक क्लाइंट (Quakeforld) के माध्यम से खेला जा सकता है। शायद भविष्य में मैं मौजूदा क्वेक नियमित सर्वर से जुड़ने के लिए एक प्रॉक्सी लिखूंगा।

सर्वर के बारे में जानकारी उसी पते और पोर्ट पर HTTP अनुरोध के रूप में मांगी जा सकती है जिस पर सर्वर चल रहा है (डेटा JSON प्रारूप में वापस आ गया है), या यूडीपी के माध्यम से मौजूदा तरीकों से।

प्रबंध

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

फाइल सिस्टम

फ़ाइलों तक पहुँच सिंक्रोनस XMLHttpRequest के माध्यम से की जाती है।

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

लोड करने के दौरान, (कम से कम फ़ायरफ़ॉक्स में) एक "लोडिंग" तस्वीर स्क्रीन के बीच में दिखाई देती है, इसलिए खिलाड़ी समझता है कि डाउनलोड प्रगति पर है।

सेव, सेटिंग्स और डेमो लोकल स्टोरेज में रिकॉर्ड किए जाते हैं। लोकल स्टोरेज में स्थित सेव्स को बूट / सेव मेन्यू में डिलीट बटन से डिलीट किया जा सकता है।

GWT Quake 2 के विपरीत, WebQuake को फ़ाइल रूपांतरण की आवश्यकता नहीं होती है और सीधे .pak's (HTTP 1.1 रेंज के माध्यम से) से फ़ाइलों को डाउनलोड कर सकता है, जिसका अर्थ है कि पूर्ण मॉड समर्थन है।

उत्पादकता

मैंने विभिन्न उपकरणों और ब्राउज़रों पर WebQuake का परीक्षण किया।

जो कुछ आश्चर्यजनक था, वह स्वीकार्य प्रदर्शन था (मुझे नहीं पता कि कितने एफपीएस, लेकिन 30 से कम नहीं) क्रोम के बीटा संस्करण के माध्यम से फोन (एलजी ऑप्टिमस एल 9) पर भी प्राप्त किया जा सकता है, भले ही दीवारें काली हों (मुझे सही कारण नहीं पता होगा। यह, इसके अलावा, गतिशील प्रकाश काम करता है)।

मेरे पिछले कंप्यूटर पर, WebQuake ने GWT Quake 2 में 5-10 FPS के विपरीत अधिकतम 60 FPS पर काम किया। विकास के दौरान, मैंने स्पष्ट रूप से GWT Quake 2 त्रुटियों को ध्यान में रखा, उदाहरण के लिए, मैंने ArrayBuffer / Typer Arrays / DataView का उपयोग किया जहां मैं कर सकता था, और शायद इसने इसे हासिल करने में मदद की। उच्च गति।

NVIDIA GeForce 5200 और एक सैमसंग N130 नेटबुक के साथ एक पुराने कंप्यूटर पर कितने बड़े ब्रेक थे। ASUS ट्रांसफार्मर पैड पर, TF300T बहुत आसानी से चलता है।