[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81322":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":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},81322,"hologram-particles","cortiz2894\u002Fhologram-particles","cortiz2894","A real-time hologram particle effect built with Three.js WebGPU, TSL Node Shaders, and Next.js. This repository is a free open-source resource for the creative development community.","https:\u002F\u002Fhologram-particles.vercel.app",null,"TypeScript",67,20,44,4,0,1,6,23,48.27,false,"main",[],"2026-06-12 04:01:32","# Hologram Particles VFX\n\nA real-time hologram particle effect built with Three.js WebGPU, TSL Node Shaders, and Next.js.\nThis repository is a free open-source resource for the creative development community.\n\nIt includes a fully interactive **3D Playground** to explore every parameter of the effect in real time — particle count, lighting, noise displacement, mouse interaction, model morphing, bloom, and more.\n\n![Next.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNext.js-16.1-black?style=flat-square&logo=next.js)\n![Three.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FThree.js-0.182-black?style=flat-square&logo=three.js)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-5-blue?style=flat-square&logo=typescript)\n![WebGPU](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebGPU-native-orange?style=flat-square)\n\n---\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fb0cf8dd1-9178-4018-b74a-cfabce1b08b9\n\n\n\n> **Original design & concept — [igloo.inc](https:\u002F\u002Fwww.igloo.inc\u002F)**\n> Replica developed by Cortiz\n\n---\n\n## ✨ What is this?\n\n**Hologram Particles VFX** is a production-quality WebGPU particle system that turns any GLB model into an animated holographic cloud of 60,000 instanced spheres.\nIt is designed as a learning resource and a starting point for similar VFX in interactive 3D projects.\n\nKey highlights:\n\n- **TSL Node Shaders** — all GPU logic written in JavaScript, no GLSL files\n- **WebGPU native** — runs on Three.js r182 WebGPU renderer\n- **Any GLB** — load your own model via drag & drop, particles adapt automatically\n- **Live model morphing** — smooth three-phase transition between GLB models\n- **Fully parametric** — every visual property exposed via real-time GUI\n- **Zero external shader libraries** — everything is hand-written in TSL\n\n---\n\n## ⚡ Particle System Features\n\n### Geometry\n- **InstancedMesh** — 60,000 icosahedron spheres rendered in a single draw call\n- **GLB surface sampling** — positions and normals sampled via `MeshSurfaceSampler`, distributed proportionally by triangle area\n- **Dual normal blending** — per-particle blend between figure surface normal and sphere local normal for micro-volume shading\n\n### Shading (TSL)\n- **Wrapped diffuse lighting** — two-light model with softened terminator (`wrap` parameter)\n- **Volume strength** — blends figure macro-normal with sphere micro-normal for physical roundness\n- **Fractal noise displacement** — `mx_fractal_noise_vec3` drives particle animation along surface normals\n- **Animated noise mask** — controls which particles displace and by how much\n\n### Mouse Interaction\n- **Particle displacement** — particles pushed outward from cursor within a configurable radius\n- **Spring-damper physics** — per-particle return simulation with tunable stiffness and damping\n- **Dual glow system** — passive proximity glow + active velocity-driven glow with independent decay\n- **Camera spring** — XY translation + Z roll driven by cursor NDC position\n\n### Model Morphing\n- **Three-phase state machine** — deform out → morph → reform\n- **GPU lerp** — `mix(current, target, progress)` uniform drives all 60k particles simultaneously\n- **Transition glow** — particles with greatest displacement bloom brightest during morph\n- **Noise mask dissolve** — organic non-uniform deform controlled by mask contrast\n\n### Scene Elements\n- **Cylinder** — transparent Fresnel edge glow tube framing the figure\n- **Halo rings** — two pairs of rotating arcs at top and bottom of cylinder\n- **Dot grid** — animated floor grid with wave brightness\n\n### Post-processing\n- **Bloom** — WebGPU native bloom node, luminance-threshold with tunable strength and radius\n\n---\n\n## 🔍 Debug Modes\n\nBuilt-in debug visualizations for breakdown and presentation:\n\n| Button | Mode | Shows |\n|--------|------|-------|\n| `WF` | Wireframe | Edge geometry of the loaded GLB |\n| `FLAT` | Flat | Raw particle density, no lighting |\n| `NRM` | Normals | Surface normals as RGB color |\n| `NOI` | Noise | Raw fractal noise field as grayscale |\n| `LIT` | Lit | Combined grayscale diffuse + ambient |\n| `L1` | Light 1 | Light 1 contribution only |\n| `L2` | Light 2 | Light 2 contribution only |\n\nAll debug modes hide scene decorations (cylinder, rings, grid, header) for clean capture.\n\n---\n\n## 🎮 3D Playground\n\nA built-in development environment for exploring the effect in context.\n\n### Controls\n- Particle count, sphere size, auto-rotate speed\n- Two-light rig — position, color, intensity per light\n- Wrap, ambient, volume strength\n- Noise amplitude, scale, speed, gain\n- Mouse radius, strength, scatter, glow (passive + active)\n- Spring stiffness, damping, push strength\n- Camera spring stiffness and damping\n- Morph duration, reform duration, entrance animation with replay\n- Cylinder, rings, and grid toggles with individual parameters\n- Bloom strength and radius\n\n---\n\n## 🛠 Tech Stack\n\n- **Framework:** Next.js 16.1 (App Router)\n- **3D \u002F WebGL:** Three.js 0.182 (WebGPU renderer)\n- **Shaders:** TSL — Three.js Shading Language (GPU logic in JavaScript)\n- **Post-processing:** Three.js WebGPU bloom node\n- **GUI Controls:** Leva\n- **Animation:** GSAP\n- **Styling:** Tailwind CSS 4\n- **Language:** TypeScript\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm (recommended) or npm\n- A browser with WebGPU support (Chrome 113+, Edge 113+)\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https:\u002F\u002Fgithub.com\u002Fcortiz2894\u002Fcreative-boilerplate.git\n\n# Navigate to the project\ncd creative-boilerplate\n\n# Install dependencies\npnpm install\n\n# Start the development server\npnpm dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) to explore the effect.\n\n> **Note:** WebGPU is required. If the canvas is blank, check that your browser supports WebGPU at [webgpureport.org](https:\u002F\u002Fwebgpureport.org).\n\n---\n\n## 👨‍💻 Author\n\n**Christian Ortiz** — Creative Developer\n\n## 🔗 Connect\n\n- **Portfolio:** [cortiz.dev](https:\u002F\u002Fcortiz.dev)\n- **YouTube:** [@cortizdev](https:\u002F\u002Fyoutube.com\u002F@cortizdev)\n- **X (Twitter):** [@cortiz2894](https:\u002F\u002Ftwitter.com\u002Fcortiz2894)\n- **LinkedIn:** [Christian Daniel Ortiz](https:\u002F\u002Flinkedin.com\u002Fin\u002Fchristian-daniel-ortiz)\n\n## 📬 Contact\n\nFor inquiries, collaborations or questions: **cortiz2894@gmail.com**\n\n---\n\n⭐ If you found this useful, consider subscribing to my [YouTube channel](https:\u002F\u002Fyoutube.com\u002F@cortizdev) for more creative development content!\n","Hologram Particles VFX 是一个基于 Three.js WebGPU、TSL Node Shaders 和 Next.js 构建的实时全息粒子效果项目。该项目通过使用实例化网格技术，将任意 GLB 模型转换为由 60,000 个球体组成的动态全息云，并支持模型表面采样、双重法线混合等高级几何特性。此外，它还提供了丰富的着色选项，如包裹式漫反射光照和分形噪声位移，以及鼠标交互功能，包括粒子位移、弹簧阻尼物理模拟等。此项目非常适合用于创意开发社区中需要高质量视觉特效的3D互动项目的学习与实践。",2,"2026-06-11 04:04:36","CREATED_QUERY"]