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