Session V: Enhancing With Textures, Shaders and Sound¶

Customize the Pillar¶

We can customize the pillar in a similar way, but this artist has provided a more complex texture. Find pillar_greekMat.mat, move it to your Assets/Materials directory and examine it in the Inspector. You'll see that it has Albedo, Specular, Normal Map, and a Height Map assigned. If you look at each of those images in the inspector individually, you'll see that they have a series of regions. Those regions correspond to different parts of the mesh and are mapped there during rendering. If you open it up in Krita or another image editing program, you could add graffiti or change its texture. For now, drag that material to the pillar to attach it.

Add a Background¶

Now let's add some background scenery. A common way to provide distant scenery is to use a 'skybox'. As StreetView, photosphere apps, and 360/180 cameras become more popular, there are a lot of resources available for backgrounds. We're going to use a static image captured in HDR: misty_pines_2k.

• Move the image to your ./Assets directory.
• Select it and in the Inspector set the Texture Shape to Cube and the Mapping to Latitude-Longitude layout (you should see the preview look like its projected onto the inside of a half-sphere)
• Create a new material (Menu: Assets > Create > Material) and give it a name describing the image
• Click on that material and set its shader to Skybox > Cubemap
• Click the Cubemap (HDR) select button and choose your material in the menu (or simply drag and drop the image from your project tab) . You can verify that it projected correctly by dragging the mouse around in the preview - if you need to adjust how it aligns with your scene, use the rotation slider in the Inspector.
• To use as a skybox, open the Window > Lighting > Settings menu and under the scene tab, drag your cubemap material onto the skybox material slot. You should see it appear in the background of your Scene View

If you need to adjust how close or how high the photosphere appears, you can tweak those settings using one of the first two the options described in this project which provides a great summary of the three main ways to set up backgrounds in Unity. While 'inverted normals' might sound a little complicated as you're getting started, it basically means setting up the sphere to draw the texture on the inside rather than the outside, so if you make it big enough to fit your whole scene, you can drop a standard photosphere (i.e. an equirectangular image) like you might see in Google's StreetView or could take with a smartphone app.

Making a basic Shader¶

In the pre_asets directory, go into Shaders and Copy the SwordShadersProgresssion into your assets folder along with lava.png and Displacements.png from the textures folder. Each of these shaders adds a little more functionality to the previous one. In order to apply a shader to an object, it first needs a material to work with, so right click in your assets and create a new material. By dragging the shader onto the material, and then dragging the material onto the object, we can see what our shader is doing.

The first shader, 01SolidColorShader is about as basic as a shader can be. For every pixel where the object is located, it always returns the same color.

Shader "Custom/SolidColor" {
	SubShader {
		Pass {
			CGPROGRAM

			#pragma vertex vert             
			#pragma fragment frag

			struct vertInput {
				float4 pos : POSITION;
			};  

			struct vertOutput {
				float4 pos : SV_POSITION;
			};

			vertOutput vert(vertInput input) {
				vertOutput o;
				o.pos = mul(UNITY_MATRIX_MVP, input.pos);
				return o;
			}

			half4 frag(vertOutput output) : COLOR {
				return half4(1.0, 0.0, 0.0, 1.0);
			}
			ENDCG
		}
	}
}

With the next shader, 02TextureShader, we can apply a texture to the material using what is called UV maps. (The U and V are the names of the axis. They are simply the X and Y coordinates of the texture we are using.). You'll notice at the top of this shader, we have a Properties section. This allows us to give the shader inputs from unity. _MainTex ("Texture", 2D) = "white" {} means that the variable in our code will be _MainTex, the name shown in the unity inspector is "Texture", which takes in a 2D image, and if no image is supplied, it will use a white image by default. Note that we have to redeclare _MainTex as a sampler2D before we can use it. We can drag lava.png into the Texture slot of our material to apply the texture to it. So now, we are mapping the object's 3d point to a UV coordinate which we then use to sample the texture that we give it.

While we normally think of textures as Images, to the computer, it's simply a grid of rgba values, which are represented as numbers from 0-1. So instead of passing it a picture, we can pass it a grid of values that we won't use as colors. This Displacement picture that we are using has random noise in both the red and green channels. We can use values in these channels to warp our texture. So instead of sampling the texuture with our normal UV values, we add a displacement value that we get from our Displacement picture. Since the values are always between 0 and 1, we multiply it by 2 and subtract 1 so we get values from -1 to 1, so our displacement will move in all directions. When we apply this shader to our material and drag Displacements.png to the Warp Texture slot, we can move the Magnitude slider to see how the texure changes as we increase the effect of the warp.

While the warp is cool, it' static once you choose a Magnitude value. The last shader, 04FlowingShader, utilizes the built in _Time variable to add animation to our shader. So instead of reading from our Displacement texture the same UV value each time, we add _Time.x*_Speed to it so we get a flowing type effect. _Time has an x, y, and w, but they are all just the time multiplied by a constant. In order they are t/20, t, t*2, t*3. There are other constants like _SinTime which can give you oscilating values. Information about these and other constants can be viewed here: https://docs.unity3d.com/Manual/SL-UnityShaderVariables.html

Using a Shader to Show the Sword is Powered Up¶

In the pre_asets directory, in the materials folder you'll find PowerUpMaterial.mat, and in the textures folder you'll find lava.png and Displacements.png, and in the shader's folder named SwordShaderProgression. Bring them into your Assets directory and create another copy of your sword model in the hierarchy and name it MagmaSword. Check to make sure the PowerUpMaterial is using the Custom/04FlowingShader and is assigned lava as the texture and Displacement as the warp texture. If you've got everything connected you, should see an animated shader effect in the Scene window. If you click on the PowerUpMaterial, you can also play around with the Magnitude and Speed sliders to see how it affects the texture. It might be easier to see on a plain cube, so you can create a new 3D cube in your scene and drag the material onto it.

To connect this with our two-handed sword powerup effect:

• select the MagmaSword object in the Hierarchy and uncheck the box next to it in the Inspector (this will disable the object and make it disappear from view)
• open up the BladeController.cs script and find your EnablePowerUp and DisablePowerUp functions
• at the top of the script, create SerializeField variables for simpleModel and powerModel game objects
• select the Sword parent object in the Hierarchy and drag the SimpleSword and MagmaSword children to their slots in the BladeController compenent in the Inspector
• back in the script, under enable, add the following lines: simpleModel.SetActive (false); powerModel.SetActive (true);
• under disable, add the following lines: simpleModel.SetActive (false); powerModel.SetActive (true);