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.