Create a single texture from multiple textures at runtime

Hi there!

I guess my question can be reduced to: how to “add data” to a texture at a certain offset?

I am trying to create a single texture from multiple textures loaded at runtime using the pc.Texture API.

    let texture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
        magFilter: pc.FILTER_LINEAR,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE,
        mipmaps: true

But the API seems to allow only one source for the image… although I haven’t tried yet if this “replaces” data or adds new data.

The main idea here is being able to merge many textures into one, so that I can create a single material with that big texture (only diffuse channel is needed for now). Then I can apply that material to as many meshInstances I need at different offsets and tilings, and finally I can use batching for all those mesh instances.

Would this work?

You can do it this way:

and this is how I call it

and this is how the atlas is allocated

Basically, create a render target for the atlas texture, and render individual rectangles into it using drawQuadWithShader

1 Like

Thank you!

I’ll give this a try this weekend :grinning: