hoainho
img2threejs
img2threejs reconstructs a 3D object from a single reference image as a procedural Three.js model using code-only, token-efficient, staged pipeline with quality gates, producing animation-ready Three.js groups.
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It demonstrates a complete visually rich WebGL scene made entirely from procedural generation, including GPU texture baking, synthesized audio, vegetation, terrain, and a character, with no image, model, or audio files.
Who it is for
- Three.js and WebGL developers
- Procedural generation and graphics programmers
- Indie game developers interested in asset-light worlds
- Creative coders exploring audio and visual synthesis
Use cases
- Learning how to build procedural textures and materials with GPU baking
- Reference for creating a zero-asset game or interactive scene in the browser
- Studying performance techniques like analytic canopy shadowing and raymarched volumetrics
- Exploring pure-function audio synthesis that works offline and in the browser
Strengths
- No runtime npm dependencies and no external art assets, with all procedural generation in source code
- Uses GPU texture baking so normal maps are derived from the same surface functions as albedo, avoiding mismatch
- Includes concrete performance data and optimization choices, such as capping at 60 fps and analytic canopy transmittance
- Built through a critic-based review process that caught visual bugs by examining rendered screenshots
Considerations
- The project is not finished: water is still the weakest system and post-processing is not implemented
- Requires a static file server because ES modules and workers do not run from the filesystem
- Three.js is loaded from a CDN at runtime, so the page still depends on a network fetch for its core library
README quick start
Jungle Trail
A first-person walk down a winding jungle trail into overgrown stone ruins with a waterfall, built in Three.js with zero external art assets. Every texture, mesh and sound in the scene is generated procedurally in code. There are no image files, no models, no audio recordings and no material libraries: the leaf atlas, the bark, the ground, the stone, the character's skin and all sixty audio buffers are computed at load time.
Live: https://starknightt.github.io/jungle-trail/
Running it locally
There is no build step. The page is plain ES modules with an importmap, so it only needs a static file server.
git clone https://github.com/StarKnightt/jungle-trail.git
cd jungle-trail
npm run serve
Then open http://localhost:8099/. Any other static server works equally well;
opening index.html from the filesystem does not, because ES modules and workers
need a real origin.
npm install is only needed for the capture tools in tools/, which use
Playwright. The game itself does not need it.
Controls
| Input | Action |
|---|---|
| Click | Lock the pointer |
| Mouse | Look |
| W A S D | Move |
| Shift | Sprint |
| Space | Jump |
| 1 - 5 | Teleport along the trail |
The teleport keys are 1 trailhead, 2 mid trail, 3 ruins approach, 4 temple clearing, 5 the falls.
What is in it
- ~12,000 lines of hand-written code across 51 files.
- A 423.8 m trail across a 180 x 492 m world, from a 361 x 985 heightfield sampled every 0.5 m.
- 100,799 individual plants across 16 species, all built from two primitives: a bent leaf card and a swept tube.
- 536 individually eroded stone blocks. The ruin plan is computed before the terrain, so the ground builds a terrace and spoil banks beneath the temple rather than the temple being dropped onto whatever the ground happened to do.
- A procedural character: 22 bones, 7,488 triangles, and a 512-square procedural body atlas.
- 15 GPU texture bakes producing 29 images. The leaf atlas is 2048-square; the bark and ground sets are 1024-square.
- 17 distinct synthesized voices and 60 audio buffers, baked in a worker on the first user gesture.
Performance
6.2 - 8.7 ms per frame on an RTX 4060 at 1600x900, at roughly 1,000 draw calls and 5.8 - 6.6 M triangles. The game caps itself at 60 fps; there is no reason for a walking-pace scene to render at 300.
Techniques
**GPU tex
Description
A fully procedural first-person jungle in Three.js. Zero external art assets - every texture, mesh and sound generated in code.
Related repositories
Similar projects matched by category, topics, and programming language.
0xsline
OpenChatCut
OpenChatCut is an open-source, local-first AI video editor with a real multitrack timeline, conversational agents, and MCP support, enabling AI-assisted editing that remains fully editable.
CatsJuice
Featured
sticker-forge
Sticker Forge is a WebGL tool that turns text or uploaded images into interactive stickers with a simulated peel-and-reveal effect, offering a Web Component and imperative API.