c++ – How properly rotate a polygon to match the direction of the camera?

I’m following Bobby Anguelov’s article on getting a sprite shader set up using a geometry shader approach. I’m using it to draw lines on screen, however I’m having a few issues modifying to fit my needs. First off, this is the shader (in DirectX11 HLSL)

(maxvertexcount(6))
void gs_line(line InVertex input(2), inout TriangleStream<OutVertex> output)
{

    float3 inVertex1Pos = input(0).pos.xyz;
    float3 inVertex2Pos = input(1).pos.xyz;

    //get the vector that the line represents
    float3 lineVec = normalize(inVertex1Pos - inVertex2Pos);

    //get the vector looking at camera
    float3 lineCenter = (inVertex1Pos + inVertex2Pos) / 2.0f;
    float3 towardsCamVec = normalize(CameraPosition - lineCenter);

    //get the vector that is the up direction from our view point (the normal of the plane made by line and towardsCamVec)
    float3 localUpVec = normalize(cross(lineVec, towardsCamVec));

    //compose our line out of two triangles
    OutVertex v(6);
    v(0).pos.xyz = inVertex1Pos + LineThickness * localUpVec;
    v(0).color = input(0).color;
    v(1).pos.xyz = inVertex2Pos + LineThickness * localUpVec;
    v(1).color = input(1).color;
    v(2).pos.xyz = inVertex1Pos - LineThickness * localUpVec;
    v(2).color = input(0).color;
    v(3).pos.xyz = inVertex1Pos - LineThickness * localUpVec;
    v(3).color = input(0).color;
    v(4).pos.xyz = inVertex2Pos + LineThickness * localUpVec;
    v(4).color = input(1).color;
    v(5).pos.xyz = inVertex2Pos - LineThickness * localUpVec;
    v(5).color = input(1).color;


    //move to clip space 
    for (int i = 0; i < 6; i++)
    {
        v(i).pos.w = 1.0f;

        v(i).pos = mul(v(i).pos, WorldTranslationMatrix);
        v(i).pos = mul(v(i).pos, View);
        v(i).pos = mul(v(i).pos, Projection);
    }

    //output all the vertices upstream
    output.Append(v(0));
    output.Append(v(1));
    output.Append(v(2));
    output.RestartStrip();
    output.Append(v(3));
    output.Append(v(4));
    output.Append(v(5));
    output.RestartStrip();
}

I have two issues with this code. One is that there is a part that I’m not 100% clear on and the second is that I’m having trouble modifying the code to fit my needs. Starting with the first issue, the code above works well, however what I don’t get is this – I orient the two triangles towards the camera before I translate the sprite. Meaning that after I translation, shouldn’t the sprite now be facing the old direction of where the camera was before it was translated? In other words shouldn’t the translation mess up the sprite effect, since it’s done after the fact that I oriented it? Shouldn’t I first translate it and then orient the sprite from the new location. However it’s not the case, the code works as expected and the sprite always remains facing the camera. Why is that?

The second issue I have is I’m trying to add rotations where I can specify a rotation matrix to rotate the sprite around something but for some reason it’s messing up the sprite effect. The triangles become misaligned and stop facing the camera.

I just add a rotation multiplication before the translation like this

//move to clip space 
    for (int i = 0; i < 6; i++)
    {
        v(i).pos.w = 1.0f;


        v(i).pos = mul(v(i).pos, WorldRotationMatrix);
        v(i).pos = mul(v(i).pos, WorldTranslationMatrix);
        v(i).pos = mul(v(i).pos, View);
        v(i).pos = mul(v(i).pos, Projection);
    }

How can I accomplish this?

This is a video of the problem.

Any help is appreciated with either issue. Thanks!