Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/coffee-smoke-p21
Imagine a cozy scene with a steaming cup of coffee, where gentle smoke rises and swirls in the air. ⁞|⁞ ⚪Three.js 🔵GLSL
https://github.com/shahramshakiba/coffee-smoke-p21
coffee-smoke glsl-shaders three-js
Last synced: about 1 month ago
JSON representation
Imagine a cozy scene with a steaming cup of coffee, where gentle smoke rises and swirls in the air. ⁞|⁞ ⚪Three.js 🔵GLSL
- Host: GitHub
- URL: https://github.com/shahramshakiba/coffee-smoke-p21
- Owner: ShahramShakiba
- Created: 2024-07-28T13:29:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-30T14:49:07.000Z (4 months ago)
- Last Synced: 2024-10-11T22:06:39.274Z (about 1 month ago)
- Topics: coffee-smoke, glsl-shaders, three-js
- Language: GLSL
- Homepage: https://coffee-smoke-shahram.netlify.app/
- Size: 549 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
_Coffee Smoke_ 
### 
_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"_ .
## ☕️ Coffee Mug Smoke using Shader
https://github.com/user-attachments/assets/c9a1e1c2-0c49-41c5-b91a-e959c00d9dc2
> ## Overview
#### Welcome to the Coffee Smoke Project! ✨
🪄 Imagine a cozy scene with a steaming cup of coffee, where gentle smoke rises and swirls in the air.
This project lets you bring that serene moment to life with captivating smoke animations using vertex and fragment shaders by leveraging Perlin texture for improved performance.
Whether you're a shader enthusiast or a curious beginner, this project offers a fun and rewarding way to boost your skills. 🏅
### The Challenge
> Imagine this:
- You want to animate smoke rising from a coffee mug. It sounds simple, but it's a fantastic way to practice your shader skills! The table and mug are already modeled in Blender, so you're all set to focus on the smoke effect. 🗯️
### The Solution
🛠️ To keep things smooth and efficient, especially for web performance, we employ custom shaders and Perlin texture to achieve a realistic smoke appearance while maintaining performance efficiency.
The key steps include generating a Perlin noise texture, applying it to a particle system, and simulating the movement and diffusion of smoke particles.
This technique is a favorite in video games to ensure optimal performance.
### Key Considerations 🌟
When choosing a noise texture, remember these three essential tips:
1. ***Enough Variations***:
Ensure your texture has ample variations to avoid repetitive patterns and keep the smoke looking realistic.
2. ***Big Enough (at least 128x128)***:
Larger textures provide more detail, resulting in a smoother and more natural smoke effect.
3. ***Seamless Tiling***:
Your texture should tile seamlessly to avoid visible edges and ensure a continuous smoke flow.
> ## Applications and Use Cases
#### _This smoke effect project has several applications across different industries_:
1. ***`Film and Animation`***:
Enhancing visual storytelling by adding realistic smoke effects to scenes involving hot beverages or smoky environments.
2. ***`Video Games`***:
Creating immersive environments by simulating smoke from various sources such as mugs, chimneys, or campfires.
3. ***`Virtual Reality (VR) and Augmented Reality (AR)`***:
Improving realism in virtual environments by integrating dynamic smoke effects.
4. ***`Advertising and Marketing`***:
Developing eye-catching visuals for commercials or product presentations involving hot drinks.
5. ***`Web Development`***:
Adding engaging visual effects to websites, especially for interactive storytelling or product showcases.
By understanding and implementing this project, developers and artists can apply similar techniques to other particle-based effects, such as fog, fire, or magical particles.
> ## Technical Details
The project involves the following components:
- **Three.js**: A JavaScript library used to create and display animated 3D computer graphics in a web browser.
- **Custom Shaders**: Shaders written in GLSL (OpenGL Shading Language) to control the rendering of smoke particles.
- **Perlin Texture**: A precomputed Perlin noise texture used for simulating the smoke effect efficiently, avoiding the performance overhead of calculating Perlin noise in real-time.
### Key Features
- **Particle System**: Generating particles at the mug's surface to represent smoke particles.
- **Smoke Simulation**: Applying transformations and movements to simulate the rising and dispersing behavior of smoke.
- **Performance Optimization**: Using Perlin texture to enhance performance by precomputing noise patterns.
### Technologies and Tools Used
- **Programming Language**: JavaScript
- **Graphics Library**: Three.js
- **Shader Language**: GLSL
> ## Similar Projects and Techniques
The techniques used in this project are applicable to various other visual effects and simulations, such as:
1. **`Fog and Mist`**:
Simulating atmospheric effects for outdoor scenes in games or movies.
2. **`Fire and Explosions`**:
Using particle systems and noise textures to create dynamic fire or explosion effects.
3. **`Magical Effects`**:
Creating particle-based effects for magical spells or fantasy elements in games and animations.
4. **`Water and Liquid Simulations`**:
Simulating splashes, waves, or other fluid behaviors using similar particle system techniques.
By adapting the principles of custom shaders and Perlin textures, we can create a wide range of visual effects with efficient performance.
### Live Demo
#### Check out the live demo _here_ .
> ## Conclusion
This project showcases a method for creating realistic smoke effects using three.js and custom shaders with Perlin texture.
- The approach balances visual fidelity and performance, making it suitable for various applications in film, gaming, VR/AR, advertising, and web development.
- By exploring and expanding on the techniques demonstrated, developers can create a diverse array of visually compelling and efficient effects.
## References and Further Reading
- [Three.js Documentation](https://threejs.org/docs/)
- [GLSL Shaders](https://thebookofshaders.com/)
- [Perlin Noise](https://en.wikipedia.org/wiki/Perlin_noise)
- [Perlin Noise Texture](https://opengameart.org/content/noise-texture-pack)
## 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 enjoyed exploring this project, please consider supporting me on GitHub to keep the stars aligned.