Shader Showcase Saturday #7: Billboard Impostors

Some of the readers might have heard of a game called Duke Nukem 3D. Released in 1996, it was one of the first 3D games I had the chance to play. An interesting feature of that game is that most of the interactive elements (including the enemies) were not actually 3D. They were 2D sprites rendered on quads which are always facing the camera (below).

This technique is called billboarding, and early 3D games were using it extensively. Even today it is still used for some background details, such as trees in a forest far away. For instance, one of them is Massive Vegetation, which uses billboarding to render grass blades in a very realistic way.

Billboarding works really well, but it cannot be used on all objects. It is perfect for objects that look similar from all angles (like tree and grass), but yield poor results for more complex geometry. A solution to this is to rely on billboard impostors (sometimes also spelt imposters). At the core, billboard impostors are still quads that are always facing the camera. However, the image they show changes based on the viewing angle. This is possible by having a spritesheet containing renderings of how the 3D object looks like when viewed from different angles.

When used properly, billboard impostors are exceptionally effective. The image below shows a mechanical piece seen from many different angles. All those models are impostors, as it can be seen by the fact that they are rendered on 2D quads.

The image above comes from IMP, a billboard impostor baker created by xra, developer of Memory of a Broken Dimension. The term baking refers to the process of creating the spreadsheet that is used to render the 3D model from different angles.

If the idea of reducing hundreds of thousands of triangles to just a few dozens appeals you, then I strongly advise having a look at Amplify Impostors [BETA]. Amplify Creations is well-known for the quality of its assets, and this is not an exception. Amplify Impostors [BETA] is possibly the most advanced asset to bake billboard impostors from your assets, and comes with a large variety of options. Also, it comes with support for both LWRP and HDRP, the new rendering pipelines used by Unity.

If, instead, you are curious to learn more about this technique, this is how impostors are baked. First, many screenshots of the model need to be taken from different angles. The more screenshots, the better the result. Distributing angles correctly is crucial for this process, and is far from being trivial. A common technique is to place the model inside an invisible spherical mesh, then taking a screenshot from each vertex of that sphere. Increasing or decreasing the number of vertices on that sphere has a direct effect on the number of screenshots and, consequently, on the final precision. In the image below (from Tech Tuesday 11), you can see a tree surrounded by cameras, each placed on the vertex of a hemi-dodecahedron (which is half of a regular dodechaedron).

The results of this effect can be seen in this GIF from Technical Artist Jonathan Cioletti.

While the result is not perfect, it allowed Jon to move from 6004 triangles to just 2. Impostors work very well for distance objects, since they do not deform appropriately based on the field of view.

If you simply swap images from a spritesheet, your object will not react smoothly to camera movements. This is because there are only a finite number of images that can be used. A more advanced approach is to blend the closest three images together, to ensure a smooth transition at any point. This is discussed in great details in Octahedral Impostors, by Principal Technical Artist, at Epic Games Ryan Brucks.

Another great asset that uses a blending technique is Imposter System. One of its great advantages is that, compared to many other packages, it works very well in VR. This is not always the case, since rendering the same impostor from two different cameras can result in unpleasant artefacts.

From The Asset Store…

Comments

10 responses to “Shader Showcase Saturday #7: Billboard Impostors”

  1. Michael avatar

    What about recreating the effect seen in Spooky’s house of jumpscares dollhouse dlc, (https://youtu.be/q7x8QrQ8y2s?t=108 link to what I’m talking here, pay attention to the doll that the player walks around).

    This technique seems like a good way to do this but I was wondering what your thoughts are and how you would approach this?

  2. Great articles, thank you!
    Though would it be possible to talk more about the performance/memory involved? The use of impostors surely reduce the numbers of triangles but the gain in texture amount can have a non negligible impact on memory no? Furthermore, are there techniques to compress the textures given by the screenshots? (Since they might be correlated in some way I suppose?)

    1. Hi Nemix.

      It is hard to talk about these aspects without referring to a specific implementation.
      Depending on how impostors are implemented, their performance can change wildly. But that’s ok, because it really depends on the level of accuracy you need. For very distance trees, is definitely a good solution. For very close objects, it might be too expensive if you need a high level of details.

      In regards to the compression technique, I am sure there is a lot that can be done by storing texture differences, perhaps. But have not seen anyone talking about that yet!

      1. I see, thank you for your reply!

  3. Could you also elaborate on how to swap the sprites based on the viewing angle?

    1. I’d suggest having a look at this article, which does a great job at answering the question!
      https://shaderbits.com/blog/octahedral-impostors/

  4. Patrick Hogenboom avatar
    Patrick Hogenboom

    I have a question regarding the impostor creation phase.
    I think you’d have to frame the object in a predictable way, so that at runtime you don’t see popping when switching between poly model and imposter.
    How do you position the camera and set the frustum so that the object is perfectly/predictably framed ?

    1. I believe impostors are mostly used on their own.
      I have not seen (as far as I know!) LOD techniques which mix 3D models and impostors.

  5. How the imposter images gain an alpha from a process that doesn’t seem to render transparently?

    1. If you render an object in Unity, you can decide the colour of the background.
      So you can use that to get transparent images!
      Have a look at IMP (linked in the article) and you can see how they are doing it!

Leave a Reply

Your email address will not be published. Required fields are marked *