A simple to use holographic material for React Three Fiber

by React

Holographic Material for React Three Fiber

A simple to use holographic material for threejs

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

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.

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

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 },
    hologramColor: { value: "#51a4de" },
    enableBlinking: true,
  });

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.

GitHub

View Github