Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/hologram_p22
🚧 Under Maintenance ⁞|⁞ ⚪Three.js 🔵GLSL
https://github.com/shahramshakiba/hologram_p22
Last synced: 2 days ago
JSON representation
🚧 Under Maintenance ⁞|⁞ ⚪Three.js 🔵GLSL
- Host: GitHub
- URL: https://github.com/shahramshakiba/hologram_p22
- Owner: ShahramShakiba
- Created: 2024-07-30T14:00:52.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-30T15:55:08.000Z (4 months ago)
- Last Synced: 2024-07-30T20:02:25.476Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 243 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
_Hologram_ 
### 
_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"_ .
## HoloFX: Bringing Sci-Fi Holograms to Life
> ## Overview
#### Welcome to HoloFX! 🎉✨
This project explores the creation of mesmerizing holographic materials often seen in sci-fi movies like Star Wars. We use Three.js and GLSL Shaders to render three iconic shapes: a sphere, a torus knot, and Suzanne the monkey. The holographic effect is achieved primarily through fragment shaders, with a vertex shader glitch effect adding dynamic waves to the vertices.
#### In this project, we're crafting three iconic shapes:
🌐 Sphere
🔗 Torus Knot
🐵 Suzanne the Monkey
These shapes will be transformed into stunning holographic objects with a mix of fragment and vertex shaders. The fragment shader will handle most of the holographic effects, while the vertex shader will introduce a glitch effect, making the vertices wave and move in a dynamic, unpredictable manner.
### The Challenge
Creating realistic and interactive holographic effects involves several challenges:
- Achieving the right visual variation based on the angle between the face and the camera (Fresnel effect).
- Adding dynamic vertex glitches to simulate a hologram’s instability.
- Balancing visual aesthetics with real-time rendering performance.
### The Solution
🛠️ By leveraging Three.js and GLSL Shaders, we developed a series of shaders to create holographic effects. The fragment shader handles most of the visual effects, while the vertex shader adds a glitchy, wave-like distortion to the vertices. The Fresnel effect is crucial in giving the holograms their characteristic glow and depth.
> ## Applications and Use Cases
#### _This smoke effect project has several applications across different industries_:
1. ***`Entertainment`***:
Enhancing sci-fi movies, TV shows, and video games with realistic holograms.
2. ***`Education`***:
Demonstrating advanced shader techniques in computer graphics courses.
3. ***`Augmented Reality`***:
Creating engaging AR experiences with holographic visuals.
4. ***`Virtual Reality`***:
Adding immersive holograms in VR environments.
5. ***`Art Installations`***:
Producing interactive digital art with futuristic aesthetics.
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.
- **Fresnel effect**: ...
### Key Features
- **Realistic holographic materials**: ...
- **Dynamic vertex glitch effects**: ...
- **Customizable shader parameters**: ...
- **Interactive real-time rendering**: ...
### 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. **`ShaderToy`**:
A platform for exploring and sharing custom GLSL shaders.
2. **`Three.js Examples`**:
Various shader examples demonstrating advanced effects.
3. **`Sci-Fi Hologram Tutorials`**:
Online tutorials focusing on creating holographic effects.
4. **`WebGL Fundamentals`**:
Learning the basics of WebGL and shader programming.
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
HoloShapes demonstrates the potential of Three.js and GLSL Shaders in creating stunning holographic effects. Whether you're a developer, artist, or educator, this project offers valuable insights and tools for your own holographic endeavors.
## References and Further Reading
- [Three.js Documentation](https://threejs.org/docs/)
- [GLSL Shaders](https://thebookofshaders.com/)
- [Fresnel Effect](https://en.wikipedia.org/wiki/Fresnel_equations)
- [Vertex and Fragment Shaders](https://learnopengl.com/Getting-started/Shaders)
## 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.