[{"data":1,"prerenderedAt":197},["ShallowReactive",2],{"embed-particles-morphing":3},{"id":4,"title":5,"author":6,"body":7,"date":181,"description":182,"extension":183,"featured":184,"lastUpdated":185,"meta":186,"navigation":187,"path":188,"responsive":184,"seo":189,"stem":190,"tags":191,"thumbnail":195,"__hash__":196},"experiments\u002Fexperiments\u002Fparticles-morphing.md","Particles Morphing","alvarosabu",{"type":8,"value":9,"toc":167},"minimark",[10,14,18,23,26,30,41,45,86,90,95,98,110,114,122,126,146,150,164],[11,12,5],"h1",{"id":13},"particles-morphing",[15,16,17],"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.",[19,20,22],"h2",{"id":21},"overview","Overview",[15,24,25],{},"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.",[19,27,29],{"id":28},"inspiration","Inspiration",[15,31,32,33,40],{},"This experiment is inspired by one of ",[34,35,39],"a",{"href":36,"rel":37},"https:\u002F\u002Fthreejs-journey.com\u002F",[38],"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.",[19,42,44],{"id":43},"key-features","Key Features",[46,47,48,56,62,68,74,80],"ul",{},[49,50,51,55],"li",{},[52,53,54],"strong",{},"GPU-Accelerated",": All morphing calculations happen on the GPU via custom shaders",[49,57,58,61],{},[52,59,60],{},"Adaptive Particle Count",": Automatically harmonizes vertex counts between different geometries",[49,63,64,67],{},[52,65,66],{},"Smooth Transitions",": Uses GSAP for buttery-smooth morphing animations",[49,69,70,73],{},[52,71,72],{},"Customizable Colors",": Real-time color mixing between two palettes",[49,75,76,79],{},[52,77,78],{},"Random Particle Sizes",": Each particle has a randomized size for visual variety",[49,81,82,85],{},[52,83,84],{},"Additive Blending",": Creates a glowing, ethereal effect",[19,87,89],{"id":88},"technical-highlights","Technical Highlights",[91,92,94],"h3",{"id":93},"geometry-harmonization","Geometry Harmonization",[15,96,97],{},"When morphing between models with different vertex counts, the system:",[99,100,101,104,107],"ol",{},[49,102,103],{},"Determines the maximum vertex count between both models",[49,105,106],{},"Pads the smaller geometry by randomly sampling existing vertices",[49,108,109],{},"Creates matched Float32BufferAttribute arrays for seamless interpolation",[91,111,113],{"id":112},"shader-implementation","Shader Implementation",[15,115,116,117,121],{},"The vertex shader interpolates between two position attributes using a ",[118,119,120],"code",{},"uProgress"," uniform, while the fragment shader creates a gradient between two colors with additive blending for a luminous effect.",[91,123,125],{"id":124},"controls","Controls",[46,127,128,134,140],{},[49,129,130,133],{},[52,131,132],{},"Color A & Color B",": Set the gradient colors for the particle system",[49,135,136,139],{},[52,137,138],{},"Progress",": Manual control over the morph transition (0.0 to 1.0)",[49,141,142,145],{},[52,143,144],{},"Morph Button",": Trigger an animated transition between the two shapes",[19,147,149],{"id":148},"models-used","Models Used",[46,151,152,158],{},[49,153,154,157],{},[52,155,156],{},"Blender Cube",": A simple geometric shape",[49,159,160,163],{},[52,161,162],{},"Pumpkinsaur",": A more complex organic model",[15,165,166],{},"Both models are simplified and compressed using Draco compression for optimal performance.",{"title":168,"searchDepth":169,"depth":169,"links":170},"",2,[171,172,173,174,180],{"id":21,"depth":169,"text":22},{"id":28,"depth":169,"text":29},{"id":43,"depth":169,"text":44},{"id":88,"depth":169,"text":89,"children":175},[176,178,179],{"id":93,"depth":177,"text":94},3,{"id":112,"depth":177,"text":113},{"id":124,"depth":177,"text":125},{"id":148,"depth":169,"text":149},"2025-12-20","GPU-accelerated particle system that smoothly morphs between 3D model geometries using custom shaders","md",false,"2025-12-22",{},true,"\u002Fexperiments\u002Fparticles-morphing",{"title":5,"description":182},"experiments\u002Fparticles-morphing",[192,193,194],"particles","animation","shaders","\u002Fexperiments\u002Fparticles-morphing.webp","u2G8z40_R7pY34iGE3OA10tGqzQM4JvKu3wFyWRXMsE",1791549577853]