Ludvig Lindqvist: Sketch #20 WIP

[Ludvig]

Current state:

First time challenger approaching, and I will do some stuff without using a texture. I hope this will be interesting for some - it sure will be for me!

Will try to organize this post chronologically (like a blog perhaps) and hopefully do updates once in a while. It’s easily done to accidentally do progress without documenting it

I will use Unity 2017.x and Shader Forge. Shader Forge because I like the Set & Get nodes and I have used the software before.

Not sure exactly what to do yet… Aiming for some fire movement that can be mapped onto particle sprites and maybe then later on some meshes… We will see what comes out of this. Estimating to spend maybe 10-20 hours on this.

Recreating the circle texture
Creating a sphere mask without a texture

Nodes in Shader Forge

Noise
Creating procedural Fire requires some sort of Turbulence and Noise. I want to have a good 3D noise function for that. I like the Simplex noise because it looks good, animates well and more importantly - its fast.

I mentioned in another post looking at ShaderToy for cool stuff. There are lots of great noise functions people have built there. I found one I liked by the user ssell and I converted it to Unity shader code that can be used in Shader Forge. It’s quite easy to convert the code actually, just replace some syntax and stick the code in a .cginc file that can be referenced in Shader Forge. Then use the “Code” node to run the functions from the .cginc file.

Different octaves are visualised, left is one Octave and right is Three Octaves.

Sampling this noise in Shader Forge is then as easy as this. Out comes a 3D Noise value between -1 and 1. Excellent.

Next step is probably to make a fire shape out of the noise and the Sphere mask!

[Ludvig]

I made some progress with my shader and managed to do first pass on movement and colors of a flame.

Shape!
The basic shape that will serve as the foundation for the flame, its basically a warped version of the sphere mask I posted in my previous post.

I use the simplex noise from above to distort the UVs of the above shape. I tweaked the parameters of the noise until I achieved a sort of movement that reminded me of a flame. It ended up look like this:

Colors!
The technique I decided to use to colorize the flame is similar to the concept of a 1D gradient lookup texture. Since this challenge forbids any additional use of such gradient textures, it has to be solved with math.

Applying a technique described by Inigo Quilez in his post on the subject, a vast variety of gradients can be constructed using a simple formula. He has written a Palettes ShaderToy where these type of gradients can be previewed.

Converting the gradient code from ShaderToy and adding it to the .cginc file allows me to access it in ShaderForge.

The gradient below is generated using an online tool built for this specific gradient algorithm. Without this tool, it would be really difficult to create a gradient for this function.

Using above rainbow gradient it will be colorized just like a regular 1D gradient texture would.

After pulling some sliders on the online tool I managed to find a fiery gradient.

Summary

DC Offset = 0.5, 0.5, 0.5
Amplitude = 0.5, 0.5, 1.0
Frequency = 0.1, 0.5, 0.396
Phase = -0.1, -0.5, -0.561

With the fiery gradient applied, and alpha applied, it starts looking like a flame.

Next up will be adding a few animatable parameters which can be used to fade the flame in and out.

[steven.ty7]

Super cool technique for the 1D ramp
For those who would like to the same technique, just copy paste that line in a custom node

return DCOffset + Amp * cos (6.283128 *(Freq * gradient + Phase));

[Ludvig]

Nice! easy to implement in Unreal aswell I see

Just want to add that the Math approach for a 1D gradient is much more efficient on mobile compared to using a texture. A 1D gradient based on a texture (eg. a 256x1 texture) can cause something called a texture dependant read which can have a significant performance impact depending on the mobile GPU.
Not sure about other hardware such as PC or Console but I expect this math function to be cheaper than sampling a texture anyway

[3dsr]

Nice and very interesting technic!
Could you explain a little more how you converted the shadertoy to the .cginc file ?

thanks;
have a nice day!

[Ludvig]

Sure!

The basic approach is to replace GLSL keywords to HLSL in the functions.

A few examples taken from ShaderMan (which is a Unity script that converts whole shaders):

Replace mix() with lerp()
Replace vec2 with float2
Replace mat2 with float2x2
Replace mod with fmod
etc..

To see more keywords that needs to be replaced, you can refer to the ShaderMan script on Line 110 onwards. Basic description of the ShaderMan tool:

The shaders exhibited on ShaderToy are exclusively written in GLSL, and run in your browser using WebGL.I write an automatic conversion tool to turn a GLSL shader into an HLSL shader that help you fast convert ShaderToy to ShaderLab unity.

Simple example on this circle shader

Replace all vec2 to float2

Then put that new (translated) code function in a .cginc file in your project and include that in either ShaderForge or your shader. Then you should be able to use the function circle(uv, pos, rad) to make a circle. Amplify can also include .cginc files.
If you are writing your own shader and want to use any functions from a custom cginc file, you add this to it:

#include "file.cginc"

I made a basic network where I use the circle function in my .cginc file

and this is the result:

Hope that helps.

Please keep in mind the copyright terms of content on ShaderToy.

[Ludvig]

I have decided on what type effect I want to create using my shader. I’ll put a few ref videos in here.

For some reason I love to use spirals and spirally shapes, so I will try to have something with similar shape and motion as the Diablo 2 Sorceress enchant effect

Sketch #20 Diablo 2 enchant

Another idea was to have Super Mario fire flower balls but a little more similar movement and behavior to the fireballs in The Legend of Zelda Breath of the Wild @3:52;
https://youtu.be/tA9GNRtg1Hc?t=232