Browser में open world बनाना, भाग 4: fancy terrain से पहले streaming

लेखक Oleg Sidorkin, Cinevva के CTO और सह-संस्थापक

यहां नए हैं? series guide का इस्तेमाल करें। यह बताती है कि spike क्या होता है और सभी भागों को जोड़ती है।

streaming वही जगह है जहां "दिखने में अच्छे" projects आमतौर पर बिखर जाते हैं।

एक still frame में आप बहुत कुछ छिपा सकते हैं। लेकिन chunk boundary पार करते समय होने वाली 40 ms की hitch को आप नहीं छिपा सकते।

हमने जानबूझकर advanced terrain representation बनाने से पहले streaming को टेस्ट किया। इससे हमें load और unload behavior पर साफ signal मिला।

Spike 6 ने साधारण chunk content के साथ neighborhood churn को verify किया।

Spike 6 को नए tab में खोलें ↗ · View source

फिर हम Spike 11 में असली terrain path की तरफ बढ़े। worker side decode के साथ height chunk streaming और 17 से 33 से 65 sample grids तक progressive refinement।

Spike 11 को नए tab में खोलें ↗ · View source

यह क्रम हमारी उम्मीद से ज़्यादा मायने रखता था। अगर हमने सीधे compressed height chunks से शुरुआत की होती, तो हर hitch अस्पष्ट होती। decode का issue, texture upload का issue, या geometry update का issue। Spike 6 ने Spike 11 के complexity जोड़ने से पहले एक uncertainty layer हटा दी।

इस chapter से एक व्यावहारिक सबक आगे के spikes में काम आया। Upload stalls को सीधे मापना चाहिए, average FPS से अंदाज़ा नहीं लगाना चाहिए। average FPS frame spikes को छिपा देता है, और frame spikes ही वो चीज़ हैं जो users असल में महसूस करते हैं।

भाग 5 में हम visual cost chapter में जाएंगे, जहां vegetation, terrain shaders, और cascaded shadows एक ही frame budget के लिए मुकाबला करते हैं।

इस chapter में संदर्भित technology

Chunk-based streaming. दुनिया को independent chunks की एक grid में बांटा जाता है (आमतौर पर 64x64 मीटर)। जैसे-जैसे player आगे बढ़ता है, पीछे के किनारे के chunks unload होते हैं और सामने के किनारे के chunks stream in होते हैं। Skyrim का cell system इसी तरह काम करता है: player के चारों ओर 5x5 cells की grid load रहती है, जो उसके चलने पर swap होती रहती है। browser version इस समीकरण में network latency जोड़ता है, जिससे player velocity के आधार पर predictive pre-fetching ज़रूरी हो जाती है। हमारी streaming architecture guide देखें।

Progressive heightmap refinement. terrain पहले low resolution पर भेजें, फिर refine करें। grid sizes मनमाने नहीं हैं: हर level एक $(2^k+1)\times (2^k+1)$ grid होता है, इसलिए $17=2^4+1$, $33=2^5+1$, $65=2^6+1$। $+1$ हर boundary पर एक shared sample रखता है ताकि neighbors सही ढंग से मिलें, और हर step लगभग sample count को चार गुना कर देता है ($n^2$ तब बढ़ता है जब side दोगुनी होती है)। एक 17x17 grid (4m spacing पर 64m chunk के लिए न्यूनतम) compressed होने पर ~200 bytes का होता है और तुरंत एक दिखने वाली surface render करता है। फिर 33x33 refinement stream करें, फिर पूरी 65x65 resolution। हर level पिछले data को बदले बिना samples जोड़ता है। यह सीधे geometry clipmap LOD rings से मेल खाता है जहां दूर का terrain low-resolution data इस्तेमाल करता है और पास का terrain full resolution। progressive chunk loading देखें।

Delta encoding और compression. heightmap data अच्छे से compress होता है क्योंकि आसपास के cells की values मिलती-जुलती होती हैं। delta encoding हर cell और उसकी predicted value (neighbors का average) के बीच का अंतर store करता है, जिससे values zero के पास इकट्ठा हो जाती हैं। zlib या brotli के साथ मिलकर, एक 65x65 chunk 8.4 KB raw से 1-2 KB compressed तक गिर जाता है। दूर के chunks के लिए कम precision पर (16-bit के बजाय 8-bit): 0.5-1 KB। terrain data compression देखें।

Predictive pre-fetching. player के पहुंचने से पहले chunks load करना। lead distance को उतना cover करना होता है जितनी दूरी player एक chunk load होने के दौरान तय करता है, $d_{\text{prefetch}}=v\cdot t_{\text{load}}$, इसलिए यह speed के साथ scale करता है: walking speed (5 km/h) पर 2 chunks आगे pre-fetch करें (128m), running speed (15 km/h) पर 4। load ring velocity direction के साथ शिफ्ट होती है। एक priority queue pending requests को urgency के हिसाब से sort करता है और उन chunks के requests cancel कर देता है जिनसे player दूर चला गया है। predictive pre-fetching देखें।

---

भाग 4, कुल 12 में से।
पिछला: भाग 3 - वे साधारण spikes जिन्होंने हमें बचाया
अगला: भाग 5 - खूबसूरत चीज़ों का budget तय करना
Series guide: /hi/blog/2026-02-25-open-world-browser-series-guide