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
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.
Create a new file with the contents of this gist on your project.
Using TypeScript? Use this one instead - by (https://github.com/nirtamir2)
import FakeGlowMaterial from './FakeGlowMaterial'
...
<mesh>
<sphereGeometry />
<FakeGlowMaterial />
</mesh>
...
Done. That's all that you need to use this component.
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 |
|---|---|
 |
 |
You can use VSCODE Intellisense feature to get all the explanation for each property. Just press CRTL + SPACE BAR.
| Name | Type | Default | Description |
|---|---|---|---|
| falloff | Number | 0.1 | Controls the value of the Falloff effect. Ranges from 0.0 to 1.0. |
| glowInternalRadius | Number | 6.0 | Controls the internal glow radius. Ranges from -1.0 to 1.0. Set a darker color to get the fresnel effect only. |
| glowColor | String | "#00ff00" | Specifies the color of the hologram. Use hexadecimal format. |
| glowSharpness | Number | 1.0 | Specifies the edges sharpness. Defaults to 1.0. |
| side | String | "THREE.FrontSide" | Specifies side for the material, as THREE.DoubleSide. Options are "THREE.FrontSide", "THREE.BackSide", "THREE.DoubleSide". Defaults to "THREE.FrontSide". |
| opacity | Number | 1.0 | Controls the opacity for the effect. Defaults to 1.0 |
| depthTest | Boolean | false | Enable or disable depthTest, controling if the mesh should not be visible when hided by other meshes. In case true, setting the side to FrontSide only is recommended. |
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} />
Here you can watch a video with it in action and some options
- Adding the possibility to receive a mesh and auto scale its normals
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: Threejs, WebGL, React Three Fiber, React three post processing
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent