Added MDX docs and minor changes

.storybook/stories/LensFlare.stories.tsx

@@ -82,5 +82,5 @@ export const Secondary: Story = {
       </EffectComposer>
     </>
   ),
-  args: {},
+  args: { starBurst: true },
 }

docs/effects/lensflare.mdx

@@ -3,4 +3,54 @@ title: Lensflare
 nav: 1
 ---
 
-TODO
+A Lens Flare adds the optical aberration caused by the dispersion of light entering the lens through its edges.
+
+Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare).
+
+```jsx
+import { LensFlare } from '@react-three/postprocessing'
+
+return (
+  <LensFlare
+    blendFunction={BlendFunction.Screen} // The blend function of this effect.
+    enabled={true} // Boolean to enable/disable the effect.
+    opacity={1.0} // The opacity for this effect. Default: 1.0
+    starBurst={true} // Boolean to enable/disable the start burst effect. Can be disabled to improve performance.
+    glareSize={0.96} // The glare size. Default: 0.2
+    lensPosition={[0, 0.5, 0]} // The position of the lens flare in 3d space.
+    starPoints={6} // The number of points for the star. Default: 6
+    flareSize={0.01} // The flare side. Default 0.01
+    flareSpeed={0.01} // The flare animation speed. Default 0.01
+    flareShape={0.01} // Changes the appearance to anamorphic. Default 0.01
+    animated={true} // Animated flare. Default: true
+    anamorphic={false} //Set the appearance to full anamorphic. Default: false
+    colorGain={new THREE.Color(70, 70, 70)} // Set the color gain for the lens flare. Must be a THREE.Color in RBG format.
+    lensDirtTexture={'/lensDirtTexture.png'} // Texture to be used as color dirt for starburst effect.
+    haloScale={0.5} // The halo scale. Default: 0.5
+    secondaryGhosts={true} // Option to enable/disable secondary ghosts. Default: true.
+    ghostScale={0.0} // Option to enable/disable secondary ghosts. Default: true.
+    aditionalStreaks={true} // Option to enable/disable aditional streaks. Default: true.
+    smoothTime={0.07} // The time that it takes to fade the occlusion. Default: 0.07
+  />
+)
+```
+
+#### Ignoring occlusion on some objects
+
+To disable the occlusion effect, simply add `userData={{ lensflare: 'no-occlusion' }}` to your object/mesh props.
+
+#### Improving performance
+
+Use bvh `<bvh><Scene></bvh>` to enhance the internal raycaster performance.
+
+#### Limitations
+
+The Ultimate Lens Flare leverages the raycaster to examine the material type of objects and determine if they are `MeshTransmissionMaterial` or `MeshPhysicalMaterial`. It checks for the transmission parameter to identify glass-like materials. Therefore, for an object to behave like glass, its material should have either `transmission = 1` or `transparent = true` and `opacity = NUMBER`. The effect automatically interprets the opacity `NUMBER` value to determine the brightness of the flare.
+
+#### Credits
+
+- https://www.shadertoy.com/view/4sK3W3
+- https://www.shadertoy.com/view/4sX3Rs
+- https://www.shadertoy.com/view/dllSRX
+- https://www.shadertoy.com/view/Xlc3D2
+- https://www.shadertoy.com/view/XtKfRV

src/effects/LensFlare.tsx

@@ -71,14 +71,14 @@ export class LensFlareEffect extends Effect {
     flareShape = 0.01,
     animated = true,
     anamorphic = false,
-    colorGain = new THREE.Color(70, 70, 70),
+    colorGain = new THREE.Color(20, 20, 20),
     lensDirtTexture = null as THREE.Texture | null,
     haloScale = 0.5,
     secondaryGhosts = true,
     aditionalStreaks = true,
     ghostScale = 0.0,
     opacity = 1.0,
-    starBurst = true,
+    starBurst = false,
   } = {}) {
     super('LensFlareEffect', LensFlareShader.fragmentShader, {
       blendFunction,
@@ -117,10 +117,11 @@ export class LensFlareEffect extends Effect {
 type LensFlareProps = ConstructorParameters<typeof LensFlareEffect>[0] & {
   position?: THREE.Vector3
   followMouse?: boolean
+  smoothTime?: number
 }
 
 export const LensFlare = forwardRef<LensFlareEffect, LensFlareProps>(
-  ({ position = new THREE.Vector3(-25, 6, -60), followMouse = false, ...props }, ref) => {
+  ({ position = new THREE.Vector3(-25, 6, -60), followMouse = false, smoothTime = 0.07, ...props }, ref) => {
     const viewport = useThree(({ viewport }) => viewport)
     const raycaster = useThree(({ raycaster }) => raycaster)
     const pointer = useThree(({ pointer }) => pointer)
@@ -171,7 +172,7 @@ export const LensFlare = forwardRef<LensFlareEffect, LensFlareProps>(
         }
       }
 
-      easing.damp(uOpacity, 'value', target, 0.07, delta)
+      easing.damp(uOpacity, 'value', target, smoothTime, delta)
     })
 
     useEffect(() => {