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