Building 101 Indian Monuments in the Browser Without 3D Models

When Aman Anand Rai published a live interactive site rendering 101 historic Indian monuments using zero downloaded 3D assets, he upended standard frontend assumptions. Every single structure—from the Taj Mahal to remote Himalayan monasteries spanning 26 states and union territories—is generated entirely by a compact JavaScript function built out of primitive boxes, cylinders, and domes. Instead of relying on heavy polygon meshes that choke browser bandwidth, this project proves that pure programmatic geometry offers a lightweight, high-performance alternative for digital heritage preservation.

Stripping Away the Polygon Bloat

Modern web applications often treat bandwidth and memory as infinite resources, shipping gigabytes of compressed assets for simple 3D visualisations. Heavy 3D formats like glTF or OBJ require dedicated loaders, texture atlases, and complex scene graphs that inflate page loads. Rai’s approach discards this asset-heavy pipeline completely, returning to a philosophy where code itself defines form.

When you visit the site hosted on Vercel, your browser does not download a single pre-rendered model file. It computes the structure locally in milliseconds using raw mathematical descriptions written directly into source files.

📌 Key Point: Eliminating external asset downloads reduces initial page weight to near zero, bypassing typical network bottlenecks entirely.

This reduction in asset overhead changes how developers think about browser-based rendering, especially in regions with varying mobile network speeds across India.

Architecture Built on Math, Not Meshes

Every monument in the collection is fundamentally a collection of parametric geometric primitives managed by custom functions. A dome is simply a scaled hemisphere combined with a cylinder, while intricately carved temple pillars are constructed by stacking geometric slices with precise coordinate offsets. This method demands a deep understanding of spatial geometry and coordinate systems rather than proficiency in 3D modeling software like Blender.

The codebase hosted on GitHub reveals an average footprint of roughly 2 KB of code per monument, with the smallest implementation weighing in at under 1 KB. These minuscule file sizes mean the entire library of structural functions loads faster than a single compressed JPEG image on an average mobile connection.

"We don't need heavy 3D files when mathematical instructions can draw the physical world on the fly."

By replacing static assets with dynamic code execution, the application scales effortlessly across devices without straining GPU memory allocation limits.

The Geometry of Heritage: From Taj Mahal to Hill Forts

Replicating 101 distinct structures across 26 states and union territories required standardising how different architectural styles are broken down into code. From the Dravidian temple towers of the south to the Mughal arches of the north, diverse architectural languages had to be translated into reusable code blocks. This systematic breakdown highlights the intersection of cultural heritage preservation and modern software engineering.

Here is how the system handles complex architectural decomposition:

• Monument generation relies entirely on native browser canvas or WebGL drawing routines without third-party frameworks.
• Complex roof structures are approximated using nested cylindrical transformations and trigonometric scaling factors.
• Material properties are applied uniformly via mathematical color gradients rather than high-resolution bitmap textures.
• Spatial positioning maps directly to real-world geographic coordinates stored in lightweight JSON arrays.
• Rendering loops execute at 60 frames per second even on mid-range smartphones without triggering thermal throttling.
• Code modularity ensures that adding a new monument requires writing less than 50 lines of functional logic.

This structured methodology transforms complex historical artifacts into clean, maintainable software components.

Zero Dependencies and the Shaders That Paint Stone

Dependencies represent a constant maintenance burden in modern web development, often introducing security vulnerabilities and bloated bundle sizes. Rai's architecture maintains absolute independence with 0 npm packages, 0 build steps, and 0 external design libraries. Everything runs on vanilla web APIs, ensuring long-term stability without breaking changes from third-party package updates.

To bring these geometric wireframes to life, a single custom shader handles the surface rendering for stone, brick, marble, and water across all 101 structures. Instead of loading heavy texture maps for every building, procedural noise functions calculate surface roughness, mortar lines, and weathering patterns dynamically in real time.

📌 Key Point: A single unified shader replaces dozens of megabytes of texture assets while maintaining authentic visual fidelity across diverse architectural surfaces.

This computational approach proves that artistic expression and technical minimalism can coexist without sacrificing visual depth.

What Indian Engineering Can Teach Global Web Dev

Resource constraints have historically forced Indian developers to innovate around bandwidth and hardware limitations, creating a culture of extreme engineering efficiency. As explored in discussions around How Northern California's Magnitude 5.6 Quake Hits India's Tech Giants, global infrastructure shocks often highlight the fragility of bloated software supply chains. Building resilient, lightweight applications is no longer just an optimization exercise; it is an architectural necessity for a truly accessible global web.

When developers rely on massive frameworks and bloated asset pipelines, they inadvertently exclude users on constrained devices or slower networks. By demonstrating that complex cultural assets can be rendered with mere kilobytes of code, this project challenges the tech industry's default assumption that bigger files equal better experiences.

True engineering excellence lies in doing more with less, stripping away unnecessary abstraction until only the essential logic remains.

Key Facts

• 101 total monuments meticulously coded across 26 states and union territories in India.
• 0 downloaded 3D model files or external mesh dependencies used in the entire project.
• 0 npm packages or complex build steps required to run or deploy the site.
• ~2 KB average code size per monument, with the smallest implementation under 1 KB.
• 1 custom procedural shader responsible for painting stone, brick, marble, and water surfaces.

What This Means For You

If you are a web developer or digital creator, this project serves as a masterclass in challenging conventional asset pipelines. Instead of reflexively reaching for heavy 3D files or massive plugin ecosystems, consider whether procedural geometry or lightweight code can solve your rendering challenges. Audit your current web projects for unnecessary asset weight and look for opportunities to replace static downloads with dynamic computation.

For educators and cultural historians, this demonstrates a sustainable, highly accessible way to archive and display heritage sites online without expensive server infrastructure or proprietary software. Anyone with a web browser can explore these structures instantly, making digital preservation truly open and democratic.

Conclusion

As web technologies continue to expand in capability, the temptation to bloat applications with unoptimized assets grows stronger. Projects like this monument renderer remind us that disciplined code and mathematical elegance remain the most powerful tools in a developer's arsenal. When we strip away the noise of modern dependencies, what remains is pure, efficient creation that honors both art and engineering.