Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/raging-sea-simulation-p18
Raging Sea Simulation ⁞|⁞ This project simulates a raging sea using custom Shaders and Three.js ⁞|⁞ ⚪Three.js 🔵GLSL
https://github.com/shahramshakiba/raging-sea-simulation-p18
glsl opengl-shading-language shaders threejs
Last synced: 2 days ago
JSON representation
Raging Sea Simulation ⁞|⁞ This project simulates a raging sea using custom Shaders and Three.js ⁞|⁞ ⚪Three.js 🔵GLSL
- Host: GitHub
- URL: https://github.com/shahramshakiba/raging-sea-simulation-p18
- Owner: ShahramShakiba
- Created: 2024-07-22T11:20:45.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-25T13:55:43.000Z (4 months ago)
- Last Synced: 2024-07-25T16:05:14.573Z (4 months ago)
- Topics: glsl, opengl-shading-language, shaders, threejs
- Language: GLSL
- Homepage: https://raging-sea-shahram.netlify.app/
- Size: 2.39 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 
_Raging Sea Simulation_ 
### 
_Description_
> To begin with, it is important to note that, this project have been sourced from an exceptional `Three.js Journey` Course.
#### 👤 Instructed by a _proficient_ and _expert educator_ _"Bruno Simon"_ .
## Raging Sea
https://github.com/user-attachments/assets/39d2924e-bcd1-4a3c-a2c8-3cc3e72252ff
## Overview
This project simulates a raging sea using custom shaders and Three.js. The goal is to create a visually immersive and spooky scene by shaping a stormy sea, adding realistic fog, and simulating raindrops as particles.
## Features
#### 1. Custom Shaders:
- Utilized to shape the turbulent sea and create dynamic wave effects.
#### 2. Fog Effect:
- Added to the scene to enhance the eerie and spooky atmosphere.
#### 3. Rain Particles:
- Simulated using Three.js to reflect raindrops, contributing to the realism of a stormy sea.
#### 4. Audio:
- Includes ambient storm sound for an enhanced immersive experience.
#### 5. Performance Enhancements:
- Optimized rendering and resource management to improve performance and reduce system load.
#### 6. Pause and Resume:
- Added functionality to pause the simulation and sound when the user changes tabs, and resume them when the user returns.
#### 7. Destroy Method:
- Implemented a method to clean up resources when the user leaves the page to prevent memory leaks and improve performance.
## Technologies Used
> ### 1. Three.js:
For rendering 3D graphics and handling particle systems.
> ### 2. GLSL:
Custom shaders for creating the sea and wave effects.
> ### 3. HTML/CSS/JavaScript:
Standard web technologies for structuring and styling the project.
## Live Demo
#### Check out the live demo _here_ .
## Contributing
#### Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request. Here are the steps to contribute:
> #### 1. Fork the repository:
+ Click the "Fork" button on the top right of this page to create a copy of this repository in your GitHub account.
> #### 2. Clone your fork:
```bash
git clone https://github.com/your-username/your-repo.git
cd your-repo
```
> #### 3. Create a branch:
```bash
git checkout -b my-feature-branch
```
> #### 4. Make your changes:
+ Implement your feature or fix the bug.
> #### 5. Commit your changes:
```bash
git add .
git commit -m "Add my new feature"
```
> #### 6. Push to your fork:
```bash
git push origin my-feature-branch
```
> #### 7. Create a pull request:
+ Open a pull request on the original repository with a description of your changes.
## Contact 
> #### If you have any questions or need further assistance, feel free to reach out:
## Support 
> #### If you find this project helpful or interesting, please consider supporting me on GitHub.