Create a single texture from multiple textures at runtime

Help & Support
1

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
    });
    texture.setSource(runtimeTexture);

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?

2

You can do it this way: https://github.com/playcanvas/engine/blob/e1fc7bc3238dec62964b22b71f69af47549f6c41/src/scene/renderer/cookie-renderer.js#L40

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
3

Thank you!

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