Fortnite Construction Shader
This shader is loosely based on the one that was presented by the Fortnite developers in their GDC talk: Inner Working Of Fortnite's Shader-Based Procedural Animations.Here is what we will end up with:
So we need the authored 3D model and the shader that uses data we get from the model to achieve the desired effect.
There are some nuances here and there so make sure you don't miss out on the details.😗
The first step will be preparing the 3D model and putting in the required data. I used Blender 2.79 but any 3D modeling software would do.
3D Model Preparation
- Model It
- Apply Vertex Colors: For the direction of flight
Each color is a component of a vector (x, y, z). This will be considered as local space.
Values range from -1.0 to +1.0 for each component.
Negative values are achieved by using values of less than 0.5 and positive values with values greater than 0.5.
Assume 'val' : Range from 0.0 - 1.0
You can use your own mapping such as '(val - 0.5) * 2'.- Gives -1.0 if val was 0.0
- Gives +1.0 if val was 1.0
- Gives 0.0 if val was 0.5
- Gives 0.5 if val was 0.75
- Gives -0.5 if val was 0.25
(0.0 , 0.5) maps to (-1.0 , 0.0)
(0.5 , 1.0) maps to (0.0 , 1.0)
The mapping I've used :
- Gives 0.0 if val was 0.5
- Gives +1.0 if val was 1.0
- Gives 0.0 if val was 0.0
- Gives 0.5 if val was 0.75
- Gives -0.5 if val was 0.25
- Gives -1.0 if val was 0.4999 (less than 0.5 but tending towards it)
(0.0 , 0.5) maps to (0.0 , -1.0)
(0.5 , 1.0) maps to (0.0 , 1.0)
- UV Channel 1: For applying timing textures and rotation amount.
The UV map is difficult to see, I suggest zooming in. Those dots placed are each of the separate vertex sections that make up the mesh.
Shown here : Red channel = x position of UV & Green channel = y position of UV- The greater the UV's x coordinate of a vertex the later movement of the vertices will start ( assuming the initial stage was having all pieces together )
- The greater the UV's y co-ordinate the more rotations about the local z-axis it will do.
- UV Channel 2: Actual texture map.
The texture used can be found here: Pexels - Antique Backdrop
Fortnite Construction Surface Shader
We will be using a surface shader as our base. So go ahead and create one.- Defining Our Properties
We don't actually end up using _MainTex in our shader, But we need to declare it here due to quirks of using a secondary UV channel.Properties { _Color ("Color", Color) = (1,1,1,1) [HideInInspector]_MainTex("Main texture", 2D) = "white"{} _ActualTex("Actual Texture", 2D) = "white"{} _Glossiness ("Smoothness", Range(0,1)) = 0.5 _Metallic ("Metallic", Range(0,1)) = 0.0 _Placement("Placement value", Range(-0.0, 100.0)) = 0.0 }
Since we don't end up using it we can hide it in the inspector with [HideInInspector] attribute. - Input Struct & CG Declarations
sampler2D _ActualTex; sampler2D _MainTex; half _Glossiness; half _Metallic; fixed4 _Color; float _Placement; struct Input { float2 uv_MainTex; // UV co-ordinates for our timing & rotation about z-axis float2 uv2_ActualTex; // 2nd UV co-ordinate used for the actual texturing purposes float4 color : COLOR; // Vertex color }; - Helper Functions
float3 ConvertToDir(float3 val) { val.x = lerp(-val.x * 2, (val.x - 0.5) * 2, step(0.5, val.x)); val.y = lerp(-val.y * 2, (val.y - 0.5) * 2, step(0.5, val.y)); val.z = lerp(-val.z * 2, (val.z - 0.5) * 2, step(0.5, val.z)); //In case it's not clear, With a conditional statement : val.z = (val.z < 0.5)? -val.z * 0.5 : (val.z -0.5) * 2; //Alternative mapping : val.z = (val.z - 0.5) * 0.5; val = normalize(val); return val; } float4 RotateAroundZInDegrees (float4 vertex, float degrees) { //Creating a rotation matrix to multiply with our vertex position float angle = radians(degrees); float c = cos(angle); float s = sin(angle); float4x4 rotateZMatrix = float4x4(c,-s,0,0, s,c,0,0, 0,0,1,0, 0,0,0,1); return mul(vertex , rotateZMatrix); } - The Vertex Shader
*Note: The _Placement value is the value that determines where our vertices end up.void vert (inout appdata_full v) { /*1*/float val = max((_Placement - v.texcoord.x * 100), 0); /*2*/v.vertex = RotateAroundZInDegrees(v.vertex, val * v.texcoord.y * 100); /*3*/v.vertex.xyz += ConvertToDir(v.color.xyz) * val; }
v.texcoord.x:- Timing value, Determines when the movement of the vertices for that vertex starts. (Range : 0.0 - 1.0)
v.texcoord.y:- The amount of rotation to be applied. (Range : 0.0 - 1.0)- When _Placement value crosses the threshold value set by (v.texcoord.x * 100) only then the vertex moves.
- The lower the value of 'val' less the rotation applied on the vertex.
- The 'ConvertToDir(v.color.xyz)' function takes in vertex color and converts that into a direction for the vertex to move. Then we multiply with 'val' thereby determining the distance the vertex moves in that direction.
-
The Surface Shader
Nothing mystical happening here. Sampling our texture with the correct texture map and UV coordinates.void surf (Input IN, inout SurfaceOutputStandard o) { fixed4 c = tex2D (_ActualTex, IN.uv2_ActualTex) * _Color; o.Albedo = c.rgb; o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = c.a; } - Vertex Shader Declaration And Shadow Pass
We need to declare our vertex function with 'vertex:vert' since our vertex function is called 'vert'.#pragma surface surf Standard fullforwardshadows vertex:vert addshadow
We are modifying our vertices so the shadows won't look correct as it's using Unity's default shadow pass, So we need to tell Unity to use a custom shadow pass which takes into consideration those new vertex positions; To do this 'addshadow' is used in our #pragma.
Support Bitshift Programmer by leaving a like on Bitshift Programmer Facebook Page and be updated as soon as there is a new blog post.
If you have any questions that you might have about shaders or unity development in general, don't be shy and leave a message on my facebook page or down in the comments.
For the Unity-Package, go HERE.
For the entire source code, go HERE.
For more Shader development tutorials, go: HERE
For Unity development tutorials, go: HERE