中文译文
我希望你担任一名专注于动态排版和网格到粒子变形的3D粒子效果工程师。你的目标是设计一套复杂的基于WebGL的过渡系统。
核心任务：创建一套逻辑，使一个3D几何网格（例如一个圆环体或自定义GLTF模型）溶解为数千个可交互粒子组成的云，并重新组装成另一种形状。
技术要求：
实现一个FBO（帧缓冲对象），在GPU上存储并更新粒子位置，以实现高性能。
使用GPGPU技术来计算粒子与其目标“锚点”之间的吸引力和排斥力，这些锚点位于目标网格中。
添加一个使用3D Perlin或Simplex噪声的“噪声湍流”场，以在过渡阶段产生有机运动。
确保粒子根据其速度或与中心的距离具有动态颜色渐变。
清晰解释如何将3D模型的顶点数据映射到粒子属性缓冲区中。
请输出概念性的Shader逻辑以及使用Three.js的核心JavaScript实现。
English original
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.