[Feature]: implement Procedural Rain and Puddle shader subsystem

[prakshithamalla-art]

Feature Description

I propose the addition of a RainWeather.tsx component. This will introduce a cinematic rainstorm effect to the city, featuring a GPU-accelerated particle system for falling raindrops and a custom fragment shader for the ground to simulate dynamic puddle ripples.

Problem it Solves

The project needs diverse weather states for environmental testing. A rain effect adds massive atmospheric depth, showcasing advanced shader capabilities and particle management.

Alternatives Considered

• Using DOM elements or HTML overlays (Rejected: Looks flat and breaks 3D immersion).
• Physics-based collisions for every drop (Rejected: CPU intensive).

Additional Context

The rain will use a wrapped THREE.Points system that stays locked near the camera, giving the illusion of an infinite storm with only a few thousand particles.

Acknowledgements

• I have searched existing issues to make sure this is not a duplicate.
• I have read the CONTRIBUTING.md guidelines.
• ⭐ I have starred this repository! (We prioritize issue assignments for stargazers)

[prakshithamalla-art]

Proposed Solution

To build the Rain subsystem safely and performantly, I will:

1. Particle System: Use THREE.Points with a custom BufferGeometry. I will randomize the initial Y-axis velocities. In the useFrame loop, particles that fall below y=0 will have their positions wrapped back to the sky to recycle geometry.
2. Camera Locking: The particle bounding box will continuously follow the user's camera (without rotating), ensuring the storm always surrounds the viewer without needing to render rain across the entire 10,000-unit city grid.
3. Puddle Shader: I will apply a localized ShaderMaterial to the ground that uses time-based sine waves and procedural noise to generate concentric ring ripples, mimicking rain hitting puddles.

[github-actions]

Hey @prakshithamalla-art, thank you for raising this issue! 🙌

This has been flagged for the project admin to review. We will discuss it internally and get back to you with next steps.

In the meantime, please make sure you've provided:

• 📝 A clear description of the problem or feature request
• 🖼️ Screenshots or logs if applicable
• 📂 Relevant file paths or code references

Sit tight — we'll update you soon! 💙

[prakshithamalla-art]

Proposed Solution
To build the Rain subsystem safely and performantly, I will:

Particle System: Use THREE.Points with a custom BufferGeometry. I will randomize the initial Y-axis velocities. In the useFrame loop, particles that fall below y=0 will have their positions wrapped back to the sky to recycle geometry.
Camera Locking: The particle bounding box will continuously follow the user's camera (without rotating), ensuring the storm always surrounds the viewer without needing to render rain across the entire 10,000-unit city grid.
Puddle Shader: I will apply a localized ShaderMaterial to the ground that uses time-based sine waves and procedural noise to generate concentric ring ripples, mimicking rain hitting puddles.

assign this issue plsss

[prakshithamalla-art]

@Ixotic27 assign this issue pls

[github-actions]

✅ Admin Approved!

Hi @prakshithamalla-art, this issue has been reviewed and approved by the project maintainers. Since you raised this issue, you have been automatically assigned to it! 🚀

⏰ Deadline: You have 48 hours from this exact moment to submit a Pull Request.

📝 Important - PR Submission Rules:

1. Branch Name: Please name your branch starting with the issue number (e.g., 424-feature-name).
2. PR Description: Make sure your Pull Request description includes Fixes #424.

🔒 This conversation will now be locked. Please use your Pull Request for any further discussion about this issue.