[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81256":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":12,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":15,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":18,"hasPages":16,"topics":19,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},81256,"tsl-scifi-earth","hexianWeb\u002Ftsl-scifi-earth","hexianWeb","Three.js WebGPU \u002F TSL 粒子地球與 Flyline 可視化，Tweakpane 即時調參。","https:\u002F\u002Ftsl-scifi-earth.vercel.app",null,"JavaScript",21,3,0,1.81,false,"tsl-earth-publish",true,[20,21,22,23],"earth","threejs","tsl","webgpu","2026-06-12 02:04:12","[English](README.en.md)\n\n# 粒子地球 Flyline 可視化（Three.js WebGPU · TSL）\n\n以 **WebGPU** 與 **Three.js Shading Language（TSL）** 實作的即時 3D 可視化——粒子陸地、六邊形底紋、能量光暈、多條 **Flyline** 弧線連接全球節點，並具 **Tweakpane** 即時調參與 **TSL 後製管線**（bloom、暈影）。目標是呈現資料大屏／科幻 FUI 風格，同時落在現代瀏覽器圖形管線上。\n\n![執行畫面：粒子地球、Flyline、除錯面板](docs\u002Fpreview.png)\n\n---\n\n## 專案目標與定位\n\n- 在 **單頁 Web** 上達成可展示、可反覆調整的 **高科技感地球場景**，適合作為大屏 Demo、技術分享或面試作品集演示。\n- 以 **節點化著色（TSL）** 與 **WebGPU** 實作後製與渲染，對齊 Three.js 現行推進方向，而非僅沿用傳統 WebGL 管線。\n\n---\n\n## 實作亮點（履歷可摘錄）\n\n| 方向 | 內容 |\n|------|------|\n| 即時渲染 | `WebGPURenderer` 非同步初始化、畫面與像素比適配 |\n| 著色與後製 | `RenderPipeline` + `pass` \u002F `BloomNode`；暈影以 TSL（`uv`、`smoothstep`、uniform）合成 |\n| 場景複雜度 | 萬級粒子陸地、多層幾何與特效模組並存（內球、邊界、護盾、飛線等） |\n| 資料與動效 | 樞紐／目標經緯度驅動飛線；可調延遲、錯開、循環與播放控制 |\n| 工程化 | **Vite** 開發與打包；模組化 `Experience` \u002F `World` \u002F 各 `world\u002F*.js`；**Tweakpane** 分組除錯的 `debuggerInit` 接線 |\n\n---\n\n## 畫面與互動（精要）\n\n- **粒子陸地**：依貼圖閾值分佈粒子，可調數量、尺寸、衰減、明暗變化。\n- **Flyline**：樞紐至多地節點的弧線動畫，支援時間編排與播放控制。\n- **特效**：能量護盾、邊界點、點擊波、閃爍等可透過面板開關與調參。\n- **互動**：點擊畫面觸發波紋與既有粒子／邊界聯動。\n\n---\n\n## 技術棧\n\n| 項目 | 說明 |\n|------|------|\n| 渲染 | [Three.js](https:\u002F\u002Fthreejs.org\u002F) **WebGPU**（`three\u002Fwebgpu`） |\n| 著色 \u002F 後製 | **TSL**（`three\u002Ftsl`） |\n| 構建 | [Vite](https:\u002F\u002Fvitejs.dev\u002F) 5 |\n| 調參 UI | [Tweakpane](https:\u002F\u002Ftweakpane.github.io\u002Fdocs\u002F) |\n| 動畫 | [GSAP](https:\u002F\u002Fgsap.com\u002F) |\n\n**環境**：需支援 **WebGPU** 的瀏覽器（建議新版 Chrome／Edge 等）。\n\n---\n\n## 本地執行\n\n```bash\nnpm install\nnpm run dev\n```\n\n```bash\nnpm run build   # 輸出至 dist\u002F\n```\n\n---\n\n## 程式結構（精簡）\n\n| 路徑 | 用途 |\n|------|------|\n| `src\u002Fapp\u002FExperience.js` | 場景生命週期、World／Renderer 組裝 |\n| `src\u002Frenderer\u002FRenderer.js` | `WebGPURenderer`、`RenderPipeline`、bloom + vignette |\n| `src\u002Fworld\u002Fworld.js` | 聚合粒子球、飛線、護盾、內球、邊界點、點擊波等 |\n| `src\u002Fworld\u002F*.js` | 各視覺模組與除錯欄位 |\n| `src\u002Futils\u002Fdebug.js` | Tweakpane 與各模組接線 |\n| `vite.config.js` | `root: src\u002F`、`public\u002F`、建置輸出 |\n\n---\n\n## 參考資料（TSL \u002F WebGPU）\n\n- [Three.js Shading Language（官方說明）](https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fwiki\u002FThree.js-Shading-Language)\n- [TSL Q&A](https:\u002F\u002Fgithub.com\u002Fboytchev\u002Ftsl-textures\u002Fwiki\u002FQ&A)\n- [Three.js WebGPU 範例](https:\u002F\u002Fthreejs.org\u002Fexamples\u002F?q=webgpu#webgpu_parallax_uv)\n- [TSL 編輯器範例](https:\u002F\u002Fthreejs.org\u002Fexamples\u002F?q=webgpu#webgpu_tsl_editor)\n\n---\n\n## 授權\n\n若公開倉庫並允許他人改作，建議於根目錄補上 `LICENSE`（例如 MIT）。\n","该项目是一个基于Three.js和WebGPU的3D可视化应用，用于展示粒子地球与Flyline连接效果。它利用了Three.js Shading Language (TSL) 实现高级渲染效果如bloom、晕影，并通过Tweakpane提供即时参数调整功能。核心特性包括异步WebGPURenderer初始化、支持万级粒子动态分布及多层几何体特效组合显示等。适合于需要高科技感视觉呈现的大屏展示、技术分享或个人作品集场景中使用。",2,"2026-06-11 04:04:05","CREATED_QUERY"]