City-Lifeline-Cockpit/dynamic-component-service-master/openspec/changes/add-water-drop-glass-material-component/proposal.md

Why

The component library already includes several shader-driven panels and liquid effects, but it does not yet provide a reusable rain-on-glass material that behaves like real glass in the scene.

The requested reference page rain-on-glass.html from the pbakaus/radiant project uses a hybrid approach:

• CPU-side droplet simulation and canvas-stamped water maps
• shader-side refraction and highlight shaping
• a small set of tunable rain parameters

That visual language fits this repository well, but the old fullscreen page shell and fake skyline background do not. For this service, the final component should read as a real glass object that can show the actual scene behind it, while keeping the reference-style rain behavior.

What Changes

• Add a new waterDropGlassMaterialComponent rendered as a configurable glass box with adjustable length, width, and thickness.
• Port the reference droplet simulation into component-scoped TypeScript helpers that generate the dynamic waterMap and rain normal texture.
• Use a physical transmission glass material plus component-scoped shader hooks under src/shader/waterDropGlassMaterialComponent/ so the rain effect sits on top of the real preview scene behind the glass.
• Preserve configurable rain controls such as rain amount, drop radius, droplet rate, trail rate, and collision tuning.
• Replace the old fake-background refraction controls with real glass material controls such as transmission, IOR, roughness, clearcoat, attenuation distance, and normal strength.
• Remove fullscreen page logic, postMessage parameter plumbing, click / touch splash interaction, and the self-generated skyline from the final visible effect.
• Register the component through src/dcsConfig.ts with defaults, config controls, preview metadata, and a sensible default placement.
• Keep OpenSpec artifacts aligned with the final implementation and validation.

Capabilities

New Capabilities

• water-drop-glass-material-component: Provide a scene-aware rain-on-glass material component with animated droplets on a physical transmission glass body.

Modified Capabilities

• None.

Impact

• Affected code:
  • src/components/waterDropGlassMaterialComponent/
  • src/shader/waterDropGlassMaterialComponent/
  • src/dcsConfig.ts
  • public/preview/waterDropGlassMaterialComponent.svg
• APIs:
  • Adds new component props for glass dimensions, rain amount, drop sizing, droplet spawning, trail behavior, collision tuning, transmission, IOR, roughness, clearcoat, attenuation distance, droplet roughness, and rain normal strength.
• Dependencies:
  • Reuses existing three, @tresjs/core, three-custom-shader-material, and browser canvas APIs; no new dependency is required.
• Systems:
  • Adds a new component registration without modifying generic preview infrastructure files.
• Rollback strategy:
  • Remove the new registry entry from src/dcsConfig.ts, then delete the component folder, shader directory, preview asset, and the OpenSpec change folder.