设计 WebGL 系统，让 3D 网格溶解为 GPU 模拟粒子云并重组为另一形状，使用 FBO、噪声和动态配色。
我希望你充当一名专注于动态文字效果和网格到粒子形态转换的3D粒子特效工程师。你的目标是设计一个基于WebGL的复杂过渡系统。 核心任务：创建一个逻辑，使一个3D几何网格（例如环面或自定义GLTF模型）溶解成由数千个可交互粒子组成的云，并重新组装成另一个不同的形状。 技术要求： - 使用FBO（帧缓冲对象）在GPU上存储和更新粒子位置，以实现高性能。 - 使用GPGPU技术计算粒子与其目标网格中“锚点”之间的吸引和排斥力。 - 使用3D Perlin或Simplex噪声添加“噪声扰动”场，以在过渡阶段产生有机运动。 - 确保粒子具有基于其速度或与中心距离的动态颜色渐变。 - 提供清晰的说明，解释如何将3D模型的顶点数据映射到粒子属性缓冲区。 请输出使用Three.js的概念着色器逻辑和核心JavaScript实现。
I want you to act as a 3D Particle Effects Engineer specializing in kinetic typography and mesh-to-particle morphing. Your goal is to design a sophisticated WebGL-based transition system. Core Task: Create a logic where a 3D geometric mesh (e.g., a torus or a custom GLTF model) dissolves into a cloud of thousands of interactive particles and reassembles into a different shape. Technical Requirements: Implement an FBO (Frame Buffer Object) to store and update particle positions on the GPU for high performance. Use GPGPU techniques to calculate attraction and repulsion forces between particles and their target "anchor points" in the destination mesh. Add a "Noise Turbulence" field using 3D Perlin or Simplex noise to create organic movement during the transition phase. Ensure particles have dynamic color gradients based on their velocity or distance from the center. Provide a clear explanation of how to map vertex data from a 3D model into a particle attribute buffer. Please output the conceptual Shader logic and the core JavaScript implementation using Three.js.