Turn any URL into a living, scannable 3D voxel nature diorama.
Walk, sprint, sit beneath blooming sakura trees, and explore seasonal weather in real-time WebGL.
GardenQR bridges the gap between functional utility (scannable QR codes) and high-end 3D game art (isometric voxel nature dioramas).
- State A — 3D Nature Island Diorama (Isometric View):
A lush floating garden featuring a blooming cherry blossom tree, an alpine mountain with a cascading waterfall pouring into a lotus pond, a royal Rajasthani chhatri pavilion, and a traditional torana entrance gateway. - State B — Scannable Pixel-Art QR Code (Top-Down Orthographic View):
With a tap, the camera glides upward and the 3D meshes seamlessly resolve into a 100% camera-scannable QR code using High-Level error correction (Level H). Finder patterns are formed by garden hedges and planters, while data modules are formed by canopy foliage and sandstone paving tiles.
Step onto the island as an explorer with fully articulated limbs, expressive features, and third-person/first-person locomotion.
- Locomotion: Smooth WASD walk & sprint with directional character rotation and gravity-based jumping.
- Carved Sandstone Benches: Walk up to any carved bench in the park and press E to sit down and enjoy the scenery.
- Face-Up Sky Rest: Press X to lie flat on the grass facing up at the sky, watching petals and stars drift overhead.
- Pointer Lock Mouse Look: Press L for immersive free-look camera control.
Experience 4 dynamic seasons with real-time day/night cycles, lighting transitions, and physical weather particles:
| Season | Theme & Atmosphere | Weather Particles | Paving & Foliage |
|---|---|---|---|
| 🌸 Spring | Vasant Ritu • Holi Gulal warm sunlight | Swirling Sakura Petals | Pink Cherry Blossoms & Kota Sandstone |
| ☀️ Summer | Grishma Ritu • Golden radiant sunlight | Sun Dust Sparkles | Lush Emerald Neem & Jaisalmer Yellow Stone |
| 🍁 Autumn | Sharad Ritu • Diwali amber twilight | Falling Maple Leaves | Deep Saffron Orange & Rustic Terracotta |
| ❄️ Winter | Shishir Ritu • Himalayan morning frost | Gentle Snowfall | Frost Pine & Frosted Grey Slate |
Customize every aspect of the centerpiece tree in real time via the Tree Studio drawer:
- Species: Sakura Cherry Blossom, Bonsai, Alpine Pine, Weeping Willow, and Autumn Maple.
- Canopy Radius & Leaf Density: Up to 4,500 instanced foliage quads with multi-tone shading.
- Branch Complexity & Wind Sway: Configurable wind physics and bough curvature.
Every visual aspect of your customized garden is preserved directly in the URL:
- Parameters Encoded:
id,data,season,night,palette,tree,radius,leafCount,leafSize,branch,wind,th(camera azimuth),ph(camera polar angle),explore, andmode. - Locked View-Only Mode (
mode=view):- Completely hides authoring panels, inputs, and drawers.
- Leaves only clean, obsidian glassmorphism top-right buttons for presentation and embeds.
- Ideal for embedding into personal websites, digital art showcases, and physical prints.
- GPU Wind Sway: Group-level trigonometric deformation eliminating 4,500-instance CPU matrix loops (+20 FPS gain).
- Diurnal Light Culling: Hides diya lamps and point lights during daylight passes.
- Eco / Performance Mode: Header toggle button to pause particle physics and heavy shaders on battery-powered mobile devices.
| Key | Action | Description |
|---|---|---|
| W A S D | Move | Walk in 8 directions relative to camera view |
| Shift | Sprint | Run at high speed across the courtyard |
| Space | Jump | Jump with realistic vertical gravity physics |
| E | Sit / Stand | Sit on nearest carved sandstone bench or courtyard lawn |
| X | Lie Down | Lie flat on back with face looking up at the sky |
| V | Camera View | Toggle between 3rd-Person Chase & 1st-Person Eye Level |
| L | Mouse Lock | Toggle Pointer Lock for mouse camera look |
| ESC | Exit | Exit Explorer mode and return to Orbit camera |
- Core Engine: Three.js (r173+) WebGL 3D Renderer
- Bundler & Dev Server: Vite 6.1+
- Animations & Tweens: GSAP (GreenSock Animation Platform)
- QR Code Matrix:
qrcode(LevelHHigh Error Correction) - Audio Synthesis: Web Audio API (Procedural pentatonic chimes, water ripples, tree rustling)
- Icons: Lucide Icons
- Typography: Inter & Outfit (Google Web Fonts)
- Node.js (v18.0.0 or higher)
npmoryarn
git clone https://github.com/Celicular/GardenQR.git
cd GardenQRnpm installnpm run devOpen http://localhost:5173/ in your browser.
npm run buildProduction assets will be output to the ./dist directory.
This repository includes a render.yaml blueprint for instant static site hosting:
- Push your repository to GitHub.
- Link your repository in Render Dashboard.
- Render will automatically detect
render.yaml, executenpm install && npm run build, and serve./distwith SPA rewrites and asset cache headers.
Created with ❤️ by Celi
Owner: Himadri Shekhar Goswami
📧 Email: hsg090907.jsr@gmail.com
🐙 GitHub: @Celicular
🌐 Live Demo: https://gardenqr.celi.me
This project is licensed under the MIT License — see the LICENSE file for details.