Draw a sphere on a billboard with world normal from a pointlist

Question

I am drawing spheres on billboards by passing center world positions via a StructuredBuffer and use the geometry shader to build a billboard facing the camera. The sphere is drawn correctly and I can figure out the UVs. Now I would like to light it but I cannot figure how to calculate the normals in world coordinates...

The code look like this:

StructuredBuffer<float3> bufferPositions;

VS_OUTPUT VS_Main(uint vertexId : SV_VertexId)
{
    VS_OUTPUT res = (VS_OUTPUT)0;

    res.position = float4(bufferPositions[vertexId], 1);
    res.vertexId = vertexId;

    return res;
}

[maxvertexcount(4)]
void GS_Main(point VS_OUTPUT input[1], inout TriangleStream<VS_OUTPUT> OutputStream)
{
    float halfWidth = SIZE / 2.0f;

    float3 objToCam = normalize(input[0].position.xyz - fCameraPos);
    float3 upVector = float3(0.0f, 1.0f, 0.0f);
    float3 rightVector = normalize(cross(objToCam, upVector));

    rightVector = rightVector * halfWidth;
    upVector = normalize(cross(rightVector, objToCam)) * halfWidth;

    float3 vert[4];

    vert[0] = input[0].position.xyz - rightVector - upVector; // Get bottom left vertex
    vert[1] = input[0].position.xyz + rightVector - upVector; // Get bottom right vertex
    vert[2] = input[0].position.xyz - rightVector + upVector; // Get top left vertex
    vert[3] = input[0].position.xyz + rightVector + upVector; // Get top right vertex

    float2 texCoord[4];
    texCoord[0] = float2(-1, -1);
    texCoord[1] = float2(1, -1);
    texCoord[2] = float2(-1, 1);
    texCoord[3] = float2(1, 1);

    VS_OUTPUT outputVert;
    for(int i = 0; i < 4; i++)
    {
        outputVert.position = mul(float4(vert[i], 1.0f), fViewProj);
        outputVert.wpos = vert[i];
        outputVert.normal = objToCam;
        outputVert.texcoord0 = texCoord[i];
        outputVert.vertexId = input[0].vertexId;

        OutputStream.Append(outputVert);
    }   
}

PS_OUTPUT PS_Main(VS_OUTPUT input)
{
    PS_OUTPUT res = (PS_OUTPUT)0;

    float3 n = float3(input.texcoord0.x, input.texcoord0.y, 0);
    float r2 = dot(n.xy, n.xy);

    // if the texel is not inside the sphere
    if(r2 > 1.0f)
      discard;

    n.z = sqrt(1 - r2);

    // calculate UV mapping
    float u = 0.5 + atan2(n.z, n.x) / (2.0 * PI);
    float v = 0.5 - asin(n.y) / PI;   

    // how to calculate normal in world space ?

    return res;
}

I should have way more information than required to do the calculations but I cannot wrap my head about the calculation to make

UPDATE: I tried to create an Axis-Normal from the plane vector and create a rotation matrix that I would apply to the local normal n without success

I don't quite understand. A normal only makes sense per pixel, not per billboard. You should get a normal from your fragment shader - not in geometry. If your billboard has a normal map you need to pass on the tangent space (google) base vector. In the billboard space a straight ahead normal will be (0,0,1). Or (dx,dy,1) if you have a normal map. For lighting you want to get it into world space. What is world space is kind of up to you there. It's a billboard! — starmole, Jun 10 '15 at 05:54
I am trying to draw a sphere on a billboard. I got the billboard part correct and the local part of the sphere too. The "n" part of the pixel shader is sphere in the billboard local space so it doesn't vary depending on the camera position. What I need to do is calculate the sphere world matrix from the center and the direction normal then transform "n" with it but my previous attempt using an axis-angle to matrix didn't work and was too heavy anyway.. — kittikun, Jun 10 '15 at 06:11
First: Projecting a sphere is not obvious! Most people think a sphere projects to a circle. And therefore to a bounding square. That is not true. Draw it. Do not stick to a sphere. It is a false friend, conceptually. I have too little space and patience to type up everything, but google for "tangent space". It takes a bit of effort to understand at first but I think you are are far enough to get it! — starmole, Jun 10 '15 at 06:22
Check out sphere ray casting for a correct sphere. Most approaches also give you the according normals. — Nico Schertler, Jun 10 '15 at 13:05

score 1 · Accepted Answer · answered Jun 12 '15 at 23:35

The following describes a way, which should work for your situation.

Compute normal in billboard space

For example, you could use your texture coordinates here

float3 normal = float3(Tex.x*2-1, 0, Tex.y*2-1);
normal.y = sqrt(normal.x*normal.x+normal.y*normal.y)

Create an orthonormal transformation matrix (World -> Billboard)

This matrix consists of the three normalized base vectors (Left, Normal, Up) of your billboard, you will have to pass these to the pixel shader.

Inverse the matrix (Billboard -> World)

As the matrix is orthonormal the inverse is simply the transpose and the result transformes billdboardcoordinates to worldcoordinates.

Apply the matrix to the normal

An here you go, your worldspace normal is finished.

Draw a sphere on a billboard with world normal from a pointlist

1 Answers1