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