101 Indian monuments, modelled in the browser

Opening on a Map

Monuments of India opens on a map of the country, not a list of files.

Its 101 landmarks are pins on India's outline, coloured by kind:

• temples and shrines
• forts and palaces
• tombs and memorials
• civic and engineering works

Where several places would land on the same spot, they fold into a numbered cluster, and choosing it zooms in until the pins separate.

Beside the map is a list grouped by state that narrows as you type. Pick a place and the map gives way to a 3D model you can orbit, zoom and step through with the arrow keys.

Each monument also has its own address, such as #taj-mahal, so a link can open a model directly.

Opening on the map was the most important design choice. Most people know the Taj Mahal is in Agra, but fewer could place Rani ki Vav, Ramappa or Key Monastery. Seeing them on the map shows how widely India's architecture is spread before you open a single model.

The site is at monuments-of-india-nu.vercel.app.

Building Models in Code

Nothing in the viewer is a downloaded mesh, and the site has no build step.

Each landmark is a module in js/monuments/ that builds the structure in code from three.js primitives (boxes, cylinders, spheres, lathed profiles and extruded shapes) at roughly real-world proportions.

The Qutub Minar's fluting, for example, comes from pushing each tier's vertices outward with a cosine of the angle around the tower.

js/helpers.js holds the shared materials (marble, red sandstone, granite, gold and several kinds of water) and the small pieces the monuments reuse, such as chhatris and rings.

js/data.js is the catalogue: name, place, coordinates, dates, style, material and the function that builds each model.

three.js 0.160 loads from a CDN through an import map. Apart from that there is just index.html, one stylesheet and the modules, served as static files on Vercel.

The trade-off is deliberate. A photogrammetry scan would be more exact, but it would weigh megabytes per monument and come with licensing questions.

A model written in code is a few kilobytes, can be read and changed like any other code, and makes adding the hundred-and-second monument as easy as adding the second.

The pictures below are frames from this viewer. They are models, not photographs.

Surface Shader

Plain boxes would still look like boxes without the surface shader in js/surface.js.

Each material is tagged as masonry, marble, brick, rock, ground, lattice, glazed tile, foliage or water. The fragment shader draws the pattern from the surface's position in the world, not from UVs painted onto each mesh, so a one-metre block is the same size on the Qutub Minar as on a wall of Agra Fort, however that mesh was built.

I think this is the most important rendering decision in the project. With 101 models built by hand from primitives, nobody is going to unwrap UVs for each one, and world-space patterns make the problem disappear.

Joints, veins, brick courses and lattice holes all come from that pattern, and the same pattern tilts the surface normal to create a bump.

Grime collects near the ground, faint streaks run down the walls like rain, and a small tint that changes from piece to piece stops a row of identical columns from looking like copies.

Water is handled separately: four layers of drifting noise raise and tilt the normal, so the sky reflects in a broken, moving band instead of a flat sheen.

Ten of the best-known monuments also get grain from real photographs. CC0 textures from Poly Haven (marble, red sandstone, sandstone blocks, two plasters, granite and rock) are projected from three directions (triplanar mapping) in the same shader.

Each is divided by its average colour and then tinted back to the model's own colour. The Taj stays Makrana white and the Red Fort stays red, and the photograph only adds grain. Any other monument that uses those materials gets the detail for free.

Rocks, hills, mountains and trees start as flat, low-poly placeholders. js/naturalize.js rebuilds them at higher resolution, smooths their shading, and displaces them with noise suited to each object: lumpy boulders, leafy canopies, tiered conifers, ridged mountains with snow on the high peaks, and hills that only bulge outward so a temple on a flat summit isn't warped.

Statues are built from smooth rounded forms rather than blocks.

Lighting and Presentation

For lighting, the frame uses ACES filmic tone mapping, a sun with soft shadows and a hemisphere fill.

An environment map rendered from the same sky and ground gives gold, bronze and polished marble something to reflect.

In a desktop-width window, an ambient occlusion pass (GTAO) darkens corners and the undersides of eaves. Its radius scales with the model, because a small kiosk and a bridge of about 700 metres need different reaches.

Switching to dark mode changes the sky and ground and turns on a bloom pass for the lamps.

None of these effects is unusual on its own. What makes them work is that they are layered, so the eye stops reading the models as primitives.

The map isn't a tile service either. State boundaries and the national outline come from Natural Earth's public-domain data, using its India point of view, simplified into SVG paths in js/india-map.js.

One canvas fills the stage. When you change monuments, the camera fits itself to the model's bounding box along a fixed view direction and eases there in about a second.

Faces that share a plane, which would otherwise flicker, get a slight depth offset.

Deploying is just pushing to main.

Looking back, the absence of tooling is what kept the project moving. There are no dependencies to update, no build to break and no framework to outgrow, so every change was about the monuments themselves.

The models are still interpretations, and anyone who has stood in front of the Kailasa Temple will see what they simplify. The goal is a sense of form, scale and place, not a survey record, and for that, code plus a good shader goes a long way.

Below the two views of the site, each of the 101 models is shown as the page draws it, with the short history that appears on its plaque.

A few other posts on DEV are in the same neighborhood. Alicia Lu wrote How I Built a WebGPU 3D Garden with Houdini and Three.js. Jonas Javier wrote How I drew a 4D tesseract in Three.js. lavitra wrote Three.js Explained: What You're Actually Building With Scene, Camera, and Mesh.

The home view. Numbered pins are clusters; the list on the left is grouped by state. Opening a monument replaces the map with the model. The plaque carries the place, the date, the material and the history.

The 101 Monuments

1. Qutub Minar Mehrauli, Delhi · 1199-1220 · Indo-Islamic Begun by Qutb ud-Din Aibak and completed by his successor Iltutmish; Firoz Shah Tughlaq later rebuilt the top storeys. Its five storeys taper from a 14.3 m base to 2.7 m at the top, each ringed by a projecting balcony. The Qutb complex has been a UNESCO World Heritage Site since 1993.
2. Gateway of India Apollo Bunder, Mumbai · 1913-1924 · Indo-Saracenic Built to commemorate the 1911 landing of King George V and Queen Mary in Bombay. Designed by the Scottish architect George Wittet, facing the Arabian Sea. The last British troops left India through its arch in February 1948.
3. Taj Mahal Agra, Uttar Pradesh · 1632-1653 · Mughal Commissioned by Shah Jahan as a tomb for his wife Mumtaz Mahal. The four minarets lean slightly outward, so in an earthquake they would fall away from the tomb. A UNESCO World Heritage Site since 1983.
4. Charminar Hyderabad, Telangana · 1591 · Qutb Shahi Built by Muhammad Quli Qutb Shah, the founder of Hyderabad. Each of its four sides opens in a grand arch onto a street of the old city. A small mosque occupies the western side of the top floor.
5. Ram Mandir Ayodhya, Uttar Pradesh · 2020-2024 · Nagara Consecrated on 22 January 2024. Designed by the Sompura family, temple architects for generations. The main structure was built without iron or steel.
6. Brihadeeswara Temple Thanjavur, Tamil Nadu · 1003-1010 CE · Dravidian (Chola) Built by the Chola emperor Rajaraja I. The vimana rises in 13 tiers and is crowned by a capstone estimated at 80 tonnes. Part of the Great Living Chola Temples, a UNESCO site since 1987.
7. India Gate Kartavya Path, New Delhi · 1921-1931 · Memorial arch Designed by Edwin Lutyens as the All India War Memorial. It honours soldiers of the British Indian Army who died between 1914 and 1921. More than 13,000 names are inscribed on its surfaces.
8. Statue of Unity Ekta Nagar, Gujarat · 2013-2018 · Monumental statue Depicts Sardar Vallabhbhai Patel, India’s first Deputy Prime Minister. The world’s tallest statue, unveiled on 31 October 2018. Designed by the sculptor Ram V. Sutar, it faces the Sardar Sarovar Dam on the Narmada.
9. Howrah Bridge Kolkata, West Bengal · 1936-1943 · Cantilever truss Its 457 m main span crosses the Hooghly with no pier in the river between the two towers. Built with 26,500 tonnes of steel, 23,500 of them high-tensile steel from Tata Steel. Renamed Rabindra Setu in 1965 after Rabindranath Tagore.
10. Jagannath Puri Temple Puri, Odisha · 12th century · Kalinga Built by King Anantavarman Chodaganga Deva of the Eastern Ganga dynasty. The flag on its summit is changed every day by a priest who climbs the tower. Each year the Rath Yatra carries the deities through Puri on giant wooden chariots.
11. Golden Temple Amritsar, Punjab · 1581-1604 · Sikh Founded by Guru Arjan, the fifth Sikh Guru, who installed the Adi Granth here in 1604. Its upper storeys were covered in gilded copper under Maharaja Ranjit Singh in the early 19th century. The shrine stands in the Amrit Sarovar pool, reached by a single causeway; its langar serves free meals to tens of thousands of people every day.
12. Hawa Mahal Jaipur, Rajasthan · 1799 · Rajput Built by Maharaja Sawai Pratap Singh and designed by Lal Chand Ustad. Its 953 small latticed windows (jharokhas) let the women of the court watch street life unseen. The five-storey façade is barely one room deep; breezes through the screens gave it the name “Palace of Winds”.
13. Konark Sun Temple Konark, Odisha · c. 1250 CE · Kalinga Built by King Narasimhadeva I of the Eastern Ganga dynasty as a giant stone chariot for Surya, the Sun god. Its 24 carved wheels work as sundials: the shadows of the spokes tell the time of day. The main tower collapsed centuries ago; what stands is its porch. A UNESCO World Heritage Site since 1984.
14. Meenakshi Temple Madurai, Tamil Nadu · 16th-17th c. · Dravidian (Nayak) Dedicated to Meenakshi, a form of Parvati, and her consort Sundareswarar, a form of Shiva. Its 14 gopurams are covered in thousands of painted stucco figures of gods, animals and demons. The tallest, the southern gopuram, rises about 52 m above the old city.
15. Lotus Temple Kalkaji, New Delhi · 1980-1986 · Expressionist A Baháʼí House of Worship, open to people of every faith. Its 27 free-standing marble-clad petals are arranged in clusters of three to form nine sides. Designed by the Iranian-born architect Fariborz Sahba and surrounded by nine pools.
16. Gol Gumbaz Vijayapura, Karnataka · 1626-1656 · Deccan (Adil Shahi) The mausoleum of Muhammad Adil Shah of the Bijapur Sultanate. Its dome, about 44 m across, is one of the largest ever built without internal supports. In the whispering gallery around the inside of the dome, a faint sound echoes several times.
17. Mysore Palace Mysuru, Karnataka · 1897-1912 · Indo-Saracenic Seat of the Wadiyar dynasty; it replaced an older wooden palace that burned down in 1897. Designed by the British architect Henry Irwin. On festival nights, and through Dasara, it is lit with nearly 100,000 bulbs.
18. Sanchi Stupa Sanchi, Madhya Pradesh · 3rd c. BCE · Buddhist (Mauryan) Commissioned by the emperor Ashoka over relics of the Buddha. Its four gateways (toranas), added in the 1st century BCE, are carved with scenes from the Buddha’s life and the Jataka tales. A UNESCO World Heritage Site since 1989.
19. Mahabodhi Temple Bodh Gaya, Bihar · 5th-6th c. CE · Gupta-era brick Marks the place where Siddhartha Gautama attained enlightenment under the Bodhi tree. Ashoka built the first shrine here; the present brick temple dates from the Gupta period. One of the oldest brick temples still standing in India, and a UNESCO site since 2002.
20. Red Fort Old Delhi · 1639-1648 · Mughal Built by Shah Jahan as the palace-fortress of his new capital, Shahjahanabad. Every Independence Day the Prime Minister raises the national flag here and addresses the nation. Its walls run about 2.5 km; a UNESCO World Heritage Site since 2007.
21. Old Parliament House Sansad Marg, New Delhi · 1921-1927 · Lutyens’ Delhi Designed by Edwin Lutyens and Herbert Baker, and opened in 1927. The Constituent Assembly met in its domed Central Hall to frame the Constitution of India. 144 sandstone columns ring its verandah; it was renamed Samvidhan Sadan in 2023.
22. Rashtrapati Bhavan Raisina Hill, New Delhi · 1912-1929 · Lutyens’ Delhi The official residence of the President of India, designed by Edwin Lutyens. It has 340 rooms on four floors. Its great dome blends a classical form with the shape of the Buddhist stupa at Sanchi.
23. Humayun’s Tomb Nizamuddin, New Delhi · 1565-1572 · Mughal Commissioned by Humayun’s widow, Empress Bega Begum, and designed by Mirak Mirza Ghiyas. The first garden-tomb on the Indian subcontinent, and a model for the Taj Mahal. A UNESCO World Heritage Site since 1993.
24. Jama Masjid Chandni Chowk, Old Delhi · 1650-1656 · Mughal Built by Shah Jahan, facing the Red Fort across the old city. Its courtyard can hold about 25,000 worshippers. Three marble domes striped in black crown the prayer hall, flanked by two tall minarets.
25. New Parliament House Sansad Marg, New Delhi · 2020-2023 · Contemporary Inaugurated on 28 May 2023, beside the 1927 building it replaced. Its triangular plan was designed by the architect Bimal Patel. A 6.5 m bronze National Emblem crowns the roof above the central Constitution Hall.
26. Dilwara Temples Mount Abu, Rajasthan · 11th-13th