silk-background-three.js

A beautiful animated silk texture background effect created with Three.js and custom GLSL shaders.

---

Overview

This project creates a smooth, flowing silk-like animation that fills the entire viewport. The effect is generated entirely through shader-based rendering, providing excellent performance even on lower-end devices.

---

Features

• Shader-Based Animation: Custom vertex and fragment shaders create a procedural silk texture effect
• Dynamic Patterns: Combines sine waves and noise functions for organic, fluid motion
• Customizable Parameters:
  • uColor: Background color (default: purple #8604f8)
  • uSpeed: Animation speed multiplier
  • uScale: Pattern scale
  • uRotation: UV rotation angle
  • uNoiseIntensity: Noise distortion strength
• Responsive Design: Automatically adjusts to window resizing
• High Performance: Optimized rendering with pixel ratio handling

---

Usage

Simply open index.html in a modern web browser. The animation will begin automatically.

---

Customization

You can modify the uniform values in three.js to change the appearance:

const uniforms = {
  uTime: { value: 0 },
  uSpeed: { value: 0.5 },        // Increase for faster animation
  uScale: { value: 1.0 },        // Increase for larger patterns
  uRotation: { value: 0.0 },     // Rotate the pattern
  uNoiseIntensity: { value: 1.5 }, // Increase for more texture
  uColor: { value: new THREE.Color('#8604f8') } // Change color
};

---

Technical Details

Shaders

Vertex Shader: Passes UV coordinates to the fragment shader for texture mapping.

Fragment Shader:

• Implements a custom noise function for randomization
• Applies UV rotation and scaling
• Generates wave patterns using sine functions
• Combines multiple frequency layers for visual complexity

Scene Setup

• Uses an orthographic camera for 2D rendering
• Creates a simple plane geometry that covers the entire viewport
• Implements WebGL rendering with antialiasing enabled

---

Requirements

• Modern web browser with WebGL support
• Internet connection (loads Three.js from CDN)

---

Browser Support

Works on all modern browsers that support:

• WebGL
• ES6 modules
• Three.js r160

---

🤝 Contributing

Pull requests are welcome!

To contribute:

1. Fork the repository
2. Create a new branch
3. Add your changes
4. Open a PR

---

⭐ Support

If you like this project, consider giving it a star ⭐ on GitHub — it helps a lot.

---

🌐 Social & Links

---

📝 License

© 2025 ViratiAkiraNandhanReddy. This project is licensed under the MIT License.

---

👤 Author

Developed by ViratiAkiraNandhanReddy

💤 - PASSIVE MAINTENANCE : Mean the project is no longer actively developed ( NO New Features And Regular Updates ), but the maintainer will respond only when an issue or PR is raised. Feel free to fork and continue development!

---

🌟 Questions, suggestions, or want to contribute? Open an issue or pull request on GitHub! 🌟