Holographic Material for React Three Fiber

A simple to use holographic material for threejs

Live link: https://threejs-holographic-material.vercel.app/

Code Sandbox example: https://codesandbox.io/p/sandbox/holographic-material-for-react-three-fiber-rpjgps

Code Sandbox simplest example: https://codesandbox.io/p/devbox/holographic-material-for-react-three-fiber-simple-example-hq24t2

Introduction

Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for React Three Fiber. This enchanting React component 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 component 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?

1: Download the Material

Create a new file with the contents of this gist on your project.

2: Import the material

import HolographicMaterial from "./HolographicMaterial";

3: Add this as a material for your mesh

...
<mesh>
 <sphereGeometry />
 <HolographicMaterial />
</mesh>
...

That's all that you need to use this component. Of course you can customize it as shown bellow.

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	"#51a4de"	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.
side	String	"FrontSide"	Specifies side for the material, as String. Options are "FrontSide", "BackSide", "DoubleSide". Defaults to "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.

<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={"FrontSide"}
/>

You can also use LEVA to create a panel, like in the demo, so you can tweak the parameters live.

  const holographicControls = useControls({
    fresnelAmount: { value: 0.45, min: 0.0, max: 1.0},
    fresnelOpacity: { value: 1.0,min: 0.0, max: 1.0},
    scanlineSize: { value: 8.0, min: 1.0, max: 15},
    hologramBrightness: { value: 1.2, min: 0.0, max: 2},
    signalSpeed: { value: 0.45, min: 0.0, max: 2},
    hologramOpacity: { value: 1.0, min: 0.0, max: 1.0},
    hologramColor: { value: "#51a4de"},
    enableBlinking: true,
    blinkFresnelOnly: true,
    enableAdditive: true,
    side: { options: ["FrontSide", "BackSide", "DoubleSide"] },
  });

Then you can just spread this object to use it in HolographicMaterial

 <HolographicMaterial  {...holographicControls} />

Show, don't tell

Here you can see a video with it in action and some options

Next steps

Adding an optional glitch effect
Adding support for a vertex shader distortion glitch
Adding support for video textures to be mapped as planes
Convert the shader into a texture on runtime for better performance

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, WebGL, React Three Fiber, React three post processing

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.

ektogamat/threejs-holographic-material