Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ektogamat/threejs-vanilla-holographic-material
A simple to use holographic material for vanilla threejs
https://github.com/ektogamat/threejs-vanilla-holographic-material
creative-coding glsl-shader glsl-shaders hologra holographic-material shaders threejs threejs-material
Last synced: 3 months ago
JSON representation
A simple to use holographic material for vanilla threejs
- Host: GitHub
- URL: https://github.com/ektogamat/threejs-vanilla-holographic-material
- Owner: ektogamat
- License: mit
- Created: 2023-11-30T22:20:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-23T05:30:05.000Z (about 1 year ago)
- Last Synced: 2024-10-12T22:15:39.327Z (4 months ago)
- Topics: creative-coding, glsl-shader, glsl-shaders, hologra, holographic-material, shaders, threejs, threejs-material
- Language: JavaScript
- Homepage: https://threejs-vanilla-holographic-material.vercel.app/
- Size: 6.37 MB
- Stars: 70
- Watchers: 1
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Holographic Material for Vanilla Three.js
A simple to use holographic material for threejs
Live link: https://threejs-vanilla-holographic-material.vercel.app/
CodeSandBox simplest example: https://codesandbox.io/p/sandbox/three-js-vanilla-holographic-material-8clmrd
# Introduction
Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla three.js. This enchanting three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.
While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.
# HOW TO USE?
You can see a video tutorial on how to use it here: https://www.youtube.com/watch?v=EPcd8iEcna8
### 1: Download the Material
Create a new file with the contents of [this gist](https://gist.github.com/ektogamat/b149d9154f86c128c9fea52c974dda1a) on your project and save it as 'HolographicMaterialVanilla.js'
### 2: Import the material
```
import HolographicMaterial from './HolographicMaterialVanilla.js'
```
### 3: Add this as a material for your mesh
```
// ...
const geometry = new THREE.BoxGeometry();
const holographicMaterial = new HolographicMaterial();
const cube = new THREE.Mesh(geometry, holographicMaterial);
scene.add(cube);
// ...
...
```
### 4: Update the material inside the render loop
```
// ...
const tick = () => {
holographicMaterial.update() // Update the holographic material time uniform
window.requestAnimationFrame(tick)
}
tick()
// ...
```
That's all that you need to use this material. Of course, you can customize it as shown below.
# Properties
| Name | Type | Default | Description |
| ------------------ | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| fresnelAmount | Number | 0.45 | Controls the value of the Fresnel effect. Ranges from 0.0 to 1.0. |
| fresnelOpacity | Number | 1.0 | Controls the opacity of the Fresnel effect. Ranges from 0.0 to 1.0. |
| scanlineSize | Number | 8.0 | Controls the size of the scanlines. Ranges from 1 to 15. |
| hologramBrightness | Number | 1.2 | Controls the brightness of the hologram. Ranges from 0.0 to 2.0. |
| signalSpeed | Number | 0.45 | Controls the speed of the signal effect. Ranges from 0.0 to 2.0. |
| hologramColor | String | "#00d5ff" | Specifies the color of the hologram. Use hexadecimal format. |
| enableBlinking | Boolean | true | Enables or disables the blinking effect. Defaults to true. |
| hologramOpacity | Number | 1.0 | Specifies the opacity of the hologram. Defaults to 1.0. |
| enableBlinking | Boolean | true | Enables or disables the blinking effect. Defaults to true. |
| blinkFresnelOnly | Boolean | true | Enables or disables the blinking effect for the Fresnel only. Defaults to true. |
| enableAdditive | Boolean | true | Enables or disables the Additive Blend Mode. Defaults to true. |
| side | THREE.FrontSide, THREE.BackSide, THREE.DoubleSide | FrontSide | Specifies side for the material, as String. Options are "FrontSide", "BackSide", "DoubleSide". Defaults to "THREE.FrontSide". |
Here is an example of how you can pass these props. If you pass any of those props, the default values will be overwritten.
```
const holographicMaterial = new HolographicMaterial({
fresnelAmount: 0.2,
fresnelOpacity: 0.15,
hologramBrightness: 0.7,
scanlineSize: 6,
signalSpeed: 2.3,
hologramColor: "#ff0000",
hologramOpacity: 1.0,
blinkFresnelOnly: true,
enableBlinking: true,
enableAdditive: true,
side: THREE.FrontSide,
});
```
You can also use dat.GUI to create a panel, like in the demo, so you can tweak the parameters live.
```
// Add dat.GUI controls
const gui = new dat.GUI();
gui.add(holographicMaterial, 'fresnelAmount', 0.0, 1.0).name('Fresnel Amount');
gui.add(holographicMaterial, 'fresnelOpacity', 0.0, 1.0).name('Fresnel Opacity');
gui.add(holographicMaterial, 'scanlineSize', 1.0, 15.0).name('Scanline Size');
gui.add(holographicMaterial, 'hologramBrightness', 0.0, 2.0).name('Hologram Brightness');
gui.add(holographicMaterial, 'signalSpeed', 0.0, 2.0).name('Signal Speed');
gui.addColor(holographicMaterial, 'hologramColor').name('Hologram Color');
gui.add(holographicMaterial, 'enableBlinking').name('Enable Blinking');
gui.add(holographicMaterial, 'blinkFresnelOnly').name('Blink Fresnel Only');
gui.add(holographicMaterial, 'hologramOpacity', 0.0, 1.0).name('Hologram Opacity');
gui.add(holographicMaterial, 'enableAdditive').name('Enable Additive');
```
### License
This component is an open-source creation released under the (MIT) license. While you're free to integrate and innovate with it, I would genuinely appreciate knowing when this HolographicMaterial component sparks creativity in your projects!
### Resources
Resources: [Threejs](https://threejs.org/), [WebGL](https://github.com/KhronosGroup/WebGL), [Poimanders post processing](https://github.com/pmndrs/postprocessing)
# Can you leave a star please?
Would be really appreciated if you are willing to give me a star here on GitHub 🎉 or buy me a coffee ☕ https://www.buymeacoffee.com/andersonmancini. The money will be used to produce more content about threejs or to buy new courses.