Fake Glow Material for React Three Fiber

A simple to use glow material for react three fiber that can create glow effect from a mesh.

Live link: https://r3f-fake-glow-material.vercel.app/

Code Sandbox example: https://codesandbox.io/p/devbox/crazy-elbakyan-r8qz9n

Introduction

This material enables the utilization of a 3D mesh as a GLOW effect through GLSL Shaders, all without the need for any post-processing effects.

Unlike traditional approaches using post-processing, my new React Three Fiber material employs GLSL Shaders directly for creating glow effects on 3D meshes. This method avoids the usual performance hit associated with post-processing, such as the bloom effect, making it a more efficient solution for integrating glow effects in 3D scenes.

HOW TO USE?

1: Download the Material

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

Using TypeScript? Use this one instead - by (https://github.com/nirtamir2)

2: Import the material

import FakeGlowMaterial from './FakeGlowMaterial'

3: Add this as a material for your mesh

...
<mesh>
 <sphereGeometry />
 <FakeGlowMaterial />
</mesh>
...

Done. That's all that you need to use this component.

This effect is mesh based, meaning that you need to provide a mesh for this to work properly

When you give it a mesh, remember that it must be smooth enough so glsl can calculate normals and create the effect. For example, for sharp meshes like a cube, you can use a sphere to simulate the glow, instead of a copy of the cube.

❌ Bad: Cube mesh for glow	✅ Good: Sphere mesh for glow

Customization properties

You can use VSCODE Intellisense feature to get all the explanation for each property. Just press CRTL + SPACE BAR.

Here is an example of how you can pass these props. If you pass any of those props, the default values will be overwritten.

<FakeGlowMaterial
    falloff={0.2}
    glowInternalRadius={0.7}
    glowColor={"#ff0000"}
    glowSharpness={2.3}
    side={"THREE.FrontSide"}
    opacity={1.0}
    depthTest={false}
/>

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

const glowControls = useControls({
    falloff: { value: 0.45, min: 0.0, max: 1.0 },
    glowInternalRadius: { value: 0.7, min: -1.0, max: 1.0 },
    glowColor: { value: "#51a4de" },
    glowSharpness: { value: 1.0, min: 0.0, max: 2.0 },
    side: { value: "THREE.FrontSide", options: ["THREE.FrontSide", "THREE.BackSide", "THREE.DoubleSide"] },
    opacity: { value: 1.0, min: 0.0, max: 1.0 },
    depthTest: false,
});

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

 <FakeGlowMaterial  {...glowControls} />

Show, don't tell

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

Next steps

• Adding the possibility to receive a mesh and auto scale its normals

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 Fake Glow Material 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.