How to draw a 3D capsule?

Question

I want to draw a 3D capsule defined by a segment (two points start->end) and a radius:

^{Image source: Orionist on Wikimedia Commons}

I already have a sphere leaning on this answer: https://stackoverflow.com/a/31326534/1902536. I understand that I can expand the Parametric Equation to an ellipse one but I'm not sure how to do it with the segment (that may have rotation).

what is the best way to draw/model a capsule?

Answer 1

First we can construct a local basis for the space of the capsule.

axis = end - start;
length = Length(axis)

localZ = axis/length

localX = GetAnyPerpendicularUnitVector(localZ)

localY = Cross(localZ, localX)

Now we can parametrize points on the cylinder segment using two variables u & v in the range 0...1:

shaftPoint = start
      + localX * cos(2 * pi * u) * r
      + localY * sin(2 * pi * u) * r
      + localZ * v * length

And points on the hemispheres similarly:

latitude = (pi/2) * (v - 1)
startHemispherePoint = start
      + localX * cos(2 * pi * u) * cos(latitude) * r
      + localY * sin(2 * pi * u) * cos(latitude) * r
      + localZ * sin(latitude) * r

latitude = (pi/2) * v
endHemispherePoint = end
      + localX * cos(2 * pi * u) * cos(latitude) * r
      + localY * sin(2 * pi * u) * cos(latitude) * r
      + localZ * sin(latitude) * r

Note that the vertices produced for v = 1 in the start hemisphere formula are the same as those made by the shaft formula at v = 0. And likewise the shaft's v = 1 is the end hemisphere's v = 0, ensuring all three parts match up seamlessly. You can generate vertices on just one side of the seam or the other so as not to produce duplicates.

Answer 2

Based on the answer from @DMGregory here is my implementation:

glm::vec3 GetAnyPerpendicularUnitVector(const glm::vec3& vec)
{
  if (vec.y != 0.0f || vec.z != 0.0f)
    return glm::vec3(1, 0, 0);
  else
    return glm::vec3(0, 1, 0);
}

void DebugManager::drawCapsule(const Capsule& c, const glm::vec4& color)
{
  const glm::vec3 axis   = c.end - c.start;
  const float     length = glm::length(axis);
  const glm::vec3 localZ = axis / length;
  const glm::vec3 localX = GetAnyPerpendicularUnitVector(localZ);
  const glm::vec3 localY = glm::cross(localZ, localX);

  using glm::cos;
  using glm::sin;
  constexpr float pi = glm::pi<float>();

  const glm::vec3 start(0.0f);
  const glm::vec3 end(1.0f);
  const float     resolution = 16.0f;

  const glm::vec3 step = (end - start) / resolution;

  auto cylinder = [localX, localY, localZ, c, length](const float u,
                                                      const float v) {
    return c.start                                  //
           + localX * cos(2.0f * pi * u) * c.radius //
           + localY * sin(2.0f * pi * u) * c.radius //
           + localZ * v * length;                   //

  };

  auto sphereStart = [localX, localY, localZ, c](const float u,
                                                 const float v) -> glm::vec3 {
    const float latitude = (pi / 2.0f) * (v - 1);

    return c.start                                                  //
           + localX * cos(2.0f * pi * u) * cos(latitude) * c.radius //
           + localY * sin(2.0f * pi * u) * cos(latitude) * c.radius //
           + localZ * sin(latitude) * c.radius;
  };

  auto sphereEnd = [localX, localY, localZ, c](const float u, const float v) {
    const float latitude = (pi / 2.0f) * v;
    return c.end                                                    //
           + localX * cos(2.0f * pi * u) * cos(latitude) * c.radius //
           + localY * sin(2.0f * pi * u) * cos(latitude) * c.radius //
           + localZ * sin(latitude) * c.radius;
  };

  for (float i = 0; i < resolution; ++i) {
    for (float j = 0; j < resolution; ++j) {
      const float u = i * step.x + start.x;
      const float v = j * step.y + start.y;

      const float un =
        (i + 1 == resolution) ? end.x : (i + 1) * step.x + start.x;
      const float vn =
        (j + 1 == resolution) ? end.y : (j + 1) * step.y + start.y;

    // Draw Cylinder
      {
        const glm::vec3 p0 = cylinder(u, v);
        const glm::vec3 p1 = cylinder(u, vn);
        const glm::vec3 p2 = cylinder(un, v);
        const glm::vec3 p3 = cylinder(un, vn);

        drawTriangle(p0, p1, p2, color);
        drawTriangle(p3, p1, p2, color);
      }

    // Draw Sphere start
      {
        const glm::vec3 p0       = sphereStart(u, v);
        const glm::vec3 p1       = sphereStart(u, vn);
        const glm::vec3 p2       = sphereStart(un, v);
        const glm::vec3 p3       = sphereStart(un, vn);
        drawTriangle(p0, p1, p2, color);
        drawTriangle(p3, p1, p2, color);
      }

    // Draw Sphere end
      {
        const glm::vec3 p0       = sphereEnd(u, v);
        const glm::vec3 p1       = sphereEnd(u, vn);
        const glm::vec3 p2       = sphereEnd(un, v);
        const glm::vec3 p3       = sphereEnd(un, vn);
        drawTriangle(p0, p1, p2, color);
        drawTriangle(p3, p1, p2, color);
      }
    }
  }
}