Vanaspati — Virtual Herbal Garden
A 3D herbal garden where every plant is grown from its botanical description, including a walkable replica of my college's real Ayurvedic garden.
- Role
- 3D engineering, procedural plant generation and the Vanaspatyam campus replica
- Timeline
- Aug 2026 – Sep 2026 · Smart India Hackathon problem statement
- Stack
- React 19, TypeScript, Three.js, React Three Fiber, Tailwind CSS 4, Zustand, Vite
- Recognition
- Runner-up of 100 teams, KJSIT Internal Hackathon 2026
- medicinal species, grown from data
- 30
- downloaded 3D models
- 0
- beds replicated from the real garden
- 20
- narrated, camera-led tours
- 6
Overview
Vanaspati is an interactive 3D garden of 30 AYUSH medicinal plants that runs entirely in the browser. It holds two gardens: a teaching garden laid out by what the plants treat, and Vanaspatyam, a walkable replica of the Ayurvedic medicinal-plants garden on the Somaiya campus in Mumbai where my college, K. J. Somaiya Institute of Technology, stands.
The problem
Medicinal plants are taught from lists and herbarium photos. Students rarely see how a plant is built or which part carries the medicine, the Ayurvedic properties are memorised as words rather than understood, and most students never walk through a real herbal garden.
The approach
Grow every plant from its botanical description so the 3D model and the botany can never disagree, then plant them in two gardens: one arranged by what the plants treat, and a faithful copy of the real garden on my own campus that anyone can walk through from a browser.
AArchitecture
How it fits together
01Browser app
- React 19 + TypeScript 11 routes; every plant, bed and comparison is a shareable URL
- Zustand store Bookmarks, study notes and progress kept on the device
023D engine
- Procedural plant generator Leaf shape, phyllotaxy, branching and flowers from data
- One shared foliage shader Wind, venation and bark in a single program
- Day–night cycle One clock drives sky, sun, fog and fireflies
03Knowledge
- 30-species compendium Botany, Ayurvedic profile, names in 11 languages, cautions
- Ayurveda parser Rasa, virya, vipaka and dosha charts read from the prose
04Experiences
- Vanaspatyam replica 20 beds and the lily pond, walkable in first person
- Tours, atlas & quiz 6 narrated walks, data views, 40 click-the-plant questions
BEngineering decisions
The calls that mattered
- 01
Plants grown from their description, not downloaded
Every species is written as data: its archetype, height, leaf shape and arrangement, serration, branching and flower form. A seeded generator turns those numbers into geometry at run time, and the same numbers draw the 2D specimen plate on every card, so a square-stemmed mint really has a square stem and a neem frond really carries its leaflets.
- 30 species with no 3D model files
- Seeded, so a plant always grows the same way
- The same data drives the 3D model and the 2D plate
- A new species is about thirty lines of data
- 02
Rebuilding a real garden from its plan
Vanaspatyam is the Ayurvedic medicinal-plants garden on my college campus, opened on 12 February 2016. I rebuilt it from its surveyed plan (30 m by 25 m, a south gate, a 2.2 m central spine and a lily pond closing the north end) and dressed it from photographs taken standing in it: red lateritic soil, brick-kerbed beds, white label boards on black posts and the transmission pylons everyone recognises first. Hover a bed's board and its printed plant card opens, laid out like the real ones.
- 30 species in 20 beds and the pond
- Bed positions derived from the plan and checked against each other
- First-person walking with WASD and pointer lock
- Printed plant cards recreated for every bed
- 03
Fast enough for a classroom laptop
Each plant merges into at most six geometries, one per material, instead of hundreds of separate meshes. The lawn and bed planting are two instanced meshes of about 2,600 tufts, all foliage shares one compiled shader, and quality is detected from the device. There is no backend: narration uses the browser's own speech synthesis, and saved plants and notes never leave the visitor's device.
Before 100s meshes per plant, unmergedAfter ≤ 6 geometries per plant, merged- ~2,600 grass tufts in 2 draw calls
- One shared foliage shader program
- Quality auto-detected, overridable in settings
- Works offline after the first load
CIn the product
Screens
Outcome
Runner-up out of 100 teams at my college's internal hackathon in 2026, built for the Smart India Hackathon's Virtual Herbal Garden problem statement. Vanaspati is live on GitHub Pages, and the Vanaspatyam replica lets anyone walk my college's Ayurvedic garden from a browser.