[{"data":1,"prerenderedAt":441},["ShallowReactive",2],{"navigation":3,"/experiments/particles-morphing":134,"authors":324},[4],{"title":5,"path":6,"stem":7,"children":8,"page":133},"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],{"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},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":54,"path":55,"stem":56},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":58,"path":59,"stem":60},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":62,"path":63,"stem":64},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":66,"path":67,"stem":68},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":70,"path":71,"stem":72},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":74,"path":75,"stem":76},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":78,"path":79,"stem":80},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":82,"path":83,"stem":84},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":86,"path":87,"stem":88},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":90,"path":91,"stem":92},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":94,"path":95,"stem":96},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":98,"path":99,"stem":100},"Rapier Wrecking Ball","/experiments/rapier-wrecking-ball","experiments/rapier-wrecking-ball",{"title":102,"path":103,"stem":104},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":106,"path":107,"stem":108},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":110,"path":111,"stem":112},"Space Game","/experiments/space-game","experiments/space-game",{"title":114,"path":115,"stem":116},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":118,"path":119,"stem":120},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":122,"path":123,"stem":124},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":126,"path":127,"stem":128},"Vue Fes Japan 2025","/experiments/vuefes-japan-2025","experiments/vuefes-japan-2025",{"title":130,"path":131,"stem":132},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":135,"title":82,"author":136,"body":137,"date":311,"description":312,"extension":313,"featured":133,"lastUpdated":314,"meta":315,"navigation":316,"path":83,"seo":317,"stem":84,"tags":318,"thumbnail":322,"__hash__":323},"experiments/experiments/particles-morphing.md","alvarosabu",{"type":138,"value":139,"toc":297},"minimark",[140,144,148,153,156,160,171,175,216,220,225,228,240,244,252,256,276,280,294],[141,142,82],"h1",{"id":143},"particles-morphing",[145,146,147],"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.",[149,150,152],"h2",{"id":151},"overview","Overview",[145,154,155],{},"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.",[149,157,159],{"id":158},"inspiration","Inspiration",[145,161,162,163,170],{},"This experiment is inspired by one of ",[164,165,169],"a",{"href":166,"rel":167},"https://threejs-journey.com/",[168],"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.",[149,172,174],{"id":173},"key-features","Key Features",[176,177,178,186,192,198,204,210],"ul",{},[179,180,181,185],"li",{},[182,183,184],"strong",{},"GPU-Accelerated",": All morphing calculations happen on the GPU via custom shaders",[179,187,188,191],{},[182,189,190],{},"Adaptive Particle Count",": Automatically harmonizes vertex counts between different geometries",[179,193,194,197],{},[182,195,196],{},"Smooth Transitions",": Uses GSAP for buttery-smooth morphing animations",[179,199,200,203],{},[182,201,202],{},"Customizable Colors",": Real-time color mixing between two palettes",[179,205,206,209],{},[182,207,208],{},"Random Particle Sizes",": Each particle has a randomized size for visual variety",[179,211,212,215],{},[182,213,214],{},"Additive Blending",": Creates a glowing, ethereal effect",[149,217,219],{"id":218},"technical-highlights","Technical Highlights",[221,222,224],"h3",{"id":223},"geometry-harmonization","Geometry Harmonization",[145,226,227],{},"When morphing between models with different vertex counts, the system:",[229,230,231,234,237],"ol",{},[179,232,233],{},"Determines the maximum vertex count between both models",[179,235,236],{},"Pads the smaller geometry by randomly sampling existing vertices",[179,238,239],{},"Creates matched Float32BufferAttribute arrays for seamless interpolation",[221,241,243],{"id":242},"shader-implementation","Shader Implementation",[145,245,246,247,251],{},"The vertex shader interpolates between two position attributes using a ",[248,249,250],"code",{},"uProgress"," uniform, while the fragment shader creates a gradient between two colors with additive blending for a luminous effect.",[221,253,255],{"id":254},"controls","Controls",[176,257,258,264,270],{},[179,259,260,263],{},[182,261,262],{},"Color A & Color B",": Set the gradient colors for the particle system",[179,265,266,269],{},[182,267,268],{},"Progress",": Manual control over the morph transition (0.0 to 1.0)",[179,271,272,275],{},[182,273,274],{},"Morph Button",": Trigger an animated transition between the two shapes",[149,277,279],{"id":278},"models-used","Models Used",[176,281,282,288],{},[179,283,284,287],{},[182,285,286],{},"Blender Cube",": A simple geometric shape",[179,289,290,293],{},[182,291,292],{},"Pumpkinsaur",": A more complex organic model",[145,295,296],{},"Both models are simplified and compressed using Draco compression for optimal performance.",{"title":298,"searchDepth":299,"depth":299,"links":300},"",2,[301,302,303,304,310],{"id":151,"depth":299,"text":152},{"id":158,"depth":299,"text":159},{"id":173,"depth":299,"text":174},{"id":218,"depth":299,"text":219,"children":305},[306,308,309],{"id":223,"depth":307,"text":224},3,{"id":242,"depth":307,"text":243},{"id":254,"depth":307,"text":255},{"id":278,"depth":299,"text":279},"2025-12-20","GPU-accelerated particle system that smoothly morphs between 3D model geometries using custom shaders","md","2025-12-22",{},true,{"title":82,"description":312},[319,320,321],"particles","animation","shaders","/experiments/particles-morphing.webp","oFnnknhIc3oOuSxNd9mNZ34kkK4t5NAm9kgbFxR0EmU",[325,340,355,372,388,406,423],{"id":326,"title":327,"avatar":328,"body":329,"description":298,"email":333,"extension":313,"github":136,"meta":334,"name":136,"navigation":316,"path":335,"seo":336,"slug":136,"stem":337,"twitter":136,"website":338,"__hash__":339},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":138,"value":330,"toc":331},[],{"title":298,"searchDepth":299,"depth":299,"links":332},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":298},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":341,"title":342,"avatar":343,"body":344,"description":298,"email":348,"extension":313,"github":349,"meta":350,"name":349,"navigation":316,"path":351,"seo":352,"slug":349,"stem":353,"twitter":348,"website":348,"__hash__":354},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":138,"value":345,"toc":346},[],{"title":298,"searchDepth":299,"depth":299,"links":347},[],null,"andretchen0",{},"/authors/andretchen0",{"description":298},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":356,"title":357,"avatar":358,"body":359,"description":298,"email":363,"extension":313,"github":364,"meta":365,"name":366,"navigation":316,"path":367,"seo":368,"slug":364,"stem":369,"twitter":370,"website":348,"__hash__":371},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":138,"value":360,"toc":361},[],{"title":298,"searchDepth":299,"depth":299,"links":362},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":298},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":373,"title":374,"avatar":375,"body":376,"description":298,"email":348,"extension":313,"github":380,"meta":381,"name":382,"navigation":316,"path":383,"seo":384,"slug":380,"stem":385,"twitter":386,"website":348,"__hash__":387},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":138,"value":377,"toc":378},[],{"title":298,"searchDepth":299,"depth":299,"links":379},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":298},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":389,"title":390,"avatar":391,"body":392,"description":298,"email":396,"extension":313,"github":397,"meta":398,"name":390,"navigation":316,"path":399,"seo":400,"slug":401,"stem":402,"twitter":403,"website":404,"__hash__":405},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":138,"value":393,"toc":394},[],{"title":298,"searchDepth":299,"depth":299,"links":395},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":298},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":407,"title":408,"avatar":409,"body":410,"description":298,"email":414,"extension":313,"github":415,"meta":416,"name":417,"navigation":316,"path":418,"seo":419,"slug":417,"stem":420,"twitter":414,"website":421,"__hash__":422},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":138,"value":411,"toc":412},[],{"title":298,"searchDepth":299,"depth":299,"links":413},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":298},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":424,"title":425,"avatar":426,"body":427,"description":298,"email":431,"extension":313,"github":432,"meta":433,"name":434,"navigation":316,"path":435,"seo":436,"slug":432,"stem":437,"twitter":438,"website":439,"__hash__":440},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":138,"value":428,"toc":429},[],{"title":298,"searchDepth":299,"depth":299,"links":430},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":298},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1782052341832]