Browser में open world बनाना, भाग 9: Transvoxel एक scaffold से शुरू हुआ
लेखक Oleg Sidorkin, Cinevva के CTO और सह-संस्थापक
यहां नए हैं? series guide का इस्तेमाल करें। यह बताती है कि spike क्या होता है और सभी भागों को जोड़ती है।
Seams वही जगह हैं जहां आपका भरोसा दम तोड़ देता है।
जब तक दो resolutions नहीं मिलतीं, तब तक सब कुछ स्थिर दिख सकता है। LOD 0 का एक chunk LOD 1 के chunk के बगल में बैठता है। उनके meshes अलग-अलग generate होते हैं। जहां वे एक boundary साझा करते हैं, वहां vertex positions मेल नहीं खातीं क्योंकि कम-resolution वाले chunk में grid density आधी होती है। इसका नतीजा होता है दिखने वाली दरारें, T-junctions, और झिलमिलाते किनारे।
Transvoxel algorithm इसे दो अलग resolutions वाले chunks के बीच की boundary face पर खास transition cells generate करके हल करता है। ये cells high-res और low-res दोनों grids से एक साथ sample लेती हैं और ऐसे triangles बनाती हैं जो दोनों surfaces को आपस में जोड़ देते हैं। यह algorithm अपनी ही lookup tables इस्तेमाल करता है, जो सामान्य marching cubes tables से अलग होती हैं, और इसमें 512 transition cell cases होते हैं।
इस मुकाम तक हमारे पास इतने integration के घाव थे कि हम implementation में जल्दबाजी न करने की समझ रखते थे।
Spike 15 का एक ही काम था: पूरे algorithm को छूने से पहले एक ऐसा seam test rig बनाना जिस पर हम भरोसा कर सकें। हमने एक नियंत्रित माहौल तैयार किया जहां ज्ञात SDF data के दो chunks अलग-अलग resolutions पर अगल-बगल बैठे थे, और main mesh, seam mesh, wireframe, और normals को अलग-अलग toggle करने के लिए visualization controls थे।
Spike 15 को नए tab में खोलें ↗ · Source देखें
जब test rig स्थिर हो गया, तो Spike 16 ने एक ही face पर table-driven transition cell generation को validate किया। हमने एक axis-aligned face चुनी (+X boundary), सिर्फ़ उसी face के लिए transition cell evaluation को implement किया, और output की तुलना Transvoxel paper के reference data से की।
Spike 16 को नए tab में खोलें ↗ · Source देखें
हमने जानबूझकर एक बार में एक ही face टेस्ट की, क्योंकि transition table की wiring में कई स्वतंत्र failure modes होते हैं। Case index की गणना दोनों grids से सही vertices sample करने पर निर्भर करती है। एक transition cell के अंदर vertex indexing सामान्य marching cubes cells से अलग numbering scheme इस्तेमाल करती है। Winding order को main mesh के साथ एक जैसा रखना पड़ता है वरना backface culling आपके seam triangles को खा जाएगा। अगर आप एक साथ छहों faces टेस्ट करें, तो हर लक्षण random लगता है। अगर आप एक face को अच्छी तरह टेस्ट करें, तो आपको सार्थक और debug करने लायक failures मिलते हैं।
इस चरण की एक और सूक्ष्म जीत थी tooling में निवेश। हमने visibility toggles, seam-only rendering, और color-coded LOD indicators पहले ही बना लिए थे। उस समय ये controls फालतू बोझ जैसे लगते थे। बाद में, जब corner cases बिगड़े, तो इन्होंने बार-बार अपनी कीमत वसूल कर दी क्योंकि हम ठीक-ठीक अलग कर सकते थे कि कौन-सी seam cells गड़बड़ कर रही थीं।
इस अध्याय के अंत तक हम "seams से निपट चुके" नहीं थे। हम ऐसी स्थिति में थे जहां seam bugs से डरने के बजाय उन पर तर्क किया जा सकता था।
भाग 10 में असली roller coaster शुरू होती है। Mixed LOD corners, winding flips, partial overdraw ghosts, और वे पल जहां आप पक्का मान बैठते हैं कि algorithm गलत है और फिर पता चलता है कि bug दरअसल एक draw range है जो active vertex count से आगे पढ़ रहा था।
इस अध्याय में जिस technology का ज़िक्र हुआ
The Transvoxel algorithm. Eric Lengyel द्वारा डिज़ाइन किया गया (transvoxel.org), Transvoxel volumetric terrain LOD की सबसे कठिन समस्या को हल करता है: अलग-अलग resolutions वाले chunks के बीच seams। जब एक high-res chunk एक low-res chunk के बगल में बैठता है, तो marching cubes meshes boundary पर align नहीं होते, जिससे दिखने वाली दरारें बनती हैं। Transvoxel boundary faces पर खास transition cells डालता है जो resolution के अंतर को अतिरिक्त triangles से पाटते हैं, जो दोनों तरफ़ से मेल खाते हैं। यह algorithm अपनी ही lookup tables इस्तेमाल करता है (सामान्य marching cubes से अलग) जिनमें 512 transition cell cases होते हैं, जो 73 equivalence classes में सिमट जाते हैं। यह patent-free है और इसका इस्तेमाल रिलीज़ हुई games में हुआ है (Space Engineers, Astroneer)। हमारी Transvoxel पर landscape guide देखें।
Transition cells. दो LOD levels के बीच की face पर generate होने वाली खास cells। सामान्य marching cubes cells के उलट, जो एक grid से 8 corners sample करती हैं, transition cells high-res और low-res दोनों grids से एक साथ sample लेती हैं। High-res face में
LOD transition seams. दो mesh resolutions के बीच की boundary जहां topology mismatch visual artifacts पैदा करता है। बिना stitching के, एक LOD 0 chunk (1m grid) एक LOD 1 chunk (2m grid) के बगल में T-junctions पैदा करता है: fine mesh में boundary पर ऐसे vertices होते हैं जिन्हें coarse mesh साझा नहीं करता, जिससे दरारें बनती हैं जहां से रोशनी छनकर आती है। Transvoxel, geomorphing, और skirt geometry इन seams को ठीक करने के तीन तरीके हैं। Volumetric terrain के लिए Transvoxel मानक समाधान है क्योंकि geomorphing सिर्फ़ heightmaps के लिए काम करता है। Volumetric terrain के लिए LOD देखें।
भाग 9, कुल 12 में से।
पिछला: भाग 8 - अपनी baseline खोए बिना integration
अगला: भाग 10 - Seam अफरातफरी और corner की boss fight
Series guide: /hi/blog/2026-02-25-open-world-browser-series-guide