#rtvfx

[alkaliii]

I wrote up a new shader for making stylized slashes! Usually I'd write a bit more about how to use it, but this one is on Github and I wrote out a nice wiki page for it. So uh yea, check it out!

You can get the shader here -> https://godotshaders.com/shader/procedural-idyllic-slash/

You can get the effect in this video here -> https://github.com/Alkaliii/spellbook-gd/

[alkaliii]

Procedural Cyclic Slash

Get the code for this shader here -> https://godotshaders.com/shader/procedural-cyclic-slash/

This is a really jank shader, but it looks pretty nice when the values are just right. So that's what this post is for! I'll help you with understanding the uniforms and value setup and leave some general tips so you can experiment easily on your own.

Quick Setup

Here is a quick rundown on how to get something similar to the video above:

Create a MeshInstance3D node and set the mesh to QuadMesh

Apply the shader as a Material Override (GeometryInstance3D -> Geometry)

Set these values:

Animation.Derive_Progress = -1 Animation.Time_Scale = 0.25 Shape.Rotate_All = 285 Shape.Noise = - New NoiseTexture2D - - Width = 512 - - Height = 128 - - Seamless = True - - Noise = - - - New FastNoiseLite - - - - Noise_Type = Cellular - - - - Fractal.Gain = 4 - - - - Cellular.Distance_Function = Manhattan Shape.Width_Gradient_Mask = - New GradientTexture1D - - Gradient = - - - New Gradient - - - - Offsets: 0.2, 0.5, 0.52 - - - - Colors: #FFFFFF, #000000, #FFFFFF Shape.Length_Gradient_Mask = - New GradientTexture1D - - Gradient = - - - New Gradient - - - - Offsets: 0.25, 0.4, 0.6, 0.65, 0.7 - - - - Colors: #FFFFFF, #7F7F7F, #000000, #7F7F7F, #FFFFFF Shape.Highlight = - New GradientTexture1D - - Gradient = - - - New Gradient - - - - Offsets: 0.5, 0.52, 0.54 - - - - Colors: #000000, #FFFFFF, #000000 Coloring.Color_Lookup = - New GradientTexture1D - - Gradient = - - - New Gradient - - - - Offsets: 0.0, 0.1, 0.2 - - - - Colors: #BF40BF, #008080, #ADD8E6

Overview

This shader works by taking a noise texture and wrapping it around the center point of UV1. The curved noise texture is then masked twice to set its width and "length" and an additional texture is applied to add a highlight effect. The shader uses values of gray, a lookup texture, and UV.x to apply colours. Lastly, motion is created by shifting the UV sample of the original noise texture and running the combined grayscale texture through a smooth step function to determine its alpha. This is a text-based shader written in Godot's Shading Language. Sorry, I can't help you implement it in Unity or some other engine or software. --

Animation Uniforms

The Progress uniform sets what point in time the shader is in. This only works when the Derive Progress uniform is set to (0). You can pretty much use the progress uniform to scrub through the shader's animation. If you set the progress value in code or through an animation player, you can control the animation as you like. Derive Progress changes what drives the shader's animation. If set to (-1), TIME will progress the animation. If it animates too quickly, you can use Time Scale to speed it up or slow it down. If set to (1) the particle LIFETIME will progress the animation. This is useful if you plan to set this shader as the material of a particle in a GPUParticles3D or CPUParticles3D. Ease Progress gives you a bit of control over how the shader's animation progresses if you are driving it with TIME or LIFETIME. When set to (0) no easing will occur. (-1) Will ease in exponentially and (1) Will ease out exponentially, but if you have the chops you can tweak this by changing the functions in the shader code. Time Scale alters the speed of the animation when Derive Progress is set to (-1). Anim Rot Amt controls how much the shader rotates as it animates. Set it to (0) if you want the effect to remain in the same place instead of rotating around the center of UV1. This value is put through an easing function, so it doesn't adjust linearly. I personally, wouldn't try setting this to anything other than (0) or (1). --

Shape Uniforms

Zoom controls the size of the effect on the quad. The value is interpreted inversely, so setting a larger value will make it smaller. The effect will repeat if you set this value above (1). Rotate All lets you rotate the effect on the quad. Use degrees. Base Noise generates the main shape for this effect. You can use any type of noise and I encourage you to experiment. Just make sure it's seamless so you don't get any odd artifacts. By setting the noise to be wider than it is tall, you can stretch out the shapes it makes which I think better resembles a slash. Decreasing the dimensions of the noise can lead to bigger streak blobs and softer-looking shapes depending on the noise used. I'd look into this if you want a more stylized/cartoon-looking effect.

Width Gradient Mask masks the Base Noise in a way that controls the width of the final effect. Like Base Noise this will be wrapped around the center point of UV1 so I suggest using a GradientTexture1D. You can do some cool things here if you're willing to experiment (and possibly alter the code) just make sure this is set to a grayscale image. The way I wrote the math dictates that darker colours will be kept and light colours will clip, so use white to control what to cut out and black to control what to keep. A gradient that transitions from white to black back to white is a good place to start.

Length Gradient Mask masks the Base Noise in a way that controls the "length" of the final effect. This also controls how it animates sorta. I can't really explain it, but how this overlays the noise will alter how the smooth step function works... I think. White denotes the edges and Black the center. If you use a gradient here, moving the white values closer to the center can help with shaping. I also suggest using gray so you can better shape the length of the effect.

Highlight is overlayed on the effect. like everything else, it is wrapped around the center point of UV1. A thin white stripe works best. Unlike the other textures this one is played straight, so black won't appear and white will. Moving the white stripe closer to the right edge of the gradient will move the highlight effect to the outside of the slash, left will move it inside. I like to set it so it's a bit closer to the right so it appears on the outer edge. If you don't want a highlight at all leave this uniform empty. --

Coloring Uniforms

Emission Strength controls how much it glows. If it doesn't glow in the editor, add a world environment node and enable glow, you will also need this in your game scenes fyi. Mix Strength controls how much the Color Lookup is applied to the effect. If Color Lookup is applied, decreasing this value will give a darker appearance. At (0), the effect (excluding the highlight) will appear black. You can add extra glow by increasing this above (1).

Color Lookup is used to color the effect. I think I screwed up the math, so just ensure the colors you want the shader to sample from are close to the left side of what you set here. Three colors is pretty nice, I like to put darker colors closer to the left side and lighter ones to the right. --

Final Notes

Sorry for this lengthy post. I've had issues before where a shader I found on GodotShaders was a bit obtuse and I didn't want others to run into that with this one. I've spent quite some time trying to figure this out but I still feel this is a pretty meh effect. I think I need to look into how people animate shaders using a static image and clipping/stepping/smooth stepping it. If you have any good resources for shaders I'd be interested to hear about them. I'd prefer not to get any articles about visual or node-based shaders since I keep fumbling how to convert some nodes into functions or what sorta math is going on, but at this rate, I'll take whatever I can get lol. Hopefully, this shader saves you some time or teaches you something new! If you have any questions (and I can answer them) don't hesitate to ask. However, I'd prefer if you contacted me on Discord. I'm in Godot Café, Godot Engine, and the Godot Effects and Shaders discord servers as (@)Aiwi.

[alkaliii]

Oil Spill

Step 0: Get the shader -> https://godotshaders.com/shader/procedural-metaballic-splash/

Step 1: Apply to MeshInstance3D set up with a Quad Mesh (Mesh.Material)

Step 2: Set the parameters:

Open Animate

Start by setting 'derive_progress' to "Lifetime"

Set 'ease_progress' to "Ease Out"

Open Colorize

Set 'shading' to "Faux8"

Set 'color_gradient' to something similar to shown above. You want to start with black, transition into a dark gray, and then transition that dark gray into itself with no alpha. ( #[email protected] , #[email protected] , #[email protected] )

Set 'shift_gradient' to -0.1

--

Open Colorize>Iridescence

Set 'apply_iridescence' to "Smoothstep"

Set "iridescence' to ( -3.0 , 0.2 , 0.0 , 1.0 )

Set "iridescence_size' to 1.0

Open Particle Options

Set 'particle_size' to 0.025

Set 'size_curve' to something similar to shown above. (Left Image) Try and make it like a long slide. ( 0.0,0.0 -> 0.1,1.0 -> 1.0,0.0 )

Set 'randomize_size' to ( 1.0 , 5.0 )

Set 'particle_feather' to 0.5

Set 'randomize_feather' to ( 0.6 , 1.0 )

Set 'feather_curve' to something similar to shown above (Right Image) Sorta a linear ramp up. ( 0.0,0.0 -> 0.9,1.0 )

--

Open System

Set 'inital_particle_velocity" to -0.3

Set 'ease_ipv' to "Progress"

Enable 'index_shift_randomness'

Open System>Emission

Set 'emission_dir' to ( 1.0 , 1.0 )

Set 'acceleration' to ( 0.5 , 0.5 , 0.1 , 0.1 )

Set 'acceleration_curve' to something similar to shown above. ( 0.35,0.0 (rt : 4.0) -> 1.0,0.5 )

Open Blobby

Set 'blob_step' to 0.01

Set 'feather_interpolation' to "Custom"

Set 'custom_feather_interp' to something similar to shown above. ( 0.0,0.0 -> 0.125,0.875 -> 0.25,0.8 -> 0.75,0.875 -> 0.875,0.625 -> 1.0,1.0 (lt : 3.0) )

--

Open Distortion

Set 'fisheye' to ( 4.0 , 0.0 )

--

Open Dissolve

Set 'alpha_dissolve' to "Smoothstep"

Set 'ease_alpha_dissolve' to "gcA"

Set 'alpha_edge' to ( 0.9 , 1.0 )

--

Open Dissolve>Proximity Fade

Set 'proximity_fade_distance' to 0.5

--

Open Vertex

Set 'billboard' to "Yes"

Set 'camera_offset' to 0.25

Open Curves

Set 'generic_curve_a' to something similar to shown above. Ease up sharp drop ( 0.0,0.0 -> 0.95,1.0 (rt : -20.0) -> 1.0,0.0 (lt : -20.0) )

--

Add GPUParticles3D

Copy Mesh Resource from MeshInstance3D and set it as 'pass_1'

Set 'lifetime' to 1.5

Set 'explosiveness' to 0.9

Set 'fixed_fps' to 0

--

Add New ParticleProcessMaterial

Open Particle Flags

Enable 'damping_as_friction'

--

Open Spawn>Velocity

Set 'direction' to ( 0.0 , 1.0 , 0.0 )

Set 'spread' to 40.0

Set 'inital_velocity' to ( 5.0 , 8.0 )

--

Open Accelerations>Damping

Set 'damping' to 15.0

--

Open Display>Scale

Set 'scale' to ( 1.0 , 3.0 )

Open Display>Color Curves

Set 'alpha_curve' to something similar to shown above. Short smoothstep ramp down starting from 0.75. ( 0.0,1.0 -> 0.75,1.0 -> 1.0,0.0 )

That should be everything???

[alkaliii]

Crystal Burst

Step 0: Get the shader -> https://godotshaders.com/shader/procedural-metaballic-splash/

Step 1: Apply to MeshInstance3D set up with a Quad Mesh (Mesh.Material)

Step 2: Set the parameters:

Open Animate

Start by setting 'derive_progress' to "Lifetime"

Set 'ease_progress' to "Ease Out"

Open Colorize

Set 'shading' to "Faux32"

Set 'color_gradient' to something similar to shown above. You want to start with white, transition into a hue, and then transition that hue into itself with no alpha. ( #[email protected] , #[email protected] , #[email protected] )

Set 'emission_intensity' to 1.5

--

Open Colorize>Iridescence

Set 'apply_iridescence' to "Smoothstep"

Set "iridescence' to ( 2.0 , 0.0 , 0.0 , 1.0 )

Set "iridescence_size' to 0.5

Open Particle Options

Set 'particle_size' to 0.025

Set 'size_curve' to something similar to shown above. (Left Image) Try and make it like a long slide. ( 0.0,0.0 -> 0.1,1.0 -> 1.0,0.0 )

Set 'randomize_size' to ( 1.0 , 5.0 )

Set 'particle_feather' to 0.5

Set 'randomize_feather' to ( 0.6 , 1.0 )

Set 'feather_curve' to something similar to shown above (Right Image) Sorta a linear ramp up. ( 0.0,0.0 -> 0.9,1.0 )

--

Open System

Set 'inital_particle_velocity" to -0.3

Set 'ease_ipv' to "Progress"

Enable 'index_shift_randomness'

Open System>Emission

Set 'emission_dir' to ( 1.0 , 1.0 )

Set 'acceleration' to ( 0.5 , 0.5 , 0.1 , 0.1 )

Set 'acceleration_curve' to something similar to shown above. ( 0.35,0.0 (rt : 4.0) -> 1.0,0.5 )

Open Blobby

Set 'blob_step' to 0.01

Set 'feather_interpolation' to "Custom"

Set 'custom_feather_interp' to something similar to shown above. ( 0.0,0.0 -> 0.125,0.875 -> 0.25,0.8 -> 0.75,0.875 -> 0.875,0.625 -> 1.0,1.0 (lt : 3.0) )

--

Open Distortion

Set 'uv_scale' to ( 1.3 , 1.3 )

--

Open Distortion>Texture Distortion

Set 'enable_texture_distortion' to "A"

Set 'txdistort_str' to 0.1

Set 'txdistort_a' to seamless cellular noise. Disable FBM.

Set 'index_shift_distort' to "Yes"

--

Open Dissolve

Set 'alpha_dissolve' to "Step"

Set 'ease_alpha_dissolve' to "gcA"

Set 'alpha_edge' to ( 0.99 , 1.0 )

--

Open Dissolve>Proximity Fade

Set 'proximity_fade_distance' to 0.5

--

Open Vertex

Set 'billboard' to "Yes"

Set 'camera_offset' to 0.1

Open Curves

Set 'generic_curve_a' to something similar to shown above. Ease up sharp drop. ( 0.0,0.0 -> 0.95,1.0 (rt : -20.0) -> 1.0,0.0 (lt : -20.0) )

--

Add GPUParticles3D

Copy Mesh Resource from MeshInstance3D and set it as 'pass_1'

Set 'explosiveness' to 0.9

Set 'fixed_fps' to 0 or 25 (looks nice imo)

--

Add New ParticleProcessMaterial

Open Particle Flags

Enable 'damping_as_friction'

--

Open Spawn>Velocity

Set 'direction' to ( 0.0 , 1.0 , 0.0 )

Set 'spread' to 40.0

Set 'inital_velocity' to ( 5.0 , 8.0 )

--

Open Accelerations>Damping

Set 'damping' to 15.0

--

Open Display>Scale

Set 'scale' to ( 1.0 , 3.0 )

Open Display>Color Curves

Set 'alpha_curve' to something similar to shown above. Short smoothstep ramp down starting from 0.75. ( 0.0,1.0 -> 0.75,1.0 -> 1.0,0.0 )

That should be everything???

[anthonydavisrtvfx-blog]

Particle Lights?!

I need to take some time out here from all this industry research and really talk about something incredible. Particle Lights. Let me try this again. Lights... on your particles! This is absolutely incredible and needs to be used all over the place. I need to see fireflies lighting up trees. I need to see robots, flying around lighting up the geometry its flying around. I need to see lights everywhere. Why? Well, because before now it was difficult to have lights around things that weren't dynamic that had shadow maps to deal with shadows and the lights needed to be attached to the emitters, there was no way to attach them to the particles themselves without some crazy programming. The particles that are allowed lights on them are only CPU particles. What this means is vector based collisions and hyper particle counts cannot be used with light source, but there are a million locations you can play a nice light on a particle to make it useful on the CPU side.

Just to make this clear on how awesome this is I’ll go over a simple concept that could be really detailed and how this makes it easier. A simple bullet firing and muzzle flash. The bullet leaving the gun will have a flash, this will be outward, but how to you make the light go off to reveal the gun as well? Well, what you can do is program a light to turn on and improve its intensity as the flash happens every time. You could also have a texture swap on the gun itself when the bullet fires. You could just fake it with emmisive and hope no one notices. Or you could just have the particle that emits the nice muzzle flash have a light and it will literally light up the gun itself making it feel even more comfortable, fulfilling your dreams of an impressive first person shooter.

Unreal Documents on Particle Lights.