Cheesy Code

I was only going to write 3 Bing Maps 3D posts (they start Here), but today I added something that I thought was rather cool.

You can download the source code for this post here 3DViewerBingMaps.zip

In OpenGL you can draw something called a Stippled Line which is basically a dashed line with some extra control over the dash pattern, however in Bing Maps 3D there is no such thing, which is why I wrote my own dashed line mesh class. My class supports the following things:

- Lines are made up of multiple segments
- Dashes and gaps between dashes are independent in size
- You can set an offset each frame allowing for a moving ant effect
- You can set different widths for the start and the end of the line

Here’s 2 pictures of the same line showing the billboard effect of the wide dashes, and the constant dash and gap size:

If you download the sample at the top of this post you can run the application shown in the screenshots.

Here’s the code snippet for setting up the above Dashed Mesh:

DashedLineMesh dashedLine = new DashedLineMesh();

dashedLine.DashLength = 8;
dashedLine.GapLength = 16;
dashedLine.LineStartWidth = 1;
dashedLine.LineEndWidth = 64;
dashedLine.Color = Color.White;
dashedLine.ZBufferEnable = true;

dashedLine.Points.Clear();
GeodeticViewpoint centrePoint = new GeodeticViewpoint();
double alt = 1000000;
double lat = 45.0;
double lon = 180.0;

for(double i = 0; i<(Math.PI*2); i+=0.103)
{
  double x = 8+30 * Math.Sin(i);
  double y = 8+30 * Math.Cos(i);
  centrePoint.Position.Location = LatLonAlt.CreateUsingDegrees(lat+x, lon+y, alt);
  dashedLine.Points.Add(new Vector3F(centrePoint.Position.Vector));
}

and as a bonus here’s the complete source code for the DashedLineMesh class

// Dashed Line Mesh by John Stewien 2010

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.MapPoint.Rendering3D.GraphicsProxy;
using Microsoft.MapPoint.Geometry.VectorMath;
using Microsoft.MapPoint.Geometry;
using Microsoft.MapPoint.Graphics3D;
using Microsoft.MapPoint.Rendering3D.State;

namespace _3DViewerBingMaps.Plugin {

  /// <summary>
  /// Draws a multi-segment line that can be broken up into dashes
  /// </summary>
  public class DashedLineMesh : MeshGraphicsObject<Vertex.PositionOnly, ushort> {

    // ************************************************************************
    // Private Fields
    // ************************************************************************
    #region Private Fields

    /// <summary>
    /// A list of points that make up the line to be drawn. Points are in
    /// Lat, Lon, Alt format.
    /// </summary>
    private List<Vector3F> points;
    /// <summary>
    /// The starting width of the line in pixels
    /// </summary>
    private float lineStartWidth = 1f;
    /// <summary>
    /// The ending width of the line in pixels
    /// </summary>
    private float lineEndWidth = 1f;
    /// <summary>
    /// The length of the dashes in pixels
    /// </summary>
    private float dashLength = 0f;
    /// <summary>
    /// the length of the gaps between the dashes in pixels
    /// </summary>
    private float gapLength = 0f;
    /// <summary>
    /// The offset of the dahses in pixels. Incrementing this by .5 every frame
    /// gives a moving and effect.
    /// </summary>
    private float dashOffset = 0f;
    /// <summary>
    /// Enable alpha blending for this mesh
    /// </summary>
    private bool alphaEnable = false;
    /// <summary>
    /// Enable using the Depth Buffer for this mesh
    /// </summary>
    private bool zBufferEnable = true;
    /// <summary>
    /// The color to draw this line in
    /// </summary>
    private System.Drawing.Color color = System.Drawing.Color.White;

    #endregion Private Fields

    // ************************************************************************
    // Public Methods
    // ************************************************************************
    #region Public Methods

    /// <summary>
    /// Constructor
    /// </summary>
    /// <param name="radius"></param>
    /// <param name="material"></param>
    /// <param name="materialId"></param>
    public DashedLineMesh()
      : base(GraphicsBufferUsage.Dynamic, GraphicsBufferUsage.Dynamic, 4, 4, true) {

      this.points = new List<Vector3F>();

      if (base.State.Materials.Count == 0) {
        base.State.Materials.Add(new Material());
      }
      base.ProjectionEnabled = false;
      this.UpdateRenderState();
    }

    /// <summary>
    /// Updates the graphic prior to rendering it in a frame. Needs to be
    /// called every frame.
    /// </summary>
    /// <param name="camera"></param>
    /// <param name="transform"></param>
    /// <remarks>
    /// Unfortunately the GraphicsObject.UpdateInternalRenderObject method
    /// can't be overriden because of its "internal" protection, so this
    /// needs to be called every frame before the graphics is rendered
    /// </remarks>
    public void PreRenderUpdate(CameraData camera, Matrix4x4D transform) {
      int width = camera.View.Size.Width;
      int height = camera.View.Size.Height;
      this.UpdateLineGeometry(width, height, transform*camera.Snapshot.TransformMatrix);
    }

    #endregion Public Methods

    // ************************************************************************
    // Private Methods
    // ************************************************************************
    #region Private Methods

    /// <summary>
    /// Calculates the required line width from the user specified value and the
    /// size of the display area
    /// </summary>
    /// <param name="deviceWidth"></param>
    /// <param name="deviceHeight"></param>
    /// <returns></returns>
    private Vector3F GetWidth(float lineWidth, int deviceWidth, int deviceHeight) {
      float x = lineWidth / ((float)deviceWidth);
      float y = lineWidth / ((float)deviceHeight);
      Vector3F retVal = new Vector3F(x, y, 1f);
      return retVal;
    }

    /// <summary>
    /// Apply the position/scale tranform, and the projection transform to the points
    /// to convert them to screen coordinates
    /// </summary>
    /// <param name="projectionTransform"></param>
    /// <returns></returns>
    private IList<Vector3F> TransformedPoints(Matrix4x4D projectionTransform) {
      List<Vector3F> list = new List<Vector3F>(this.points.Count);
      Matrix4x4D matrix = projectionTransform;
      foreach (Vector3F vectorf in this.points) {
        Vector4D vector = new Vector4D((double)vectorf.X, (double)vectorf.Y, (double)vectorf.Z, 1.0);
        vector = Vector4D.TransformCoordinate(ref vector, ref matrix);
        if (vector.W > 0.0) {
          vector.MultiplyBy(1.0 / vector.W);
        } else {
          vector.MultiplyBy(1.0 / -vector.W);
        }
        list.Add(new Vector3F((float)vector.X, (float)vector.Y, (float)vector.Z));
      }
      return list;
    }

    /// <summary>
    /// This method takes all the solid lines and breaks them up into dashes
    /// </summary>
    /// <param name="lineList"></param>
    /// <param name="widthList"></param>
    /// <param name="deviceWidth"></param>
    /// <param name="deviceHeight"></param>
    private bool ConvertToDashed(ref IList<Vector3F> lineList, ref IList<float> widthList, int deviceWidth, int deviceHeight) {
      this.dashOffset = dashOffset % (dashLength + gapLength);

      // Scale everything to viewport space
      float dashStep = 2 * this.dashLength / Math.Min(deviceWidth, deviceHeight);
      float gapStep = 2 * this.gapLength / Math.Min(deviceWidth, deviceHeight);
      float offsetStep = 2 * this.dashOffset / Math.Min(deviceWidth, deviceHeight);

      // Sanity check dashStep and gapStep
      if (dashStep <= 0 || gapStep <= 0) {
        return false;
      }

      // Calculate the initial conditions
      float remainder = offsetStep;
      bool doDash = remainder==0;
      if (remainder > gapStep) {
        remainder -= gapStep;
        doDash = true;
      }

      bool doingJoin = false;

      List<Vector3F> dashedLineList = new List<Vector3F>();
      List<float> dashedWidthList = new List<float>();

      for (int i = 0; i < (lineList.Count - 1); i++) {
        Vector3F fromPoint = lineList[i];
        Vector3F toPoint = lineList[i + 1];

        // Store the original line length. Used for calculating the line width later on.
        float lineLength = Vector3F.Distance(fromPoint, toPoint);

        // Clamp the line to the visible area otherwise a lot more calculation will be done
        // than is required
        if (ClampLineToBox(ref fromPoint, ref toPoint, new Vector2F(-1, -1), new Vector2F(1, 1))) {

          // Need to break up the line in the X-Y direction regardless of Z
          Vector2F segment = new Vector2F(toPoint.X - fromPoint.X, toPoint.Y - fromPoint.Y);
          float segLength = segment.Length();
          if (segLength > 0) {

            float widthDiff = widthList[i + 1] - widthList[i];

            Vector3F step = new Vector3F(segment.X, segment.Y, toPoint.Z - fromPoint.Z) / segLength;

            float distTravelled = 0;
            float nextDash = remainder > 0 ? remainder : dashStep;
            float nextgap = remainder > 0 ? remainder : gapStep;

            // Calcluate the line width for the point we are starting at and
            // Calculate the line width increments for when we iterate over the dashes

            float invLineLength = 1f / lineLength;
            float progressiveWidth = widthList[i] + widthDiff * (remainder + Vector3F.Distance(fromPoint, lineList[i])) * invLineLength;
            float dashDWidth = widthDiff * dashStep * invLineLength;
            float gapDWidth = widthDiff * gapStep * invLineLength;

            // Keep on adding dashes until we reach the end of the line segment
            // Also calculate the line widths for each end of the dashes

            while (distTravelled < segLength) {
              if (doDash) {
                if (doingJoin) {
                  dashedLineList.RemoveAt(dashedLineList.Count - 1);
                  dashedWidthList.RemoveAt(dashedWidthList.Count - 1);
                } else {
                  dashedLineList.Add(distTravelled * step + fromPoint);
                  dashedWidthList.Add(progressiveWidth);
                }

                doingJoin = false;

                distTravelled += nextDash;
                progressiveWidth += dashDWidth;

                dashedLineList.Add(Math.Min(segLength, distTravelled) * step + fromPoint);
                dashedWidthList.Add(progressiveWidth);

                if (distTravelled > segLength && i < (lineList.Count - 2)) {
                  doingJoin = true;
                }
              } else {
                distTravelled += nextgap;
                progressiveWidth += gapDWidth;
              }
              doDash = !doDash;
              nextDash = dashStep;
              nextgap = gapStep;
            }
            remainder = distTravelled - segLength;
            if (remainder > 0) {
              doDash = !doDash;
            }
          }
        } else {
          doingJoin = false;
        }
      }
      lineList = dashedLineList;
      widthList = dashedWidthList;
      return true;
    }

    /// <summary>
    /// Clamps the line between the 2 vectors passed to be within the box limits passed in.
    /// </summary>
    /// <param name="from"></param>
    /// <param name="to"></param>
    /// <param name="min"></param>
    /// <param name="max"></param>
    /// <returns>
    /// true if the line is visible, false otherwise
    /// </returns>
    private bool ClampLineToBox(ref Vector3F from, ref Vector3F to, Vector2F boxMin, Vector2F boxMax) {
      // need to limit everything to within -1 to 1 on all dimensions

      // Test if anything is inside the viewbox
      if (Math.Min(from.X, to.X) > boxMax.X || Math.Max(from.X, to.X) < boxMin.X ||
        Math.Min(from.Y, to.Y) > boxMax.Y || Math.Max(from.Y, to.Y) < boxMin.Y) {
        return false;
      }

      // Test if the line is completely contained in the viewbox
      if (Math.Min(from.X, to.X) > boxMin.X && Math.Max(from.X, to.X) < boxMax.X &&
        Math.Min(from.Y, to.Y) > boxMin.Y && Math.Max(from.Y, to.Y) < boxMax.Y) {
        return true;
      }

      ClampDestToBox(ref from, ref to, boxMin, boxMax);
      ClampDestToBox(ref to, ref from, boxMin, boxMax);

      return true;
    }

    /// <summary>
    /// Clamps the destination point to the box limits passed in
    /// </summary>
    /// <param name="from"></param>
    /// <param name="dest"></param>
    /// <param name="boxMin"></param>
    /// <param name="boxMax"></param>
    private void ClampDestToBox(ref Vector3F from, ref Vector3F dest, Vector2F boxMin, Vector2F boxMax) {
      Vector3F diff = dest - from;

      if (dest.X > boxMax.X) {
        dest = (boxMax.X - from.X) / diff.X * diff + from;
      } else if (dest.X < boxMin.X) {
        dest = (boxMin.X - from.X) / diff.X * diff + from;
      }
      if (dest.Y > boxMax.Y) {
        dest = (boxMax.Y - from.Y) / diff.Y * diff + from;
      } else if (dest.Y < boxMin.Y) {
        dest = (boxMin.Y - from.Y) / diff.Y * diff + from;
      }
    }

    /// <summary>
    /// Updates the vertex and index buffer for rendering the line for the current viewpoint
    /// </summary>
    /// <param name="deviceWidth"></param>
    /// <param name="deviceHeight"></param>
    /// <param name="projectionTransform"></param>
    private void UpdateLineGeometry(int deviceWidth, int deviceHeight, Matrix4x4D projectionTransform) {
      this.Indices.Clear();
      this.Vertices.Clear();

      // Get all the points in screen coordinates
      IList<Vector3F> list = this.TransformedPoints(projectionTransform);
      IList<float> widths = this.GetWidths(list);
      bool isDashed = this.ConvertToDashed(ref list, ref widths, deviceWidth, deviceHeight);
      for (int i = 0; i < (list.Count - 1); i++) {
        Vector3F width1 = this.GetWidth(widths[i], deviceWidth, deviceHeight);
        Vector3F width2 = this.GetWidth(widths[i+1], deviceWidth, deviceHeight);
       
        Vector3F difference = list[i + 1] - list[i];
        Vector2F direction = Vector2F.Normalize(new Vector2F(difference.X, difference.Y));
        Vector3F perpendicular1 = new Vector3F(-direction.Y * width1.X, direction.X * width1.Y, 0f);
        Vector3F perpendicular2 = new Vector3F(-direction.Y * width2.X, direction.X * width2.Y, 0f);
        this.Vertices.AddData(new Vertex.PositionOnly(list[i] + perpendicular1));
        this.Vertices.AddData(new Vertex.PositionOnly(list[i] - perpendicular1));
        this.Vertices.AddData(new Vertex.PositionOnly(list[i+1] + perpendicular2));
        this.Vertices.AddData(new Vertex.PositionOnly(list[i+1] - perpendicular2));
        int num2 = i*2;
        ushort[] data = new ushort[] { (ushort)num2, (ushort)(num2 + 2), (ushort)(num2 + 3), (ushort)num2, (ushort)(num2 + 3), (ushort)(num2 + 1) };
        this.Indices.AddDataUnsafe(data, PrimitiveType.TriangleList, 0);
        if (isDashed)
          i++;
      }
    }

    /// <summary>
    /// Creates a list of widths for the points passed in.
    /// </summary>
    /// <param name="list"></param>
    /// <returns></returns>
    private IList<float> GetWidths(IList<Vector3F> list) {
      float[] progressiveLength = new float[list.Count];
      float totalLength = 0;
      for (int i = 0; i < (list.Count-1); ++i) {
        progressiveLength[i] = totalLength;
        totalLength += Vector3F.Distance(list[i], list[i + 1]);
      }
      progressiveLength[list.Count - 1] = totalLength;

      if (totalLength > 0) {
        float widthDiff = lineEndWidth - lineStartWidth;
        float invTotalLength = 1f/totalLength;
        for (int i = 0; i < progressiveLength.Length; ++i) {
          progressiveLength[i] = lineStartWidth + widthDiff * progressiveLength[i] * invTotalLength;
        }
      }

      return progressiveLength;
    }

    /// <summary>
    /// Updates the colors, depth buffer, and alpha settings for rendering the mesh
    /// </summary>
    private void UpdateRenderState() {
      RenderState renderState = base.State.RenderState;
      if (this.alphaEnable) {
        renderState.Alpha.Enabled = true;
        renderState.Alpha.SourceBlend = Blend.SourceAlpha;
        renderState.Alpha.DestinationBlend = Blend.InvSourceAlpha;
      } else {
        renderState.Alpha.Enabled = false;
      }
      renderState.Lighting.Enabled = false;
      renderState.Cull.Enabled = false;
      renderState.Stages[0].Blending.AlphaArgument1 = TextureArgument.TFactor;
      renderState.Stages[0].Blending.AlphaOperation = TextureOperation.SelectArg1;
      renderState.Stages[0].Blending.ColorArgument1 = TextureArgument.TFactor;
      renderState.Stages[0].Blending.ColorOperation = TextureOperation.SelectArg1;
      renderState.Stages[1].Enabled = false;
      renderState.TextureFactor.Value = this.color;
      renderState.ZBuffer.Enabled = zBufferEnable;
      renderState.ZBuffer.ZBufferFunction = Compare.Less;
    }

    #endregion Private Methods

    // ************************************************************************
    // Properties
    // ************************************************************************
    #region Properties

    /// <summary>
    /// A list of points that make up the line to be drawn. Points are in
    /// Lat, Lon, Alt format.
    /// </summary>
    public List<Vector3F> Points {
      get {
        return points;
      }
    }

    /// <summary>
    /// Gets and Sets the starting width of the line in pixels
    /// </summary>
    public float LineStartWidth {
      get {
        return this.lineStartWidth;
      }
      set {
        if (value <= 0f) {
          throw new ArgumentOutOfRangeException("value");
        }
        this.lineStartWidth = value;
      }
    }

    /// <summary>
    /// Gets and Sets the end width of the line in pixels
    /// </summary>
    public float LineEndWidth {
      get {
        return this.lineEndWidth;
      }
      set {
        if (value <= 0f) {
          throw new ArgumentOutOfRangeException("value");
        }
        this.lineEndWidth = value;
      }
    }

    /// <summary>
    /// Gets and Sets the length of the dashes in pixels
    /// </summary>
    public float DashLength {
      get {
        return dashLength;
      }
      set {
        if (value < 0f) {
          throw new ArgumentOutOfRangeException("value");
        }
        dashLength = value;
      }
    }

    /// <summary>
    /// Gets and Sets the length of the gaps between the dashes in pixels
    /// </summary>
    public float GapLength {
      get {
        return gapLength;
      }
      set {
        if (value < 0f) {
          throw new ArgumentOutOfRangeException("value");
        }
        gapLength = value;
      }
    }

    /// <summary>
    /// Gets and Sets the offset of the dashes in pixels.
    /// </summary>
    /// <remarks>
    ///  Incrementing this by .5 every frame gives a moving ant effect.
    /// </remarks>
    public float DashOffset {
      get {
        return dashOffset;
      }
      set {
        if (value < 0f) {
          throw new ArgumentOutOfRangeException("value");
        }
        dashOffset = value;
      }
    }

    /// <summary>
    /// Gets and Sets if alpha blending is enabled for this line
    /// </summary>
    public bool AlphaEnable {
      get {
        return this.alphaEnable;
      }
      set {
        if (this.alphaEnable != value) {
          this.alphaEnable = value;
          this.UpdateRenderState();
        }
      }
    }

    /// <summary>
    /// Gets and Sets if the Depth Buffer is enabled for this mesh
    /// </summary>
    public bool ZBufferEnable {
      get {
        return this.zBufferEnable;
      }
      set {
        if (this.zBufferEnable != value) {
          this.zBufferEnable = value;
          this.UpdateRenderState();
        }
      }
    }

    /// <summary>
    /// Gets and Sets the color to draw this line in
    /// </summary>
    public System.Drawing.Color Color {
      get {
        return this.color;
      }
      set {
        if (this.color != value) {
          this.color = value;
          this.UpdateRenderState();
        }
      }
    }

    #endregion Properties
  }
}

The final source code for these Bing Maps 3D posts can be found here 3DViewerBingMaps.zip. You will also need to install Bing Maps 3D from Microsoft.

This is the 3rd part of my posts on Bing Maps 3D. The 3 parts are:

- Adding Arbitrary Shapes. Creating a Cube mesh and a Sphere mesh.
- Rendering shapes past the Far Clip. How to render shapes whose coordinates are outside the View Port.
- Clipping shapes with an imposter Earth.

In the previous Bing Maps 3D post we had overcome the problem of 3D objects being clipped by the far plane on the horizon, but now we had the problem that they weren’t being clipped by the earth as seen for the yellow cube in the picture below:

The solution to this is to create another sphere to imitate the earth, but smaller and closer to the camera. The sphere should be scaled down by the same factor that the cube is scaled down when it is brought closer to the camera. The sphere rendered for the Earth in Bing Maps 3D isn’t an exact sphere, it is a little bit squashed, so to make sure we get the same shape we measure the earth from within Bing Maps 3D and apply those measurements to our sphere. Here’s where we use the SetToReplaceEarth() method that I included in the Sphere Mesh code in the first post which looks like this:

/// <summary>
/// Scales and positions this sphere such that it replaces the earth
/// </summary>
public void SetToReplaceEarth() {
  Microsoft.MapPoint.Rendering3D.Cameras.GeodeticViewpoint view = new Microsoft.MapPoint.Rendering3D.Cameras.GeodeticViewpoint();
  Vector3D[] vecs = new Vector3D[6];
  view.Position.Location = LatLonAlt.CreateUsingDegrees(0, 0, 0);
  vecs[0] = view.Position.Vector;

  view.Position.Location = LatLonAlt.CreateUsingDegrees(0,180, 0);
  vecs[1] = view.Position.Vector;

  view.Position.Location = LatLonAlt.CreateUsingDegrees(-90, 0, 0);
  vecs[2] = view.Position.Vector;

  view.Position.Location = LatLonAlt.CreateUsingDegrees(90, 0, 0);
  vecs[3] = view.Position.Vector;

  view.Position.Location = LatLonAlt.CreateUsingDegrees(0, 90, 0);
  vecs[4] = view.Position.Vector;

  view.Position.Location = LatLonAlt.CreateUsingDegrees(0, -90, 0);
  vecs[5] = view.Position.Vector;

  Vector3D average = new Vector3D(0, 0, 0);
  Vector3D min = new Vector3D(double.MaxValue, double.MaxValue, double.MaxValue);
  Vector3D max = new Vector3D(double.MinValue, double.MinValue, double.MinValue);

  for (int i = 0; i < vecs.Length; ++i) {
    average.Add(vecs[i]);
    min = min.Min(vecs[i]);
    max = max.Max(vecs[i]);
  }
  average.MultiplyBy(1.0 / 6.0);

  this.Position = average;

  Vector3D diff = max.Subtract(min);
  diff.MultiplyBy(0.5 / radius);
  this.Scale = diff;

}

We put this sphere into the scene at 0,0,0, and to make it visible I will give it a very transparent yellow color. Here’s the result:

So it’s working now right? Well not quite, you see I’ve drawn the sphere above to have 20 stacks, 20 slices, so it’s not a very high resolution mesh, so when you get lower the clip is quite a bit under the surface. In the image below the yellow line should stop at the same place as the red cube does:

Easy fix right? Lets change the imitation Earth to a 200×200 mesh:

What happened? Well the old DirectX cards could only handle a 16 bit Index Buffer , which is what we set up our sphere mesh as when we declared it like this:

public class SphereMesh : MeshGraphicsObject<Vertex.PositionNormal, ushort>{
}

Fortunately for me my video card can handle a 32 bit index buffer, so I change the code throughout to have uint instead of ushort and now it works fine and the error in the clip at low altitude is improved:

This wraps up my 3 part series on adding 3D Meshes to Bing Maps 3D. Enjoy playing with the sample application attached at the top of all 3 articles.