[{"data":1,"prerenderedAt":478},["ShallowReactive",2],{"navigation":3,"/experiments/particles-morphing":154,"authors":344},[4],{"title":5,"path":6,"stem":7,"children":8,"page":153},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Gelatinous Cube","/experiments/gelatinous-cube","experiments/gelatinous-cube",{"title":54,"path":55,"stem":56},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":58,"path":59,"stem":60},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":62,"path":63,"stem":64},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":66,"path":67,"stem":68},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":70,"path":71,"stem":72},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":74,"path":75,"stem":76},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":78,"path":79,"stem":80},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":82,"path":83,"stem":84},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":86,"path":87,"stem":88},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":90,"path":91,"stem":92},"Plexus Particles","/experiments/plexus-particles","experiments/plexus-particles",{"title":94,"path":95,"stem":96},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":98,"path":99,"stem":100},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":102,"path":103,"stem":104},"Rapier Basketball","/experiments/rapier-basketball","experiments/rapier-basketball",{"title":106,"path":107,"stem":108},"Rapier Vehicle","/experiments/rapier-car","experiments/rapier-car",{"title":110,"path":111,"stem":112},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":114,"path":115,"stem":116},"Rapier Wrecking Ball","/experiments/rapier-wrecking-ball","experiments/rapier-wrecking-ball",{"title":118,"path":119,"stem":120},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":122,"path":123,"stem":124},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":126,"path":127,"stem":128},"Space Game","/experiments/space-game","experiments/space-game",{"title":130,"path":131,"stem":132},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":134,"path":135,"stem":136},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":138,"path":139,"stem":140},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":142,"path":143,"stem":144},"Vue Fes Japan 2025","/experiments/vuefes-japan-2025","experiments/vuefes-japan-2025",{"title":146,"path":147,"stem":148},"WebGPU","/experiments/webgpu","experiments/webgpu",{"title":150,"path":151,"stem":152},"World Walker","/experiments/world-walker","experiments/world-walker",false,{"id":155,"title":86,"author":156,"body":157,"date":331,"description":332,"extension":333,"featured":153,"lastUpdated":334,"meta":335,"navigation":336,"path":87,"seo":337,"stem":88,"tags":338,"thumbnail":342,"__hash__":343},"experiments/experiments/particles-morphing.md","alvarosabu",{"type":158,"value":159,"toc":317},"minimark",[160,164,168,173,176,180,191,195,236,240,245,248,260,264,272,276,296,300,314],[161,162,86],"h1",{"id":163},"particles-morphing",[165,166,167],"p",{},"An advanced GPU-accelerated particle system that creates a mesmerizing morphing effect between two 3D models. This experiment demonstrates the power of custom shaders and attribute manipulation in TresJS.",[169,170,172],"h2",{"id":171},"overview","Overview",[165,174,175],{},"This experiment loads two 3D models and converts their vertices into particle systems. Using custom vertex and fragment shaders, the particles smoothly transition between the two geometries, creating a fluid morphing effect with customizable colors and animation.",[169,177,179],{"id":178},"inspiration","Inspiration",[165,181,182,183,190],{},"This experiment is inspired by one of ",[184,185,189],"a",{"href":186,"rel":187},"https://threejs-journey.com/",[188],"nofollow","Bruno Simon's"," excellent Three.js Journey lessons on particle morphing. The original concept has been adapted to showcase TresJS's declarative approach to working with custom shaders and buffer geometry.",[169,192,194],{"id":193},"key-features","Key Features",[196,197,198,206,212,218,224,230],"ul",{},[199,200,201,205],"li",{},[202,203,204],"strong",{},"GPU-Accelerated",": All morphing calculations happen on the GPU via custom shaders",[199,207,208,211],{},[202,209,210],{},"Adaptive Particle Count",": Automatically harmonizes vertex counts between different geometries",[199,213,214,217],{},[202,215,216],{},"Smooth Transitions",": Uses GSAP for buttery-smooth morphing animations",[199,219,220,223],{},[202,221,222],{},"Customizable Colors",": Real-time color mixing between two palettes",[199,225,226,229],{},[202,227,228],{},"Random Particle Sizes",": Each particle has a randomized size for visual variety",[199,231,232,235],{},[202,233,234],{},"Additive Blending",": Creates a glowing, ethereal effect",[169,237,239],{"id":238},"technical-highlights","Technical Highlights",[241,242,244],"h3",{"id":243},"geometry-harmonization","Geometry Harmonization",[165,246,247],{},"When morphing between models with different vertex counts, the system:",[249,250,251,254,257],"ol",{},[199,252,253],{},"Determines the maximum vertex count between both models",[199,255,256],{},"Pads the smaller geometry by randomly sampling existing vertices",[199,258,259],{},"Creates matched Float32BufferAttribute arrays for seamless interpolation",[241,261,263],{"id":262},"shader-implementation","Shader Implementation",[165,265,266,267,271],{},"The vertex shader interpolates between two position attributes using a ",[268,269,270],"code",{},"uProgress"," uniform, while the fragment shader creates a gradient between two colors with additive blending for a luminous effect.",[241,273,275],{"id":274},"controls","Controls",[196,277,278,284,290],{},[199,279,280,283],{},[202,281,282],{},"Color A & Color B",": Set the gradient colors for the particle system",[199,285,286,289],{},[202,287,288],{},"Progress",": Manual control over the morph transition (0.0 to 1.0)",[199,291,292,295],{},[202,293,294],{},"Morph Button",": Trigger an animated transition between the two shapes",[169,297,299],{"id":298},"models-used","Models Used",[196,301,302,308],{},[199,303,304,307],{},[202,305,306],{},"Blender Cube",": A simple geometric shape",[199,309,310,313],{},[202,311,312],{},"Pumpkinsaur",": A more complex organic model",[165,315,316],{},"Both models are simplified and compressed using Draco compression for optimal performance.",{"title":318,"searchDepth":319,"depth":319,"links":320},"",2,[321,322,323,324,330],{"id":171,"depth":319,"text":172},{"id":178,"depth":319,"text":179},{"id":193,"depth":319,"text":194},{"id":238,"depth":319,"text":239,"children":325},[326,328,329],{"id":243,"depth":327,"text":244},3,{"id":262,"depth":327,"text":263},{"id":274,"depth":327,"text":275},{"id":298,"depth":319,"text":299},"2025-12-20","GPU-accelerated particle system that smoothly morphs between 3D model geometries using custom shaders","md","2025-12-22",{},true,{"title":86,"description":332},[339,340,341],"particles","animation","shaders","/experiments/particles-morphing.webp","oFnnknhIc3oOuSxNd9mNZ34kkK4t5NAm9kgbFxR0EmU",[345,360,375,392,408,426,443,461],{"id":346,"title":347,"avatar":348,"body":349,"description":318,"email":353,"extension":333,"github":156,"meta":354,"name":156,"navigation":336,"path":355,"seo":356,"slug":156,"stem":357,"twitter":156,"website":358,"__hash__":359},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":158,"value":350,"toc":351},[],{"title":318,"searchDepth":319,"depth":319,"links":352},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":318},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":361,"title":362,"avatar":363,"body":364,"description":318,"email":368,"extension":333,"github":369,"meta":370,"name":369,"navigation":336,"path":371,"seo":372,"slug":369,"stem":373,"twitter":368,"website":368,"__hash__":374},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":158,"value":365,"toc":366},[],{"title":318,"searchDepth":319,"depth":319,"links":367},[],null,"andretchen0",{},"/authors/andretchen0",{"description":318},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":376,"title":377,"avatar":378,"body":379,"description":318,"email":383,"extension":333,"github":384,"meta":385,"name":386,"navigation":336,"path":387,"seo":388,"slug":384,"stem":389,"twitter":390,"website":368,"__hash__":391},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":158,"value":380,"toc":381},[],{"title":318,"searchDepth":319,"depth":319,"links":382},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":318},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":393,"title":394,"avatar":395,"body":396,"description":318,"email":368,"extension":333,"github":400,"meta":401,"name":402,"navigation":336,"path":403,"seo":404,"slug":400,"stem":405,"twitter":406,"website":368,"__hash__":407},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":158,"value":397,"toc":398},[],{"title":318,"searchDepth":319,"depth":319,"links":399},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":318},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":409,"title":410,"avatar":411,"body":412,"description":318,"email":416,"extension":333,"github":417,"meta":418,"name":410,"navigation":336,"path":419,"seo":420,"slug":421,"stem":422,"twitter":423,"website":424,"__hash__":425},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":158,"value":413,"toc":414},[],{"title":318,"searchDepth":319,"depth":319,"links":415},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":318},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":427,"title":428,"avatar":429,"body":430,"description":318,"email":434,"extension":333,"github":435,"meta":436,"name":437,"navigation":336,"path":438,"seo":439,"slug":437,"stem":440,"twitter":434,"website":441,"__hash__":442},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":158,"value":431,"toc":432},[],{"title":318,"searchDepth":319,"depth":319,"links":433},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":318},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":444,"title":445,"avatar":446,"body":447,"description":318,"email":451,"extension":333,"github":452,"meta":453,"name":454,"navigation":336,"path":455,"seo":456,"slug":452,"stem":457,"twitter":458,"website":459,"__hash__":460},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":158,"value":448,"toc":449},[],{"title":318,"searchDepth":319,"depth":319,"links":450},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":318},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":462,"title":463,"avatar":464,"body":465,"description":318,"email":469,"extension":333,"github":470,"meta":471,"name":463,"navigation":336,"path":472,"seo":473,"slug":470,"stem":474,"twitter":475,"website":476,"__hash__":477},"authors/authors/neosoulink.md","Neosoulink","/avatars/neosoulink.jpg",{"type":158,"value":466,"toc":467},[],{"title":318,"searchDepth":319,"depth":319,"links":468},[],"neodarksoulink@gmail.com","neosoulink",{},"/authors/neosoulink",{"description":318},"authors/neosoulink","nsl_nathan","https://github.com/Neosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1787004690994]