Monday, February 10, 2014

Shock Wave Refraction Pixel Shader

Yesterday I had a few hours time and tweaked my explosion effects a little bit. Its not 100% finished, but have a first look:

Shock Wave Pixel Shader from Jan Tepelmann on Vimeo.

The implementation is straight forward. I use a pixel shader to manipulate the drawn pixels around the explosion. To be able doing this you have to render the whole scene first to a full screen quad. For more details about post-processing with full screen quads, heres a nice blog post about it. By drawing to the quad you can execute a pixel shader for every drawn pixel. The vertex shader does nothing in this case. This process is called post processing and effects like HDR, Bloom or more advanced effects like Screen Space Ambient Occlusion (SSAO) are realized in that way. But the possibilities for different effects are endless. Also deferred shading is some kind of post processing effect (nice slides explaining deferred shading).
In SunBurn you can simply create a post processor by deriving from a specific base class. This class uses a full screen quad for appling a pixel shader on the current frame.
The post processor is responsible for passing all the input variables to the actual shader and maybe do some pre processing. In my case I had to transform the explosions world positions into the coordinate system of the full screen quad. This is simply the texture coordinate space with (0,0) at the top left and (1,1) at the bottom right. Thats different to the normal projection process with the view-projection matrix! To get everything right I made a sketch how the positions have to be transformed.


Transformation from world space coordinates to texture coordinates
Next I want to add a refraction effect to the space ship engines.



Monday, January 20, 2014

First Beams effect

This weekend I finally had time to finish my code for auto aiming beams. Have a look:


Beams from Jan Tepelmann on Vimeo.

Not perfect yet, but a good start! When the beam has no target, the effect looks a little bit ugly. That surely needs improvement.

Calculating the beam curve
Every beam consists of a starting- and end-point. Firstly, I create a local coordinate system to make things easier. In the local coordinate system the starting point is at (0, 0) and the endpoint is at (1, 1). Now I use the XNA Curve Class to define a smooth curve between those two points. This is simply done by specifying the wanted values at the positions. The curve class can then interpolate between those position-value pairs (just use curve.Evaluate(position)). In the sketch below I defined five position-value pairs. The pairs are called CurveKeys:
  • (0, 0)
  • (0.25, 0.25²)
  • (0.50, 0.50²)
  • (0.75, 0.75²)
  • (1, 1)
You can see that this is simply a quadratic curve. So why then bother and use the curve class? Because now I can add an oscillation to the curve easily, by simply modifying the CurveKey values depending on the current time. This allows adding a wave effect on the beam.
A good sketch is half the battle :-)
Rendering the beam curve
To render the beam curve I  break the beam curve down into N line segments (in the video N=30). Those line segments are drawn with the help of a custom vertex shader (with hardware instancing! cool :-). The drawing code is based on the XNA RoundLine example (describing blog post). Since the original vertex shader draws on the XY-plane, I had to modify the shader to draw on the XZ-plane. I also did some other changes to the pixel shader to have a smoother glow effect. I think I will do some more tweaking in the pixel shader to make the beam look more like plasma.