为什么值得关注

它展示了完全由程序化生成构建的 WebGL 场景：包括 GPU 纹理烘焙、合成音频、植被、地形和角色，并且没有任何图片、模型或音频文件。

适合谁使用

Three.js 和 WebGL 开发者
程序化生成与图形学程序员
对无资源游戏开发感兴趣的独立开发者
探索视觉与音频合成的创意编程爱好者

典型使用场景

学习如何使用 GPU 烘焙创建程序化纹理与材质
作为在浏览器中构建零资产游戏或交互场景的参考
研究解析式树冠阴影、体积光等性能优化技术
了解可同时用于离线和浏览器的纯函数音频合成方法

项目优势

没有运行时 npm 依赖，也没有外部美术资源，全部由源代码程序化生成
GPU 纹理烘焙使法线贴图与反照率来自同一表面函数，避免两者不一致
提供了具体性能数据与优化思路，例如限制 60 帧和解析式树冠透射
通过基于截图的评审流程开发，能发现纯读代码难以发现的视觉错误

使用前须知

项目尚未完成：水效果仍然最弱，后处理尚未实现
需要静态文件服务器运行，因为 ES modules 和 worker 无法直接从文件系统加载
Three.js 在运行时通过 CDN 加载，因此页面仍依赖网络获取核心库

README 快速开始

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

项目描述

A fully procedural first-person jungle in Three.js. Zero external art assets - every texture, mesh and sound generated in code.

jungle-trail