[{"data":1,"prerenderedAt":474},["ShallowReactive",2],{"navigation":3,"/experiments/particles-morphing":150,"authors":340},[4],{"title":5,"path":6,"stem":7,"children":8,"page":149},"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],{"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",false,{"id":151,"title":86,"author":152,"body":153,"date":327,"description":328,"extension":329,"featured":149,"lastUpdated":330,"meta":331,"navigation":332,"path":87,"seo":333,"stem":88,"tags":334,"thumbnail":338,"__hash__":339},"experiments/experiments/particles-morphing.md","alvarosabu",{"type":154,"value":155,"toc":313},"minimark",[156,160,164,169,172,176,187,191,232,236,241,244,256,260,268,272,292,296,310],[157,158,86],"h1",{"id":159},"particles-morphing",[161,162,163],"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.",[165,166,168],"h2",{"id":167},"overview","Overview",[161,170,171],{},"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.",[165,173,175],{"id":174},"inspiration","Inspiration",[161,177,178,179,186],{},"This experiment is inspired by one of ",[180,181,185],"a",{"href":182,"rel":183},"https://threejs-journey.com/",[184],"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.",[165,188,190],{"id":189},"key-features","Key Features",[192,193,194,202,208,214,220,226],"ul",{},[195,196,197,201],"li",{},[198,199,200],"strong",{},"GPU-Accelerated",": All morphing calculations happen on the GPU via custom shaders",[195,203,204,207],{},[198,205,206],{},"Adaptive Particle Count",": Automatically harmonizes vertex counts between different geometries",[195,209,210,213],{},[198,211,212],{},"Smooth Transitions",": Uses GSAP for buttery-smooth morphing animations",[195,215,216,219],{},[198,217,218],{},"Customizable Colors",": Real-time color mixing between two palettes",[195,221,222,225],{},[198,223,224],{},"Random Particle Sizes",": Each particle has a randomized size for visual variety",[195,227,228,231],{},[198,229,230],{},"Additive Blending",": Creates a glowing, ethereal effect",[165,233,235],{"id":234},"technical-highlights","Technical Highlights",[237,238,240],"h3",{"id":239},"geometry-harmonization","Geometry Harmonization",[161,242,243],{},"When morphing between models with different vertex counts, the system:",[245,246,247,250,253],"ol",{},[195,248,249],{},"Determines the maximum vertex count between both models",[195,251,252],{},"Pads the smaller geometry by randomly sampling existing vertices",[195,254,255],{},"Creates matched Float32BufferAttribute arrays for seamless interpolation",[237,257,259],{"id":258},"shader-implementation","Shader Implementation",[161,261,262,263,267],{},"The vertex shader interpolates between two position attributes using a ",[264,265,266],"code",{},"uProgress"," uniform, while the fragment shader creates a gradient between two colors with additive blending for a luminous effect.",[237,269,271],{"id":270},"controls","Controls",[192,273,274,280,286],{},[195,275,276,279],{},[198,277,278],{},"Color A & Color B",": Set the gradient colors for the particle system",[195,281,282,285],{},[198,283,284],{},"Progress",": Manual control over the morph transition (0.0 to 1.0)",[195,287,288,291],{},[198,289,290],{},"Morph Button",": Trigger an animated transition between the two shapes",[165,293,295],{"id":294},"models-used","Models Used",[192,297,298,304],{},[195,299,300,303],{},[198,301,302],{},"Blender Cube",": A simple geometric shape",[195,305,306,309],{},[198,307,308],{},"Pumpkinsaur",": A more complex organic model",[161,311,312],{},"Both models are simplified and compressed using Draco compression for optimal performance.",{"title":314,"searchDepth":315,"depth":315,"links":316},"",2,[317,318,319,320,326],{"id":167,"depth":315,"text":168},{"id":174,"depth":315,"text":175},{"id":189,"depth":315,"text":190},{"id":234,"depth":315,"text":235,"children":321},[322,324,325],{"id":239,"depth":323,"text":240},3,{"id":258,"depth":323,"text":259},{"id":270,"depth":323,"text":271},{"id":294,"depth":315,"text":295},"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":328},[335,336,337],"particles","animation","shaders","/experiments/particles-morphing.webp","oFnnknhIc3oOuSxNd9mNZ34kkK4t5NAm9kgbFxR0EmU",[341,356,371,388,404,422,439,457],{"id":342,"title":343,"avatar":344,"body":345,"description":314,"email":349,"extension":329,"github":152,"meta":350,"name":152,"navigation":332,"path":351,"seo":352,"slug":152,"stem":353,"twitter":152,"website":354,"__hash__":355},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":154,"value":346,"toc":347},[],{"title":314,"searchDepth":315,"depth":315,"links":348},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":314},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":357,"title":358,"avatar":359,"body":360,"description":314,"email":364,"extension":329,"github":365,"meta":366,"name":365,"navigation":332,"path":367,"seo":368,"slug":365,"stem":369,"twitter":364,"website":364,"__hash__":370},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":154,"value":361,"toc":362},[],{"title":314,"searchDepth":315,"depth":315,"links":363},[],null,"andretchen0",{},"/authors/andretchen0",{"description":314},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":372,"title":373,"avatar":374,"body":375,"description":314,"email":379,"extension":329,"github":380,"meta":381,"name":382,"navigation":332,"path":383,"seo":384,"slug":380,"stem":385,"twitter":386,"website":364,"__hash__":387},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":154,"value":376,"toc":377},[],{"title":314,"searchDepth":315,"depth":315,"links":378},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":314},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":389,"title":390,"avatar":391,"body":392,"description":314,"email":364,"extension":329,"github":396,"meta":397,"name":398,"navigation":332,"path":399,"seo":400,"slug":396,"stem":401,"twitter":402,"website":364,"__hash__":403},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":154,"value":393,"toc":394},[],{"title":314,"searchDepth":315,"depth":315,"links":395},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":314},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":405,"title":406,"avatar":407,"body":408,"description":314,"email":412,"extension":329,"github":413,"meta":414,"name":406,"navigation":332,"path":415,"seo":416,"slug":417,"stem":418,"twitter":419,"website":420,"__hash__":421},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":154,"value":409,"toc":410},[],{"title":314,"searchDepth":315,"depth":315,"links":411},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":314},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":423,"title":424,"avatar":425,"body":426,"description":314,"email":430,"extension":329,"github":431,"meta":432,"name":433,"navigation":332,"path":434,"seo":435,"slug":433,"stem":436,"twitter":430,"website":437,"__hash__":438},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":154,"value":427,"toc":428},[],{"title":314,"searchDepth":315,"depth":315,"links":429},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":314},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":440,"title":441,"avatar":442,"body":443,"description":314,"email":447,"extension":329,"github":448,"meta":449,"name":450,"navigation":332,"path":451,"seo":452,"slug":448,"stem":453,"twitter":454,"website":455,"__hash__":456},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":154,"value":444,"toc":445},[],{"title":314,"searchDepth":315,"depth":315,"links":446},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":314},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":458,"title":459,"avatar":460,"body":461,"description":314,"email":465,"extension":329,"github":466,"meta":467,"name":459,"navigation":332,"path":468,"seo":469,"slug":466,"stem":470,"twitter":471,"website":472,"__hash__":473},"authors/authors/neosoulink.md","Neosoulink","/avatars/neosoulink.jpg",{"type":154,"value":462,"toc":463},[],{"title":314,"searchDepth":315,"depth":315,"links":464},[],"neodarksoulink@gmail.com","neosoulink",{},"/authors/neosoulink",{"description":314},"authors/neosoulink","nsl_nathan","https://github.com/Neosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1785417194857]