Browser में open world बनाना, भाग 7: Marching cubes और पहली असली गुफाएं

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

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

Heightmaps तब तक बढ़िया हैं जब तक आपको overhangs की ज़रूरत नहीं पड़ती।

जिस पल आप कटे हुए tunnels, हवा में लटकते चट्टान के किनारे, या गुफा की छतें चाहते हैं, एक शुद्ध heightfield pipeline आपको रोकने लगती है। एक heightmap हर XZ coordinate के लिए सिर्फ एक Y value रखता है। यह physically किसी भी ऐसी surface को दिखाने में असमर्थ है जो खुद के ऊपर मुड़ती हो। हमें एक volumetric representation की ज़रूरत थी।

Spike 12 ने WebGPU compute shaders का इस्तेमाल करके GPU पर marching cubes लागू किया। यह algorithm एक 3D grid पर signed distance field (SDF) का मूल्यांकन करता है और zero-crossing surface पर एक triangle mesh निकालता है। हर cell के 8 corners होते हैं, हर corner या तो surface के अंदर होता है या बाहर, जिससे $2^8=256$ संभव sign patterns बनते हैं। एक lookup table हर pattern को triangles के एक set से जोड़ता है। Vertices cell के edges पर उस बिंदु पर बैठते हैं जहां field zero को पार करती है। corners $a$ और $b$ के बीच के एक edge के लिए जिनके field values $f_a$ और $f_b$ हैं, linear interpolation vertex को यहां रखता है

$$\mathbf{v}={\mathbf{p}}_a+t({\mathbf{p}}_b-{\mathbf{p}}_a),t=\frac{-f_a}{f_b-f_a}$$

जो edge के साथ वह fraction है जहां field zero पर पहुंचती है। चूंकि एक crossing edge पर $f_a$ और $f_b$ के opposite signs होते हैं, $t$ हमेशा $[0,1]$ में आता है। हमने इसे एक साथ चार active 64-cubed chunks पर चलाया और per-frame remesh के साथ animated SDF edits का परीक्षण किया।

Spike 12 को एक नए tab में खोलें ↗ · Source देखें

पहली जीत खुद compute pipeline पर भरोसा थी। एक ही dispatch बिना किसी CPU readback के SDF का मूल्यांकन कर सकता था, cells को classify कर सकता था, और vertices को एक GPU buffer में emit कर सकता था। दूसरी जीत यह पता चलना थी कि "यह काम करता है" कितनी जल्दी artifact hunting में बदल जाता है। गायब triangles शायद ही कभी marching cubes की theory की समस्या होते थे। वे table index के mismatches थे, गलत draw ranges जो active vertex count से आगे पढ़ रहे थे, या chunk boundaries के पास edge-case interactions थे जहां पड़ोसी SDF samples उपलब्ध नहीं थे।

इस spike ने हमें zones में सोचने पर मजबूर किया। Camera के पास, आप volumetric आज़ादी चाहते हैं ताकि players carve कर सकें, खुदाई कर सकें और गुफाएं देख सकें। Camera से दूर, आप clipmap की efficiency चाहते हैं जहां एक flat heightmap सस्ता और पूरी तरह पर्याप्त होता है। यह duality उस architecture की रीढ़ बन गई जिसे हम Spike 13 से आगे लगातार बेहतर करते रहे।

मेरे पसंदीदा debugging पलों में से एक था edits चलते समय wireframe toggle। real time में topology को बनते और घुलते देखना quality के tradeoffs को तुरंत दिखा देता था। आप देख सकते थे कि vertex density कहां काफी ऊंची थी, कहां यह बहुत मोटी हो गई, और ठीक कहां LOD transitions को आगे चलकर cracks से बचने के लिए Transvoxel support की ज़रूरत पड़ेगी।

भाग 8 में हम integration की चुनौती को देखते हैं। raw compute-driven meshes और Three.js scene graph logic को एक स्थिर rendering pipeline में रखना उस isolated demo की तुलना में ज़्यादा मुश्किल था जितना लगा था।

इस अध्याय में बताई गई तकनीक

Marching cubes. एक 3D scalar field से triangle mesh निकालने का algorithm (Lorensen और Cline, 1987)। एक नियमित 3D grid में हर cell को उसके 8 corners पर field sample करके classify किया जाता है। sign pattern एक case index (0-255) बनाता है, और एक lookup table हर case को triangles के एक set से जोड़ता है। दो corners के बीच interpolate करके vertices को grid edges पर रखा जाता है। यह algorithm embarrassingly parallel है क्योंकि हर cell स्वतंत्र रूप से process होता है, जो इसे GPU compute के लिए आदर्श बनाता है। हमारी SDFs और marching cubes पर landscape guide देखें।

Signed Distance Fields (SDFs). एक volumetric representation जो 3D space में हर बिंदु पर सबसे पास की surface तक की signed distance रखती है। Positive values बाहर हैं, negative अंदर हैं, और zero-crossing surface है। SDFs किसी भी 3D shape को दिखा सकते हैं: गुफाएं, arches, overhangs, और हवा में लटकती geometry जिसे heightmaps नहीं दिखा सकते। Editing field पर natural set algebra है। Material जोड़ना (दो shapes का union) $d=min(d_1,d_2)$ है, हटाना (खुदाई) carve shape को negate करके $d=max(d_1,-d_2)$ है, और एक smooth blend एक soft minimum का इस्तेमाल करता है जैसे

$$\mathrm{smin}(d_1,d_2,k)=min(d_1,d_2)-\frac{h^2}{4k},h=max(k-|d_1-d_2|,0)$$

जहां $k$ blend radius को नियंत्रित करता है। जैसे-जैसे $k\to 0$ होता है, यह वापस एक hard $min$ में सिमट जाता है। SDF terrain representation देखें।

WebGPU compute shaders. GPU programs जो general-purpose computation चलाते हैं, rasterization pipeline से बंधे नहीं होते। एक compute shader threads के workgroups dispatch करता है जो parallel में execute होते हैं। Marching cubes के लिए, हर thread एक grid cell process करता है: SDF sample करना, cell classify करना, triangulation देखना, edge vertices interpolate करना, और atomic counters का इस्तेमाल करके एक mesh buffer में append करना। किसी CPU readback की ज़रूरत नहीं होती क्योंकि output buffer सीधे rendering के लिए vertex data के रूप में इस्तेमाल होता है। Will Usher का webgpu-marching-cubes browser में real-time 256^3 grid processing दिखाता है। हमारी WebGPU-driven LOD पर landscape guide देखें।

Hybrid heightmap + SDF architecture. Browser terrain के लिए व्यावहारिक तरीका: heightmaps पूरी दुनिया को ढकते हैं (सस्ते, compact), जबकि SDF volumes सिर्फ उन chunks में मौजूद होते हैं जिन्हें गुफाओं, overhangs, या creator-carved features की ज़रूरत होती है (5-10% chunks)। Camera के पास, volumetric आज़ादी carving और गुफाओं की अनुमति देती है। दूर, heightmaps efficient flat terrain देते हैं। hybrid terrain representation देखें।

---

भाग 7, कुल 12 में से।
पिछला: भाग 6 - Clipmaps ने कहानी बदल दी
अगला: भाग 8 - अपना baseline खोए बिना integration
Series guide: /hi/blog/2026-02-25-open-world-browser-series-guide