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

CG Shaders -Team Fortress 2

4/27/2014

0 Comments

 
I actually first attempted this years ago when i was first learning shaders, but looking back on it i missed out on a few details. Today I know a bit more and can read the equations a bit better, so i think that this is pretty close. I downloaded the mesh and textures for the heavy, which made things a lot more clear as well. 

There were definitely some things to be learned from this, namely how important specular and rim lighting are for the TF2 look. They use 2 phong highlights both of which are modulated by a rim falloff, in addition to constant rim lighting. They also use a specular exponent map, which adjusts the power of the specularity on a per pixel level. This causes very broad highlights that are also varied across the surface and gives it a very distinctive look. Hopefully I'll be able to use what i learned on some of my other shaders.


Picture

Maya CGFX File:

tf2.cgfx
File Size: 10 kb
File Type: cgfx
Download File

Unity SHADER File:

tf2.shader
File Size: 12 kb
File Type: shader
Download File

0 Comments

CG Shaders - Warped Lighting

4/20/2014

0 Comments

 
This is one I just made up - not sure if anyone else is doing something similar, although i wouldn't be surprised since its pretty simple. Basically I use a texture to warp the lighting value prior to sampling the light ramp. This causes a bit of disruption to the normally perfectly clean transitions between light values. Depending on the style you are going for this might be beneficial. Here is regular Ramped lighting and Warped Ramp Lighting
Picture
Picture
Depending on your texture you can achieve a variety of effects:
Picture
Liquification
Picture
Strokes
Picture
Patterning
Picture
Blotching

Maya CGFX File:

warpedlighting.cgfx
File Size: 11 kb
File Type: cgfx
Download File

Unity SHADER File:

warpedlighting.shader
File Size: 11 kb
File Type: shader
Download File

0 Comments

CG Shaders - Crosshatching

4/19/2014

3 Comments

 
I figured i would give crosshatching a shot, since it seems to be semi important. A lot of games with a non-photo-real art style use this to varying degrees but it is often done directly on the texture. This means that it will not actually react to the light at all. This paper presented a technique that is reactive to light, by using varying amounts of hatching and blending between them. 

For simplicity's sake i only used 3 textures instead of 6, since i hatching on light areas is confusing. Instead I just use a pure white for the brightest 2 areas and begin hatching in the midtones, and use the heaviest hatching on the darkest 2 areas, where its hard to notice the difference. This allows me to cram everything into the RGB channels of a single texture before splitting them out and recombining them in the shader. I used the blending technique found here to calculate the hatching level. 
Picture
It also includes a offset and intensity modifier to let you control the shadow level where hatching starts and the intensity of the hatching respectively. Here it is pushed back into only the deepest shadows with the original hatching texture and an alternate I made (I found you could use it for more types of tone mapping than hatching). I like this because i think it helps the shapes in the deeper shadows read a bit better. 
Picture
Picture
I did have to rip out multiple lights from the shader to keep it the same between Maya and Unity, as there is no way to make this work that i know of with multiple lights in Unity. I may try some fakery later to get them back, but i wasn't totally happy with them anyway - Ramped lighting doesn't seem to blend additively very well, but that may just be my ramps.

Maya CGFX File:

crosshatch.cgfx
File Size: 11 kb
File Type: cgfx
Download File

Unity SHADER File:

crosshatch.shader
File Size: 11 kb
File Type: shader
Download File

3 Comments

CG Shaders - Outline 2

4/13/2014

0 Comments

 
Minor update with 100% more Fresnel Outlines! In order to allow thick outlines, I added an intensity modifier which allows me to skip powering entirely. Since we need sharp outlines, I just floor the resulting value and let the intensity modifiers do the work adjusting the thickness instead. Like the geometry outlines, it can also be thickened according to the light. Here it is with the geometry outline in blue and Fresnel outlines in red
Picture
I'm still not completely satisfied with these. Because of Unity's light system it costs 4 passes  when it should rightfully only cost 2 like it does in Maya . Additionally it misses a lot of interior lines that a more robust solution might be able to catch. In any case, here it is. If i improve it in the future i'll post that as well.

Maya CGFX File:

outline2.cgfx
File Size: 9 kb
File Type: cgfx
Download File

Unity SHADER File:

outline2.shader
File Size: 16 kb
File Type: shader
Download File

0 Comments

CG Shaders - Outline

4/12/2014

0 Comments

 
This is a fairly simple extension of my ramp shader. It uses an early pass to inflate the vertices via the vertex normal and color them. This produces an outline that is rendered in world space and fades appropriately in the distance.  Potentially you could model your own outline mesh and get similar results but this is somewhat impractical for building a whole game, so its worth knowing how to do.
Picture
You can also shift the outline according to the light direction, giving you thicker outlines in the shadows.
Picture
I plan to explore a other methods to generate other lines, as this is only really useful for thin contour lines. Frensel lines should be able to enhance these, bridging gaps and thickening them up. 

Maya CGFX File:

outline.cgfx
File Size: 8 kb
File Type: cgfx
Download File

Unity SHADER File:

outline.shader
File Size: 12 kb
File Type: shader
Download File

0 Comments

CG Shaders - Ramp Shading

4/6/2014

0 Comments

 
Ramp shading is another option that compares well with basic Cell shading. By using a ramp to decide the color and intensity of the light, we can gain more control of the light-dark transition. Here is Cell Shading on the Left and Ramp Shading on the ramp with an equivalent ramp texture. The main benefit we can immediately notice is the softening of transitions. Cell shading can introduce aliasing and ramp shading smooths this somewhat.
Picture
Since the lighting is now governed by a ramp, we can easily control the brightness and falloff of the lighting. It also allows us to easily create various effects as seen below:
Picture
Basic Ramp
Picture
 + Gaussian Blur
Picture
+Blurred Mid tones and Gaussian Blur 

Maya CGFX File:

rampshading.cgfx
File Size: 7 kb
File Type: cgfx
Download File

Unity SHADER File:

rampshading.shader
File Size: 10 kb
File Type: shader
Download File

0 Comments

CG Shaders - Cell Shading

4/5/2014

0 Comments

 
Decided to take a break from realistic shaders and go in the opposite direction. Illustrative techniques such as this one produce have good results but a lot depends on the style you are going for.This shader supports banded phong lighting, giving you a cell shaded effect. Below you can see regular Phong and Cell Shading
Picture
It also supports normal maps as usual. I had to remove the rim lighting for now, although i may find a way to re-implement it in the future. The specularity is sharpened to match the style and Lerped into the diffuse as I found that reads better for this style. A small amount of specularity is added into the diffuse on a constant basis, as i found it looks nice in the past. 
Picture

Maya CGFX File:

cellshading.cgfx
File Size: 6 kb
File Type: cgfx
Download File

Unity SHADER File:

cellshading.shader
File Size: 10 kb
File Type: shader
Download File

0 Comments

    CG Shaders

    Shaders I've built as i teach myself CG. Feel free to download and use for whatever. If you like them you can buy me a beer or something.

    Archives

    December 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013

    Categories

    All

    RSS Feed

Powered by Create your own unique website with customizable templates.