shricodev/particles_morph_prompt.md Secret

Implement a single‐file HTML+JavaScript demo using Three.js and WebGL that displays a cloud of GPU‐accelerated particles which the user can morph among several predefined shapes. Your code must import and use anything that's required. here's some that you might require:

The demo must include:

• Particle System & Morph Targets

  • Start with particles arranged as a sphere.
  • Provide three alternative morph targets:
    1. A sphere
    2. A stylized bird in flight
    3. A human face
    4. A tree
  • Smoothly tween particle positions when switching targets.

• Post‐Processing & Lighting

  • Set up an EffectComposer with a RenderPass and an UnrealBloomPass.
  • Use GammaCorrectionShader to correct final output.
  • Add minimal ambient + directional light so morph targets are visible.

• Camera & Controls

  • Use OrbitControls for mouse/touch rotation, pan, and zoom.
  • Center the camera on the particle cloud.

• UI Sliders & Dat.GUI (or similar)

  • Particle size (range 0.1 → 5.0)
  • Rotation speed (−2.0 → 2.0 radians/sec)
  • Particle color (hue selector or hex input)
  • Bloom strength (0.0 → 3.0)
  • Motion trail opacity (0.0 → 1.0)
  • Morph target selector (Sphere, Face, Bird, Text)

• Performance Considerations

  • Use a single BufferGeometry with custom attributes to drive GPU particle positions.
  • Update positions in a ShaderMaterial vertex shader.

• No External Assets

  • Procedurally generate geometry for the face mesh, bird, and text.
  • You may use Three.js’s built-in TextGeometry or simple custom paths.

• Deliverables

  • A single index.html file containing all HTML, CSS, and JS.
  • Inline <script> and <style> tags only—no module bundler.
  • Thorough comments explaining:
    1. How morph targets are built and interpolated
    2. Shader logic for GPU particle updates
    3. How postprocessing pipeline is assembled

Remember: your goal is to implement a complete, runnable demo in one shot. Reason step‐by‐step to ensure you include every import, initialization, GUI control, morph target, and postprocessing pass correctly.