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 - Triplanar Mapping 2

2/23/2014

0 Comments

 
An alternative triplanar technique that produces sharper masks and does not require 3 texture samples to work if you don't need them. This makes it cheaper if you only need to tile 1 texture, since the uvs will be constructed correctly prior to sampling (no need to mask things off and sample another texture to cover up bad projections).

I left the textures the way they were though for demo purposes. Sampling a single texture would just be a matter of removing the masking and sampling single textures with the constructed uvs.  
Picture

Maya CGFX File:

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

Unity SHADER File:

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

0 Comments

CG Shaders - Triplanar Mapping

2/22/2014

4 Comments

 
A little trick i did a while back. Triplanar mapping gives you a clean UV layout based on the world position of the vertex/pixel being rendered. This is very useful when greyboxing a level, as you don't need to be concerned with textures stretching - just scale and move boxes to your heart's content. 

I decided to add 2 alternative textures to demonstrate how you could use different textures for different projection directions. If you want to blend specular color, power, or whatever with the mask check out some of my tutorials on directional / RGB masking from before - im feeling a bit too lazy today to include it. The blending is pretty good between multiple textures and when applied to curved objects. I have another technique that can be cheaper, but this is the most complete solution i know. Just for fun i reused my moss and dirt textures to make an HD minecraft block. 
Picture

Maya CGFX File:

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

Unity SHADER File:

phongnormaltriplanar.shader
File Size: 13 kb
File Type: shader
Download File

4 Comments

CG Shaders - Vertex Animated Wind

2/15/2014

1 Comment

 
This one is a little different than the last vertex animated shader. It is based on Crytek's implementation of plant animation as seen here. It gave me a nice opportunity to try out triangle waves, which are cheaper than sine waves and look better in this case (personally i find sin waves make the plants look like they are underwater while traingle waves look a bit more "snappy"). 

The shader animation is based on a passed in wind direction in world space, and can be controlled with vertex colors. It is a bit touchy and varies a bit more than i would like due to scale differences between maya and unity, although these could be avoided with a strict control of import scaling to unity. Otherwise it changes the usable strength and size ranges a bit. 
Picture

Maya CGFX File

phongnormaltranslucentvertexanim.cgfx
File Size: 16 kb
File Type: cgfx
Download File

Unity SHADER File

phongnormaltranslucentvertexanim.shader
File Size: 25 kb
File Type: shader
Download File

1 Comment

CG Shaders - Vertex Animation

2/8/2014

0 Comments

 
I took my regular panning uv water and added vertex animation to it. There are some special considerations to take into account when doing vertex animation, namely that your vertex normals will no longer be valid. Because of this, I rebuild the normals inside the vertex shader before passing them along. I use 2 adjacent points to each vertex along the tangent and binormal of the vertex to recalculate the normals. I'm sure there is something more efficient to do this with but it works for now.

The animation itself is kinda cool. The main animation creates wave crests with 3 sums of a Fourier series. While this gives decent movement, I felt the peaks all looked too soft and there was no back and forth movement. After watching this video, I realized that good looking wave peaks couldn't be achieved with pure sine waves. In order to achieve this, I would need to push all the verts toward their peaks like in the animation. 

After a few hours of struggle, I realized that I could get this movement with a cosine function, running on the same frequency as the sine function. Basically the cosine has a similar wave shape as the sine, but reaches its peak and trough a slightly different time than the sine wave. By modifying the vert position in the parallel direction as the wave is travelling, we can push all the verts toward the peaks (for a sine wave traveling down z, add to the z direction according to the cosine wave). 

As an added bonus, an object modified with this function would exhibit the same bobbing and back and forth motion as a boat would in real life when a wave hits it, without doing any nasty collision detection. So you could actually make "floating" objects that behave naturally with very little effort :) 


Picture

Maya CGFX Shader:

phongnormalvertexanim.cgfx
File Size: 14 kb
File Type: cgfx
Download File

Unity SHADER File:

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

Edit: Did a little research and found out there is actually a formula that does exactly this called Gerstner Waves. MFW I discover my  idea has already been done and is so well known it predates computer graphics: 
Picture
0 Comments

CG Shaders - Solid Translucency

2/2/2014

0 Comments

 
This translucent technique is designed for objects that are thicker than leaves or paper. It is based on this technique as described in DICE's 2011 GDC demo and it shares a lot of the same techniques as the Crytek translucent technique. In fact, the only major difference that I gathered was that they implemented a normal distortion factor, allowing them to bend the translucency. Other than that it is essentially the same shader code wise.

They did mention making use of an inverted Ambient Occlusion map, baked with reversed normals to calculate a thickness map, which is used in place of the transmission alpha in the flat translucency. To test this out, I baked out a quick Inverted AO map of the rhino that comes with zbrush. I chose it because it had a good amount of variance between thick and thin areas. The results aren't bad  - thin areas like the ears and horn are translucent while thick areas like his belly are not. I would recommend baking with 3ds Max as it seemed the easiest to get to work correctly with inverted normals. This page has some good info on setting up the bakes.
Picture

Maya CGFX File:

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

Unity SHADER File:

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

0 Comments

CG Shaders - Flat Translucency

2/1/2014

0 Comments

 
After a bit of experimenting in Unity, I found that while Z test is impossible to run in alpha blending, you can get away with it in Alpha Clip. This opens up a few nice possibilities, namely that you could turn backface culling off with alpha clip without sorting issues. This means you can have a  2 sided material for about the same cost as a one sided material - 2 passes as normal, instead of 4 passes to cover base and fill lights for 2 sides. I flip the normals on the backfaces so that normals are accounted for correctly. This works OK but you may run into weird shadowing on high angles of incidence. For now i'm rolling with it, but I am open to any other suggestions :)

Thanks to this, I thought it would be a good time to try out flat translucency. It's basically a super cheap subsurface scattering approximation. This is useful for leaves or other paper thin materials that allow some light to pass through. I based my implementation on Crytek's implementation of light transmission, featured in this paper. My implementation is a bit simpler to save a few instructions, but the idea is basically the same. Just skip past the vertex animation for now, I'll get to that later :)
Picture
Lit from the front
Picture
Lit from the back

Maya CGFX File:

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

Unity SHADER File:

phongnormalflattranslucency.shader
File Size: 11 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.