Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lensflare update #231

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions .storybook/stories/LensFlare.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { BackSide } from 'three'
import { Box, useTexture } from '@react-three/drei'

import { Setup } from '../Setup'
import { EffectComposer, LensFlare, Vignette, Bloom } from '../../src'
import { EffectComposer, LensFlare, Vignette, Bloom, BrightnessContrast } from '../../src'

function SkyBox() {
const texture = useTexture('digital_painting_golden_hour_sunset.jpg')
Expand Down Expand Up @@ -54,10 +54,12 @@ export const Primary: Story = {

<EffectComposer multisampling={0} disableNormalPass>
<LensFlare {...args} />
<BrightnessContrast contrast={0.2} />
<Vignette />
</EffectComposer>
</>
),
args: {},
args: { colorGain: new THREE.Color(56, 21, 9) },
}

function DirtLensFlare(props) {
Expand All @@ -79,8 +81,10 @@ export const Secondary: Story = {

<EffectComposer multisampling={0} disableNormalPass>
<DirtLensFlare {...args} />
<BrightnessContrast contrast={0.2} />
<Vignette />
</EffectComposer>
</>
),
args: { starBurst: true },
args: { starBurst: true, colorGain: new THREE.Color(56, 21, 9) },
}
37 changes: 9 additions & 28 deletions docs/effects/lensflare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,48 +10,29 @@ Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ul
```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
followMouse={false} // Set it to follow the mouse, ignoring the lens position. Default: false
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
/>
)
return <LensFlare />
```

#### Ignoring occlusion on some objects
## Ignoring occlusion on some objects

To disable the occlusion effect, simply add `userData={{ lensflare: 'no-occlusion' }}` to your object/mesh props.

#### Improving performance
## Improving performance

Use bvh `<bvh><Scene></bvh>` to enhance the internal raycaster performance.

#### Limitations
## 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
## 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

## Example

<Codesandbox id="5ydkm4" />
2 changes: 1 addition & 1 deletion src/effects/ChromaticAberration.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ChromaticAberrationEffect } from 'postprocessing'
import { type EffectProps, wrapEffect } from '../util'

export type ChromaticAberrationProps = EffectProps<typeof ChromaticAberrationEffect>
export type ChromaticAberrationProps = EffectProps<ChromaticAberrationEffect>
export const ChromaticAberration = wrapEffect(ChromaticAberrationEffect)
Loading