[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81557":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":11,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":14,"rankGlobal":9,"rankLanguage":9,"license":15,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":18,"hasPages":18,"topics":19,"createdAt":9,"pushedAt":9,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":13,"starSnapshotCount":13,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},81557,"HLS_WebGPUPlugins","hlsvortex\u002FHLS_WebGPUPlugins","hlsvortex","Set of plugins for various things in webGPU",null,"TypeScript",25,6,0,42.54,"MIT License",false,"master",true,[],"2026-06-12 04:01:34","# 🌍 WebGPU Terrain Engine\n\n![WebGPU Terrain Engine Screenshot](public\u002Fscreenshot.png)\n\nStay up to date with what im doing. Follow me here!\n\n[![Twitter](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002FHLS_dev?style=social)](https:\u002F\u002Ftwitter.com\u002FHLS_dev)\n[![YouTube](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FYouTube-@HyperLightGameDev-FF0000?style=flat&logo=youtube&logoColor=white)](https:\u002F\u002Fyoutube.com\u002F@HyperLightGameDev)\n[![Website](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-hyperlightstudios.xyz-0052FF?style=flat&logo=web)](https:\u002F\u002Fhyperlightstudios.xyz)\n[![Vibejam](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCreated_for-Vibejam_2026-8A2BE2?style=flat)](https:\u002F\u002Fvibej.am\u002F2026\u002F)\n\nOriginally Created for 2026 #Vibejam https:\u002F\u002Fvibej.am\u002F2026\u002F \nAgartha:Lost World - https:\u002F\u002Fvibe-jam-survival.vercel.app\u002F\n\n\n\nA modular, plugin-driven procedural terrain engine built on **Three.js r184 WebGPU** and **Vite**. It generates massive open-world landscapes entirely on the GPU using native WebGPU compute shaders, with real-time TSL (Three Shading Language) vertex displacement, procedural biome classification, dynamic water, foliage instancing, and atmospheric rendering — all running in the browser.\n\n> **Status:** Active development · Requires a WebGPU-capable browser (Chrome 113+, Edge 113+, or Firefox Nightly with `dom.webgpu.enabled`).\n\n---\n\n## ✨ Features\n\n| Category | Details |\n|---|---|\n| **Terrain** | 8 km² continuous heightfield with QuadTree LOD (7 levels), GPU compute displacement, procedural biomes, river carving, terracing, and cliff generation |\n| **Procedural Generation** | Graph-based Delaunay triangulation pipeline with domain-warped island shapes, ridged multifractal mountains, and configurable river networks |\n| **Water** | Infinite ocean plane with dual scrolling normal maps, depth-based shoreline foam, and PBR reflections |\n| **Vegetation** | High-density grass via `InstancedMesh` pools driven by the QuadTree, with TSL wind animation, player interaction push, and biome-aware density |\n| **Sky & Lighting** | Procedural Rayleigh\u002FMie atmospheric scattering, dynamic sun positioning, real-time PMREM environment baking |\n| **Post-Processing** | Native WebGPU Bloom, ACES Filmic tone mapping, and color grading |\n| **Fog** | Height-based volumetric fog with procedural noise for rolling mist |\n| **Player** | First-person controller with pointer lock, WASD movement, and terrain-clamped physics |\n| **Debug UI** | Full settings panel (Ctrl+F9) for live parameter tweaking with localStorage persistence |\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- **Node.js** ≥ 18\n- A **WebGPU-capable browser** (Chrome\u002FEdge 113+ recommended)\n\n### Install & Run\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FYOUR_USERNAME\u002FWebGPUPlugins.git\ncd WebGPUPlugins\nnpm install\nnpm run dev\n```\n\nOpen `http:\u002F\u002Flocalhost:5174` in your browser. Press **Ctrl+F9** to toggle the Debug UI.\n\n### Build for Production\n\n```bash\nnpm run build\nnpm run preview\n```\n\n---\n\n## 🏗️ Architecture\n\nThe engine uses a **Plugin Manager** pattern. A lightweight core provides the Three.js renderer, scene, and camera; all features are implemented as self-contained plugins that register into a shared lifecycle.\n\n```\n┌─────────────────────────────────────────────────┐\n│                   main.ts                       │\n│  WebGPURenderer · Scene · Camera · Clock        │\n└────────────────────┬────────────────────────────┘\n                     │ register \u002F initAll \u002F updateAll\n              ┌──────▼──────┐\n              │PluginManager│\n              └──────┬──────┘\n    ┌────────┬───────┼───────┬────────┬───────┐\n    ▼        ▼       ▼       ▼        ▼       ▼\n DebugUI   Sky    Terrain  Water   Grass  PostProcess\n           IBL    ├─GPUCompute       HeightFog\n                  ├─QuadTreeLOD      Player\n                  └─GraphGenerator   Camera\u002FInput\n```\n\n### Plugin Lifecycle\n\n| Phase | Method | Description |\n|---|---|---|\n| **Register** | `register(name, plugin)` | Injects `core` dependencies and adds the plugin to the map |\n| **Init** | `await plugin.init()` | One-time async setup (GPU pipelines, textures, UI registration) |\n| **Update** | `plugin.update(dt)` | Per-frame logic; skipped if the plugin is disabled via the UI |\n| **Dispose** | `plugin.dispose()` | Cleanup GPU resources and DOM elements |\n\n### GPU Pipeline\n\nThe terrain data flows through three sequential WebGPU compute passes:\n\n```\nGraphGenerator (CPU)        GPUCompute (GPU)                 QuadTreeLOD (Render)\n─────────────────────────────────────────────────────────────────────────────────\nDelaunay graph        ──►  height.compute.wgsl  ──►  TSL vertex displacement\n + river routing            biome.compute.wgsl       (heightTex → world Y)\n + rasterization            spawn.compute.wgsl       TSL fragment coloring\n                                                      (biomeTex → material)\n```\n\n---\n\n## 📁 Project Structure\n\n```\nWebGPUPlugins\u002F\n├── public\u002F                     # Static assets\n│   ├── heightmap.png           # Default heightmap (used in image mode)\n│   └── heightmap_rivers.png    # River overlay map\n├── src\u002F\n│   ├── main.ts                 # Entry point — boots renderer & PluginManager\n│   ├── core\u002F\n│   │   ├── PluginManager.ts    # Plugin lifecycle orchestrator\n│   │   ├── CameraManager.ts    # Camera state & cinematic modes\n│   │   └── InputController.ts  # Raw keyboard\u002Fmouse event normalizer\n│   ├── plugins\u002F\n│   │   ├── DebugUIPlugin.ts    # Settings panel & parameter persistence\n│   │   ├── TerrainPlugin.ts    # Terrain init, UI bindings, rebuild triggers\n│   │   ├── GrassPlugin.ts      # Instanced grass with wind & biome density\n│   │   ├── WaterPlugin.ts      # Infinite ocean with shoreline foam\n│   │   ├── SkyPlugin.ts        # Procedural atmosphere & sun\u002Fmoon\n│   │   ├── IBLPlugin.ts        # Dynamic PMREM environment baking\n│   │   ├── HeightFogPlugin.ts  # Volumetric height fog with noise\n│   │   ├── PostProcessPlugin.ts# Bloom & tone mapping\n│   │   ├── PlayerControllerPlugin.ts # FPS movement & terrain clamping\n│   │   ├── CameraPlugin.ts     # Camera orbit & follow modes\n│   │   └── InputPlugin.ts      # Input state forwarding to PluginManager\n│   ├── systems\u002F\n│   │   ├── TerrainSystem.js    # Orchestrates GPU compute + QuadTree + TSL material\n│   │   ├── GPUCompute.js       # Native WebGPU compute pipeline manager\n│   │   ├── QuadTreeLOD.js      # Camera-driven quadtree subdivision & mesh pooling\n│   │   └── GraphGenerator.js   # CPU-side Delaunay graph + river routing + rasterizer\n│   ├── gpu\u002F\n│   │   ├── height.compute.wgsl # Heightfield generation (FBM, terracing, river carving)\n│   │   ├── biome.compute.wgsl  # Biome classification from height\u002Fslope\u002Fmoisture\n│   │   └── spawn.compute.wgsl  # Foliage spawn density evaluation\n│   └── data\u002F\n│       └── CameraDB.ts         # Camera preset definitions\n├── package.json\n├── tsconfig.json\n└── index.html\n```\n\n---\n\n## 🔌 Plugins\n\n### Terrain\n\nThe terrain pipeline supports two generation modes:\n\n- **Image Mode (default):** Loads `heightmap.png` and `heightmap_rivers.png` from `public\u002F`, uploads them to the GPU, and processes them through the compute shaders.\n- **Procedural Mode (Delaunay):** Generates terrain entirely from math using a graph-based pipeline inspired by [Florian Hoenig's workflow](https:\u002F\u002Fx.com\u002Frianflo\u002Fstatus\u002F2037606948607299810) and [Red Blob Games' polygonal maps](https:\u002F\u002Fwww.redblobgames.com\u002Fmaps\u002Fterrain-from-noise\u002F).\n\nThe procedural pipeline offers these UI-exposed parameters:\n\n| Parameter | Description |\n|---|---|\n| Island Size | Radius of the landmass before dropping to ocean |\n| Noise Scale | Frequency of macro mountain features |\n| Noise Height | Amplitude of the ridged mountain noise |\n| Mountains | Coverage ratio — how much of the island is mountainous |\n| Hills Height | Amplitude of rolling hills in lowland areas |\n| Random Seed | Deterministic seed for reproducible generation |\n\n### Grass\n\nUses object-pooled `InstancedMesh` groups that attach to QuadTree leaf chunks. The TSL shader handles per-blade wind sway, gust variation, player proximity push, and biome-aware density\u002Fcoloring. Biome density is configurable per-biome (Beach, Grassland, Forest, Pine, Redwood, Jungle, Swamp, Mountain, Snow).\n\n### Water\n\nAn infinite `PlaneGeometry` tracks the camera and uses dual scrolling normal maps for wave animation. Depth-based shoreline foam is calculated by comparing the fragment depth against the scene depth buffer.\n\n### Sky & IBL\n\n`SkyPlugin` drives a procedural atmosphere (Rayleigh + Mie scattering). `IBLPlugin` bakes the sky into a PMREM cubemap on-demand when the sun position changes significantly, ensuring all PBR materials receive accurate ambient lighting and reflections.\n\n### Height Fog\n\nApplies volumetric fog below a configurable altitude threshold, with procedural noise domain warping to create rolling mist banks that animate over time.\n\n### Post-Processing\n\nIntercepts the render loop to apply WebGPU-native Bloom and ACES Filmic tone mapping via Three.js's node-based post-processing system.\n\n---\n\n## ⌨️ Controls\n\n| Key | Action |\n|---|---|\n| **W\u002FA\u002FS\u002FD** | Move forward \u002F left \u002F backward \u002F right |\n| **Mouse** | Look around (pointer lock) |\n| **Shift** | Sprint |\n| **Space** | Jump |\n| **Ctrl+F9** | Toggle Debug UI |\n\n---\n\n## 🛠️ Tech Stack\n\n| Technology | Purpose |\n|---|---|\n| [Three.js r184](https:\u002F\u002Fthreejs.org\u002F) | WebGPU renderer, scene graph, TSL shading |\n| [Vite 8](https:\u002F\u002Fvite.dev\u002F) | Dev server & build tooling |\n| [TypeScript 6](https:\u002F\u002Fwww.typescriptlang.org\u002F) | Type safety for plugins and core |\n| [Delaunator](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fdelaunator) | Fast 2D Delaunay triangulation for graph generation |\n| Native WebGPU | Compute shaders (WGSL) for terrain\u002Fbiome\u002Fspawn |\n\n---\n\n## 📄 License\n\n[MIT](LICENSE)\n\n---\n\n## 🙏 Acknowledgements\n\n- [Florian Hoenig (@rianflo)](https:\u002F\u002Fx.com\u002Frianflo) — Graph-based terrain generation workflow inspiration\n- [Red Blob Games](https:\u002F\u002Fwww.redblobgames.com\u002F) — Polygonal map generation concepts\n- [Three.js Team](https:\u002F\u002Fthreejs.org\u002F) — WebGPU renderer and TSL shading language\n- [Mapbox\u002FDelaunator](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fdelaunator) — Blazing fast Delaunay triangulation\n","HLS_WebGPUPlugins 是一个基于 Three.js 和 Vite 构建的模块化、插件驱动的程序化地形引擎。它利用 WebGPU 的计算着色器在 GPU 上生成大规模开放世界地形，支持实时顶点位移、程序化生物群落分类、动态水面、植被实例化和大气渲染等功能。项目采用 TypeScript 编写，具备 QuadTree LOD（7 级）、Delaunay 三角剖分流水线、无限海洋平面、高密度草丛、程序化大气散射及多种后期处理效果等技术特点。适用于需要在浏览器中实现高质量、高性能3D地形渲染的游戏开发或虚拟现实场景。",2,"2026-06-11 04:05:30","CREATED_QUERY"]