Artistic Experiments
  • Home
  • Reel
  • Shaders
    • Stylized Shaders
    • Lighting Techniques
    • Shader Effects
    • Cubemaps
    • Pixel Lit Shaders (Basic)
    • Vertex Lit Shaders (Basic)
    • Unlit Shaders (Basic)
  • Tools
  • WIP
  • Contact

WorldSpace UVs

9/1/2012

1 Comment

 
I was asked today to create a shader that tiles a texture based on world space coordinates rather than in UV space, essentially creating a top-down planar projection. For example, this would allow you to use a much smaller plane to create the illusion of it extending infinitely into world space.

It turned out to be a rather simple and inexpensive trick (1 extra ALU call over mesh uvs), so i decided to share.  Here is the implementation in Unity via the Strumpy Shader Editor:
Picture
First, we simply take the world position of the pixel being rendered and assemble a Vector2 from it. Since this was done in Unity, we ignore Y as that is world-up. In the case of UDK, we would use Y in place of Z. After we have assembled our Vector2, we multiply it by the global scale of the projection (0.1 in this example), and then add another Vector2 of 0.5,0.5 to recenter the projection. This is then used in place of MeshUVs wherever appropriate in the shader.

You will probably want the global scale as a parameter, so that you can find a projection that works for you. 
1 Comment

Texture Rotation - Strumpy Shader Editor

3/12/2012

3 Comments

 
One thing that has annoyed me for quite some time is rotating textures in SSE. Although the Unity docs provide a Shaderlab example, I was hoping for a solution i could incorporate into a shader graph. Today, i found that solution. 

To keep this simple, we will only focus on the parts relevant to texture rotation, and essentially create this Shaderlab example in SSE. To begin grab a Sampler2d and a Matrix and declare both of the properties. Next we multiply the UVs by the matrix via the MxV node (matrix*vector) by plugging our declared Matrix to matrix, and our Sampler2d's UV's to vector. Then simply plug the result into the uvs of a Tex2d and our Sampler2d into the sampler input. The tex2d can then be used to in whatever you desire to rotate(diff, emissive, etc...).
Picture
Once you have saved and exported your graph, you will have a matrix property in your shader that is hidden in the editor. To rotate things, we need to pass a matrix to this property. This can be done in the same way as the Shaderlab example, by creating a small script in Javascript or C#. Here is an example in Javascript:

#pragma strict
var rotateSpeed = 5;

function Update ()
 {
var rot = Quaternion.Euler (0, 0, Time.time * rotateSpeed);
var m = Matrix4x4.TRS (Vector3.zero, rot, Vector3(1,1,1) );
renderer.material.SetMatrix ("_Rotation", m);
}


This gives us a matrix transformation of the UVs with a translation of 0, a rotation being changed on update, and a scale of 1. After these are calculated, the matrix is then passed into the shader's matrix property - "_Rotation" in this case. 

Now simply drag this script onto any object in your scene that has the shader we created earlier applied. Once you press play you should see it rotate. One thing to note is that the rotation is based on the 0,0 location in UV space, so it will always rotate around the corner. This is not necessarily a limitation: If you layout your uvs with this in mind you should not have an issue. For example, here is the UV layout of an object who's texture rotates around the center of the object:
Picture
As you can see, ive divided it into 4 segments, who's UVs are stacked and rotated so that they tile around the center of the object. Since the rotation transformation takes place in UV space, the rotation for all 4 segments is seamless, and looks like it occurs from the center of the object. Alternatively, you can offset your texture in the material by -.5 and -.5 but this may lead to undesireable results
3 Comments

Simple Backface Masking - UDK

9/29/2011

0 Comments

 
A super quick material snippet for rendering one thing on the front faces of an object, and another thing on the back faces. Implemented in UDK.
Picture
It all starts with a 2 sided material. Go down to the Material tab in the Properties Bar and check 'Two Sided'. Next we need to get the direction of the camera compared to the surface. This is achieved with a 'Camera Vector' Node. We then need a 'Component Mask' to make sure it only outputs a Positive or Negative value. Set the 'Component Mask' to 'B' for this effect and plug it into the 'A' slot of an 'IF' node. Next, plug a 'Constant' set to '0' into slot 'B' of the 'IF' node. This creates a comparison that essentially means "Is the camera in front or behind the pixel being rendered". You can then plug in your texture inputs in (Front face textures get plugged into the "A>B" and "A=B", while back face textures get plugged into "A<B") and then plug the "IF" node into whatever input you need (Diffuse, Emissive, etc...). 

By creating more 'IF' nodes and connecting the inputs this way, you can completely change what is on either side of the object, which can be useful for stuff like water, which looks very different above and below the surface.
0 Comments

Animated Materials

4/20/2011

0 Comments

 
Here is a simple animated glow effect i created in the Maya Hypershade.
Here is the Network in the Hypershade. I simply took 2 Marble textures, with black and white veins. Both started with a vein width of 0, and were animated over time to a vein width of 1. This animation created the difference pictured in the left network compared to the right. I then used a blendColors node to combine them and then a contrast adjustment to bring them back to the full range of 0 to 1. My result was then plugged into Incandescence, which resulted in the animated Glow map shown above. Although procedural textures are generally not available within game engines, I was thinking i might be able to recreate the marble texture within UDK's material editor.
Picture
0 Comments

    Graphs

    Shaders graphs for different effects

    Archives

    September 2012
    March 2012
    September 2011
    April 2011

    Categories

    All

    RSS Feed

Powered by Create your own unique website with customizable templates.