Search code examples
directxhlsl

Append Textures using HLSL


I want to create a function that takes multiple textures and append them and tiles them next to each other. Example, if I had imgA, imgB, imgC I can get an texture like this:

A A B

C B B

B C A

Also image do not have to be the same size so I might get something like this:

AAB C

C B B

BAC C

Does anyone how I can do this in HLSL, what functions I should be looking at? Do you have any syntax example?

Thank you :)

EDIT: I am not quite satisfied with the answers yet, I will be exploring them more in depth, then coming back to this question


Solution

  • Running loops in HLSL pixel shaders is not the best idea. It's probably easier to stream the vertices corresponding to the desired tiled texture.

    First, you would want to create a texture atlas, i.e., a big texture which contains all the textures you want to compose. Then you render one quad (2 triangles) after another in the desired arrangement.

    • You can use n Draw calls: one quad at a time.

    • You can make one big vertex buffer with pre-computed or partially computed tile positions and use one Draw call.

    • Or you can do one DrawInstanced call. This is how tile-based maps are rendered in most games.


    If you don't want to create a texture atlas, you could pass each of the base textures to a separate sampler and then map the texture coordinates to the appropriate sampler. However, this adds branching to the pixel shader which is also going to cost performance.