Sign in to follow this  

DX11 DX11 - HLSL - Billboarding

Recommended Posts

Migi0027    4628

Hi guys! happy.png


This is my current issue, I'm trying to create 3d billboards, now this is how I think I should do it:


(Sample: Render thousands of grass instances)


Create Instance Buffer ( -> Position, Rotation)

Send Mesh Stuff + Instance Buffer



  float4x4 rMatrix = generateRotationMatrix(instanceRot);
  position = mul(position, rMatrix);
  position += instancepos;

  ...apply World, View, Proj matrices here.

But is this the best way? Because I don't think passing a constant buffer with thousands of rotation matrices would be so good, am I wrong?


What does you're experience tell you to do here?


So the real question is: How can I individually rotate thousands of instances to the cameras view?


Thank You, like always! wink.png

Share this post

Link to post
Share on other sites
menohack    216

You don't rotate billboards. Billboards always face the camera because they are just 2-D sprites. The only matrix you need to store per instance in your instance buffer is the world matrix. This matrix will have the position and scale of the billboards, such that the further it is the smaller it gets.


Anyway for instancing models this is what I do:


struct InstanceBuffer

Then my shaders (note this is a normal model, not a billboard) look something like this:

PS_INPUT VS( VS_INPUT input, uint iid : SV_InstanceID)
    PS_INPUT output = (PS_INPUT)0;
    output.Pos = mul( input.Pos, InstanceWorld[iid] );
    output.Pos = mul( output.Pos, View );
    output.Pos = mul( output.Pos, Projection );
    output.Norm = mul(float4(input.Norm, 0), InstanceWorld[iid] ).xyz;
	output.Tex = input.Tex;
    return output;

cbuffer InstanceBuffer : register(b1)
	matrix InstanceWorld[NUM_MAX_INSTANCES];

Someone else can chime in with the max size of the instance buffer. I just guessed 128 for now.


Any time I need to render a batch of instanced models I call UpdateSubresource() with my new instance buffer and then DrawInstanced(). For drawing thousands of models I would probably have multiple DrawInstanced() calls, but I don't know if there is a better way.

Share this post

Link to post
Share on other sites
mhagain    13430

You don't even need to store a matrix in your per-instance buffer (which I'd use a dynamic vertex buffer for, with D3D11_INPUT_PER_INSTANCE_DATA in the corresponding input layout so that you won't run into cbuffer space limits); you can just store a combined MVP in your per-frame cbuffer, then the position of each instance in your per-instance buffer.


In your per-frame cbuffer you also store a couple of vectors which you can extract from your view matrix, and that gives you everything you need to do billboarding, at a significantly reduced data cost and much higher ceiling on how many instances you can have per draw call.


A discussion of the technique (implemented in software, but which you should be easily able to convert to shader code) is available here:

Share this post

Link to post
Share on other sites
Migi0027    4628

Thank you mhagain and menohack!


mhagain, I followed your link and it is actually working now, and now I'm translating it into shader code, but here is my worry:


How can I translate the vertices individually, as each vertex has it's own location.


I guess I could use the SV_VertexID and then use some if's, but would that be slow?


I'm not asking for you to write the shader code, just guide me.

Share this post

Link to post
Share on other sites
mhagain    13430

The easiest way would be to use a geometry shader.  Input one point, output a 4-vert tristrip, and just lift it from the software version.  You don't need to use instancing with this method, although having the GS stage active will introduce some (small) additional overhead.  If that's acceptable, then go do it.


Another method would be to use an additional per-vertex buffer, containing 4 verts.  This buffer can be static, and each vertex is 2 floats: {{-1, -1}, {1, -1}, {-1, 1}, {1, 1}} works well for one tristrip ordering (other tristrip orderings will be different, of course).  Let's assume that this is called "offset" in your VS input struct, that "position" is a float3, and you get the following:

vs_out.position = mul (float4 (vs_in.position + right * offset.x + up * offset.y, 1.0f), globalMVP);

If you want each billboard to have a variable scale ("scale" in your input struct) modify like so:

vs_out.position = mul (float4 (vs_in.position + (right * offset.x + up * offset.y) * vs_in.scale, 1.0f), globalMVP)

This isn't exactly the same as the example in the link I posted; that one produces a diamond shape, this one is a square.


These "offsets" can alternatively be indexed via SV_VertexID and also be reused for texcoords, by the way.

Edited by mhagain

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By gsc
      Hi! I am trying to implement simple SSAO postprocess. The main source of my knowledge on this topic is that awesome tutorial.
      But unfortunately something doesn't work... And after a few long hours I need some help. Here is my hlsl shader:
      float3 randVec = _noise * 2.0f - 1.0f; // noise: vec: {[0;1], [0;1], 0} float3 tangent = normalize(randVec - normalVS * dot(randVec, normalVS)); float3 bitangent = cross(tangent, normalVS); float3x3 TBN = float3x3(tangent, bitangent, normalVS); float occlusion = 0.0; for (int i = 0; i < kernelSize; ++i) { float3 samplePos = samples[i].xyz; // samples: {[-1;1], [-1;1], [0;1]} samplePos = mul(samplePos, TBN); samplePos = + samplePos * ssaoRadius; float4 offset = float4(samplePos, 1.0f); offset = mul(offset, projectionMatrix); offset.xy /= offset.w; offset.y = -offset.y; offset.xy = offset.xy * 0.5f + 0.5f; float sampleDepth = tex_4.Sample(textureSampler, offset.xy).a; sampleDepth = vsPosFromDepth(sampleDepth, offset.xy).z; const float threshold = 0.025f; float rangeCheck = abs(positionVS.z - sampleDepth) < ssaoRadius ? 1.0 : 0.0; occlusion += (sampleDepth <= samplePos.z + threshold ? 1.0 : 0.0) * rangeCheck; } occlusion = saturate(1 - (occlusion / kernelSize)); And current result:
      I will really appreciate for any advice!
    • By isu diss
       I'm trying to code Rayleigh part of Nishita's model (Display Method of the Sky Color Taking into Account Multiple Scattering). I get black screen no colors. Can anyone find the issue for me?
      #define InnerRadius 6320000 #define OutterRadius 6420000 #define PI 3.141592653 #define Isteps 20 #define Ksteps 10 static float3 RayleighCoeffs = float3(6.55e-6, 1.73e-5, 2.30e-5); RWTexture2D<float4> SkyColors : register (u0); cbuffer CSCONSTANTBUF : register( b0 ) { float fHeight; float3 vSunDir; } float Density(float Height) { return exp(-Height/8340); } float RaySphereIntersection(float3 RayOrigin, float3 RayDirection, float3 SphereOrigin, float Radius) { float t1, t0; float3 L = SphereOrigin - RayOrigin; float tCA = dot(L, RayDirection); if (tCA < 0) return -1; float lenL = length(L); float D2 = (lenL*lenL) - (tCA*tCA); float Radius2 = (Radius*Radius); if (D2<=Radius2) { float tHC = sqrt(Radius2 - D2); t0 = tCA-tHC; t1 = tCA+tHC; } else return -1; return t1; } float RayleighPhaseFunction(float cosTheta) { return ((3/(16*PI))*(1+cosTheta*cosTheta)); } float OpticalDepth(float3 StartPosition, float3 EndPosition) { float3 Direction = normalize(EndPosition - StartPosition); float RayLength = RaySphereIntersection(StartPosition, Direction, float3(0, 0, 0), OutterRadius); float SampleLength = RayLength / Isteps; float3 tmpPos = StartPosition + 0.5 * SampleLength * Direction; float tmp; for (int i=0; i<Isteps; i++) { tmp += Density(length(tmpPos)-InnerRadius); tmpPos += SampleLength * Direction; } return tmp*SampleLength; } static float fExposure = -2; float3 HDR( float3 LDR) { return 1.0f - exp( fExposure * LDR ); } [numthreads(32, 32, 1)] //disptach 8, 8, 1 it's 256 by 256 image void ComputeSky(uint3 DTID : SV_DispatchThreadID) { float X = ((2 * DTID.x) / 255) - 1; float Y = 1 - ((2 * DTID.y) / 255); float r = sqrt(((X*X)+(Y*Y))); float Theta = r * (PI); float Phi = atan2(Y, X); static float3 Eye = float3(0, 10, 0); float ViewOD = 0, SunOD = 0, tmpDensity = 0; float3 Attenuation = 0, tmp = 0, Irgb = 0; //if (r<=1) { float3 ViewDir = normalize(float3(sin(Theta)*cos(Phi), cos(Theta),sin(Theta)*sin(Phi) )); float ViewRayLength = RaySphereIntersection(Eye, ViewDir, float3(0, 0, 0), OutterRadius); float SampleLength = ViewRayLength / Ksteps; //vSunDir = normalize(vSunDir); float cosTheta = dot(normalize(vSunDir), ViewDir); float3 tmpPos = Eye + 0.5 * SampleLength * ViewDir; for(int k=0; k<Ksteps; k++) { float SunRayLength = RaySphereIntersection(tmpPos, vSunDir, float3(0, 0, 0), OutterRadius); float3 TopAtmosphere = tmpPos + SunRayLength*vSunDir; ViewOD = OpticalDepth(Eye, tmpPos); SunOD = OpticalDepth(tmpPos, TopAtmosphere); tmpDensity = Density(length(tmpPos)-InnerRadius); Attenuation = exp(-RayleighCoeffs*(ViewOD+SunOD)); tmp += tmpDensity*Attenuation; tmpPos += SampleLength * ViewDir; } Irgb = RayleighCoeffs*RayleighPhaseFunction(cosTheta)*tmp*SampleLength; SkyColors[DTID.xy] = float4(Irgb, 1); } }  
    • By amadeus12
      I made my obj parser
      and It also calculate tagent space for normalmap.
      it seems calculation is wrong..
      any good suggestion for this?
      I can't upload my pics so I link my question.
      and I uploaded my code here

    • By Alessandro Pozzer
      Hi guys, 

      I dont know if this is the right section, but I did not know where to post this. 
      I am implementing a day night cycle on my game engine and I was wondering if there was a nice way to interpolate properly between warm colors, such as orange (sunset) and dark blue (night) color. I am using HSL format.
      Thank  you.
    • By thefoxbard
      I am aiming to learn Windows Forms with the purpose of creating some game-related tools, but since I know absolutely nothing about Windows Forms yet, I wonder:
      Is it possible to render a Direct3D 11 viewport inside a Windows Form Application? I see a lot of game editors that have a region of the window reserved for displaying and manipulating a 3D or 2D scene. That's what I am aiming for.
      Otherwise, would you suggest another library to create a GUI for game-related tools?
      I've found a tutorial here in gamedev that shows a solution:
      Though it's for D3D9, I'm not sure if it would work for D3D11?
  • Popular Now