NEWS COMMUNITY STORE TUTORIALS ROKOJORI ACTION LIBRARY ROKOJORI ACTION LIBRARY TUTORIALS SIGN UP LOGIN LOGOUT ROKOJORI NEWSLETTER SIGN UP LOGIN LOGOUT NEWS COMMUNITY STORE TUTORIALS ROKOJORI ACTION LIBRARY ROKOJORI ACTION LIBRARY TUTORIALS TOGGLE FULLSCREEN VOLLBILD AN/AUS image/svg+xml image/svg+xml image/svg+xml FLARE VFX
Mesh based Lens Flare Effects
image/svg+xml image/svg+xml Mesh based Lens Flare Effects image/svg+xml







WHAT ARE LENS FLARES AND FLARE VFX? --:--/--:-- FlareVFX in WinterTales

Real lens flares are optical artifacts of light traveling through lenses, mostly seen with bright light sources in camera lenses, but also notable in the human eye.

In the digital domain of games and films they are often added artificially. FlareVFX is a Node3D written for the Rokojori Action Library, which can render lens flare effects by using meshes that render geometry flares on top of the scene. For post processing lens flare effects check the compositor effects and CompositorVFX.






WHEN SHOULD I USE LENS FLARE VFX?

Lens flares are used...

- for suns, lights, lamps and stars
- to highlight hero objects
- to make cut scenes more cinematic.

The choice is an artistic one and depends on the style of a the game.

Complex and bright lens flares should not be used on every light or lamp, since this will visually overload the scene.

With a lot of layers the performance can become a problem, when the flares are used for many objects.




WHERE CAN I FIND LENS FLARE VFX?

The Rokojori Action Library contains a couple of built-in presets in: FlareVFXPresets.

Since lens flares depend heavily on the background, they are shown with bright and dark background.

--:--/--:-- Red Orange Classic - Typical for 2000

--:--/--:-- Green Streaky X - More common in 2005

--:--/--:-- Blue Anamorph - Since 2010 almost all have anamorph parts

--:--/--:-- Yellow Pink Magic - Since 2015 contrast backdrop are used







HOW DO I USE LENS FLARE VFX?

FlareVFX
FlareVFX is a Node3D that contains a FlarePreset. Add it to a scene and toggle the Edit Mode to make it visible.

The Edit Mode ensures all layers are created as children to FlareVFX and have their materials assigned. To update it via code use: flareVFX.UpdateFlare()

FlareVFX preset: FlarePreset = FlarePreset "Red Orange Classic.tres" editMode:bool = false

Make sure to duplicate a preset, if you don't overwrite it.


FlarePreset
A FlarePreset has settings and FlareLayers. All settings of the FlarePreset are global settings, that will effect any FlareLayer, unless it uses an overwrite.

The main first properties are related to the color of the flare.
Hue Shift, Temparature Shift, Saturation Shift and Lightness Shift change the color in HSL space.

Opacity is multiplied with the main color's opacity.

Scale and Extension change the size of the rendered quad. While Scale acts as a normal scale, Extension has the same effect on the geometry but scales down the UV. This increases the draw area while keeping it on the same size. This is helpful for effects that extend the borders of the drawing are of a layer.

The core are the layers, which contain FlareLayer that define how to render a layer.

Below are settings (Fading, Occlusion, Chromatic Aberration, blend modes), which are needed by every layer, but usually can be assigned globally. Every layer can overwrite one or more of the settings individually, if needed.

FlarePreset mainColor:Color = Color "Red" hueShift:float (-180,180)= 0 temparatureShift:float(-180,180) = 0 saturationShift:float(-100,100) = 0 lightnessShift:float(-100,100) = 0 opacity:float(0,1) = 1 scale:float(0,2) = 1 extension:float(1,10) = 1 layers:FlareLayer = FlareLayer "FlareLayer[]" ▾ Settings fading:FlareFading = ParametricFlareFading chromaticAberation:FlareChromaticAberation = OrientatedFlareChromaticAberation "OrientedFCA" occlusion:FlareOcclusion = FadingFlareOcclusion blendMode:Enum[Add,Mix,Subtract,Multiply] = Add




FlareLayer
A FlareLayer has settings and a FlareType.

The first three settings: Layer Name, Solo and Hide are for editing. Solo will hide all other layers, except they also enabled Solo. Hide will make the layer invisible. This is useful to isolate the different layers.

Opacity: Controls the layer's opacity, it is multiplied by the FlarePreset's main color and opacity.

Num Layers: Defines how many elements of that layer will be rendered. Mainly used for hexagon/circle ghosts. Many settings of the grouped settings have per element layer properties or randomizer.

FlareType: This type defines what this layer will be drawn and has different settings depending on the type.

There are:
- EllipseFlareType: Radial/conic fills and mask for cores, glows, streaks and streak stars, partial rainbow glows and frontal god rays

- SDFShapeFlareType: Exact SDF shapes for big sharp elements or as a row of many ghosts, opacity and fill are distance based gradients

- StarFlareType: Animated randomized star streaks with two additive/combinable generator fills and one mask. Scroll and rotation are animateble.

- TextureFlareType: Textures for grunge and others to add more uniqueness or if a shape is hard to create.

FlareLayer layerName:string = "Core" solo:bool = false hide:bool = false opacity:float(0,1) = 1 numLayers:int = 1 flareType:FlareType ▸ Color ▸ Size ▸ ScreenOffset ▸ Rotation ▸ Overwrites

Color: Overwrites for manipulating the main color, randomizer for layers

Size: Changes the size of the billboard, both axis or individually for anamorph and whether its size is world or screen based (or mixed), randomizer for layers

ScreenOffset: Creates the effect that the layer is before or behind the center. As layer setting it can create a line of ghosts, offsets per layer

Rotation: Rotation of the layers, also rotation over screen X/Y and offsets per layer

Overwrites: Allows to change the render priority of the material and to overwrite global settings of the LayerPreset








WHAT KIND OF LAYERS DO I NEED FOR LENS FLARE VFX?

All together
This is just the red orange classic with all its layers (which is a lot). You can copy single layers, add them as unique to yours and tweak them, that's easier than creating everything from scratch. They are also mostly color neutral and will adapt to the main color.

--:--/--:--

Backdrop gradient
Use a backdrop gradient to enhance the contrast for bright or busy backgrounds. Often darker/colder than the main color and using a non-additive blend mode like mix or multiply. Can be done with EllipseFlareType or SDFShapeFlareType

--:--/--:--

Core
The brightest spot in the flare, usually mainly white and roundish. Can be done with EllipseFlareType or SDFShapeFlareType

--:--/--:--

Ghosts
A line of ghosts, typically with geometric shapes like circles, pentagons or hexagons. Whether it's sharp or smoothed, it can be perfectly done with SDFShapeFlareType using multiple layers and screen offsets per layer.

--:--/--:--

Star Burst
Create a lot of random streaks around the core with a StarFlareType. Has also animation properties so that it can look very dynamic.

--:--/--:--

Streaks
Either as one big or as multiple small ones: EllipseFlareType is excellent for that. Multiple layers and rotation per layer creates star like structures (here 3 ones crossing).

--:--/--:--

God Rays
This full screen covering glow makes every flare pop. EllipseFlareType is excellent for that. Multiple layers and rotation per layer creates star like structures.

--:--/--:--

Rainbow Arcs
A rainbow radial fill and a random conic mask give great results with a EllipseFlareType.

--:--/--:--







HOW CAN I WRITE MY OWN LENS FLARE VFX?

You can create a custom flare type by extending FlareType

A custom FlareType needs to return a Shader and ShaderMaterial depending on it the provided settings from the FlareLayer.Data. The built in FlareTypes have for each blend mode a different variant.

It also needs to apply the settings to a material the FlareLayer.Data references.

Use the TextureFlareType as an example, since it is relatively simple (source code link on top).

Besides implementing the LayerType, the returned Shaders and ShaderMaterials are expected to support the properties of BaseFlareMaterial.

The built in types use "includes" to automatically do most of the shader, so that only a UV generate function needs to be implemented. Check also here the implementation of the shader for TextureFlareType














RELATED TOPICS
JUICE & TWEENING
Polishing Game Feel
CUSTOM COMPOSITOR FX
How to write your own
ANIMATE COMPOSITOR FX
Wipes & CompositorVFX
TO ROKOJORI ACTION LIBRARY TUTORIALS







All social media brands are registrated trademarks and belong to their respective owners.





CONTACT IMPRINT TERMS OF USE PRIVACY © ROKOROJI ® 2021 rokojori.com
CONTACT IMPRINT TERMS OF USE PRIVACY © ROKOROJI ® 2021 rokojori.com
We are using cookies on this site. Read more... Wir benutzen Cookies auf dieser Seite. Mehr lesen...