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

Translucent Specularity - UE4

12/10/2014

12 Comments

 
One of the more disappointing things about UE4 is a lack of specularity on translucent objects, which makes stuff like my water more difficult. Some people have taken to passing in a light vector and building blinn/phong lighting in the pixel shader. I'll be showing how to do that with the specular model that is closer to what UE4 uses, as well as another model for comparison.

To start out here is the default lighting with no direct specular:

Lit Translucency - The highlights are all due to screenspace reflection.
Picture
and here is UE4's opaque shader:
Picture
In order to get a specular highlight i needed a light vector, so I made a level blueprint that passes the directional light vector to a material collection. This way multiple shaders can access the same global attribute if needed. 

Picture
We can then use this new attribute to add a specular highlight. Here it is with a custom Blinn specular added through the emissive channel
Lit Translucency + Blinn
Picture
If you compare this to UE4's specularity though, its 

Here are each shader again, specular only (well...specular + screenspace reflections):
Blinn 
Picture
UE4 Specular 
Picture
UE4's specular is much more advanced than Blinn and to get this kind of specularity, we will need to rebuild it from scratch like we did for the Blinn. This paper is a good read for those looking to figure out how exactly the shader works (WARNING: MATH). To get a handle on doing this in UE4, i used the Cook Toorance shader I wrote a while back as the basis for my rebuilt lighting. It uses Beckmann's model of specularity, which is slightly different than the GGX approach UE4 uses.
Beckmann Specular - 
Picture
While the specular is a lot more focused and apparent with this, it does not have as much spread as UE4's which I was a little disappointed with. This definitely helps in the background, in terms of enhancing the wave's readability in the distance. So instead i attempted to implement UE4's specular model - GGX/Trowbridge-Reitz.

GGX/Trowbridge-Reitz Custom - 
Picture
Here is my the shader with UE4's Lit translucency and GGX specular added. 
Picture
Here are the different material functions for each. Let me know if you need anything clarified.

EDIT: GGX originally had some issues but is now MORE BETTER and updated graphs have been uploaded. Thanks for the help Eric!

Blinn

Picture

Beckmann

Picture
Picture
Picture
Picture
Picture
Picture

GGX

Picture
Picture
Picture
Picture
Picture
Picture
Picture
12 Comments

Porting from UDK to UE4

11/28/2014

0 Comments

 
I've pretty much finished porting my water and the rest of my scene over to UE4. Translucency is a bit odd, as specularity doesn't work but you still get reflections that are controlled by roughness/metallic.  Its also about twice as expensive as the opaque version, at 14 texture samples vs 7. I'm not sure why at this point but it looks pretty so its whatever... Gotta get the rest of my scene up to speed - Its mostly lacking in terms of particles and post-FX compared to the UDK version.

Here is an in progress shot of the scene. 
Picture
0 Comments

Unity Shuriken FX

11/22/2014

0 Comments

 
I made a few effects recently to learn Shuriken a bit better and decided to polish them up a bit. Hope you like them!

Switch between effects with [ and ] 
Orbit the camera with Arrows and Click - Drag
Zoom in and out with Mouse Wheel

Unity Web Player. Install now!
...

You may need to allow the plugin to run in order to see the demo. Check your address bar if you don't see anything loading.
0 Comments

Rebuilt Vertex Normals - UE4

9/30/2014

4 Comments

 
I've been poking around with UE4 recently, and figured out this little trick i couldn't seem to pull off in UDK. When animating objects with vertex animation in a shader, the vertex normals must be rebuilt in order to allow your object to shade correctly. There are many ways to do this, and the one i used may not be the cheapest but it works in most situations. I offset 2 fake vert positions in the tangent and binormal directions of the actual vert and compare them to get the rebuilt normal. It costs 3 times the amount of normal vertex animation, but as long the calculations are done on the vertex shader it should still be fairly cheap. This is where UE4 comes in handy.
Picture
Previously in UDK, a calculation could not be forced onto the vertex shader, so calculations like this were super expensive. However in UE4 by declaring a few customized UVs, calculations can be later retrieved with a TexCoord node. Beware though: Each channel only carries 2 channels and extra channels will be dropped. In order to pass a Vector3 or 4 you would need to split it and override 2 UV slots. Since i was passing normals i just decided to use a DeriveNormalZ rather than taking up another UV channel. I use 3 customized UVs and let the first 2 pass through (so that my base and lightmap UVs are unaffected.

Here are a few comparison shots. Below is a plane with some basic sine wave animation. Besides the SSAO UDK and UE4 have, there really isn't much in terms of lighting. Its just all very flat looking.
Picture
Rebuilt Normals help a lot. Here is the same material with rebuilt vertex normals. The shape is much more defined and our normal maps (if we had any) will read correctly. In order to combine the normals with a normal map you could just use the BlendAngleCorrectedNormals node in UE4 or some other detail normal function.
Picture
If we were to do this on the pixel shader, it would be much more expensive for almost no visual difference (If i didn't have the stat counts to tell i wouldn't know which was which). Remember this is only rebuilding normals for a single waveform. Imagine doing it for 3 or 4 waves...
Picture
This kind of technique would be super useful for anyone looking to optimize Unreal shaders for mobile, as you could push a lot more instructions back into the vertex shader where it belongs. I think it should definitely help with animating larger waves.
EDIT: Here is how I rebuild the normals in the shader. Everything is handed built in, so that I don't break the constant folding UE4 employs. I use a lot of embedded material functions these days to keep things flexible. Here is an example of comparing 3 positions to make a normal starting at the material level.
Picture
To make the positions I simply add a value in each direction. The function itself provides a tangent and binormal offset, which I add to those positions before subtracting the original vert position plus the offset. This gives us tangent and binormal, which I then normalize and get a cross product to produce normals. 

This is a slight change from my earlier method, in that i am building the normals outside the function. This allows me to add multiple offsets together and rebuild the normals for all of them at once. The G_Waves_Fourier function employs this by using 3 G_Waves_Normal functions and adding them together. 
Picture
G_Waves_Normal itself is where i actually make the fake vert positions by employing the same method as seen in the material. Embedding the G_Waves function 3 times and passing them the 3 positions allows me to output the offsets for later use. All other parameters are exactly the same, to ensure they get the same offset. You could use pretty much any offset function in place of G_Waves and this method should allow you to rebuild the normals.
Picture
Looking at it now, I should really make that constant of 150 a parameter or see if i can eliminate the multiplication all together...
4 Comments

Vertex Animated Water With Flowmaps

4/21/2014

0 Comments

 
Here is a shader i put together recently after reading a bit about what Naughty Dog did for their water in Uncharted 3. It still needs some work on the textures and lighting but it runs well in the maya viewport - 300 fps with an unlocked framerate WOO HOO! 
It features my implementation of Gerstner Waves combined with vertex color flowmaps, allowing you to control the direction of both the vertex and texture animations. Its also crazy cheap for the motion you get, so it is an ideal technique for games. I'll probably port it to a game engine like Unreal or Unity once i figure out what i want to do with it :)
0 Comments

Character Shaders - Holographic Armor

9/9/2012

0 Comments

 
Here is a quick demonstration of a shader that i worked on recently and am pretty excited about: Holographic Armor. Many thanks to Brandon Hegland for the model. 
By controlling parameters in the shader, artists are able to cause the "hologram" to appear and disappear. They are also able to control the direction of the blend with either a world space position or a direction. In either case, the hologram is "pulled" toward the position specified( in this example straight down). This distortion was achieved through the vertex shader. Additionally, I added a blend in the pixel shader that is similar to some of the crate effects from Toxologic (mathematically anyway) so that the hologram would disrupt into a grid pattern before going completely transparent. The blend is also modifiable, allowing for a thicker or thinner amount of the disruption texture to be shown, depending on the needs of the situation.

Overall, I feel this shader is rather promising. In the future, i would like to add a little more effect to the disruption, as it feels slightly static. Perhaps a bit of UV distortion to add more "energy" to it. The shader is quite efficient at the moment ( only 2 dependent texture reads! I love shader math! ) and so i have quite a bit of room to expand upon what i have here.
0 Comments

Toxologic - Rain Effects

7/28/2012

0 Comments

 
One of the things i was happy to have been able to do for Toxologic was the rain effects during the final Minotaur sequence. Here is a video of it. Be sure to view full screen in HD for every last drip!
The system is actually composed of 3 parts: A rain cone that surrounds the player, the drops on the ground, and a few rain sheets for where the player enters and exits the rain. There were several reasons i took this approach, the biggest one being efficiency. Since the rain had to cover the entire level, individual particles were impossible. Instead, i created a simple cone which i parented to the camera, and added a transparent shader to it. I also used invisible planes attached to a mesh particle emitter to spawn particles along the ground for raindrop splashes. 

All in all, i really like this little hack, and think it adds a lot to the dramatic tension of the final encounter :D
0 Comments

Toxologic - Magical Guides

7/21/2012

0 Comments

 
We used a small particle effect in Toxologic to guide the player towards open doors. Since the doors would only open for a brief period, players had to know to chase the effect in order to get through the door. This is the final effect we created.
The path is driven by animation curves the level design team created. I wrote a small script for orbiting the animated game object and attached it to 2 objects along with particle trails. This resulted in some nice, smooth arcs, no matter how sharp of a turn the effect had to take.
0 Comments

Toxologic - Crate Effects

7/14/2012

0 Comments

 
Toxologic is a First Person puzzle platformer, revolving around all the amazing things you can do with the most popular character in videogames: Crates. From the beginning, we planned to use effects to emphasize and re-enforce the player's interaction with them. 

The very first mechanic introduced to the player in toxologic is the concept of the force and freeze arrows. Put simply, the force arrows move crates, while the freeze arrows freeze them in place. While the force arrows were fairly simple to understand, many people had problems trying to figure out when the freeze effect would wear off. Taking this into consideration, i designed a shader that would create an overlay texture that would disappear at the same rate as the freeze cooldown. This made it much simpler to see when the effect would wear off, and allowed us much more flexibility when designing puzzles.
Next, we had the squash and stretch arrows. In a similar fashion to the freeze arrow, we wanted to provide visual feedback that was linked to the arrow that hit the crate. For these, I created  similar shaders to the freeze shader that would overlay a wipe vertically or horizontally over the geometry, to signify *magical* squashing and stretching. In order to make sure the overlay did not distort horribly while the geometry stretched and squashed, I used a bit of shader math to create the overlays. This way, no matter how the geometry was modified, the overlays would remain consistent throughout the transition.
Finally, I added effects for the AI. In our game the Minotaur's main attack in Toxologic was throwing crates. As we were play-testing we didn't feel the crates were threatening enough. We decided the best way to solve this was to make the crates explode of course...
I took the original high poly crate mesh and split it into about 40 pieces. We attached rigid bodies to the pieces and set the prefab to swap with the crate mesh upon a strong enough impact. The pieces also maintain the momentum of the crate at the time of impact to complete the dynamic explosion effect.

All in all, i'm pretty happy with how the crates turned out. Crates usually don't have this many features, and so it presented a unique challenge when designing effects. Hopefully the visual feedback provided by the effects helps players to better understand our mechanics and lets them solve puzzles easier!
0 Comments

Olive - Character Shaders

1/21/2012

0 Comments

 
Here is something i worked on for Olive, a small game we made in the AIS mod team. The characters here are mini-bosses that the player must defeat in order to progress. Each was modeled and textured by Aaron Hain, while I worked on the shaders. For comparison, we have the original models by Aaron on the left, and the models with enhanced shaders on the right. 
Plant MiniBoss Shader - Features fake ambient light contribution and a Fresnel Rim light. The ambient contribution could be roughly described as the diffuse texture, to the power of the ambient light amount, lerped back into the diffuse texture. It seemed to bring out quite a few nice details in the model.
Fire MiniBoss Shader - Features fake ambient light contribution, Fresnel Rim light, and pulsating glowy bits. The ambient contribution works the same way as the Plant MiniBoss Shader, with the addition of a emissive map in the alpha channel of diffuse. An additional texture scrolls across the emissive map, causing sections to glow brightly and then cool in sequence. 
Water MiniBoss Shader -  Features fake ambient light contribution, Fresnel Rim light, and interpolated Specularity and FLOWMAPS! Its probably a BIT more expensive than it needs to be but it was so cool i had to do it. 
0 Comments
<<Previous
    In progress / half finished stuff. Random stuff I find interesting or useful. Whatever else I want.

    WIP

    Categories

    All

    RSS Feed

    Archives

    December 2014
    November 2014
    September 2014
    April 2014
    September 2012
    July 2012
    January 2012

Powered by Create your own unique website with customizable templates.