How to render a piece of picture on specific position of model at running time?

For example, I have a picture 1024*1024, and model, uv 0~1.
How can I render part of texture(x=10,y=10,w=20,h=20) to uv(0.5,0.5) by coding?
Thanks a lot.


Can you provide a diagram example of what you are trying to do?

Thanks for your attention, I want to customize some characters, and render on model with bump effect.
So I made a diffuse picture and a normal picture both include 26 characters, and want to render part of them on model by coding.

Probably the easiest way to do this is to work out what the UV offsets and sizes are for each character on the texture is and create a material for each character using those offsets.

Then you can swap the materials on the model at runtime.

Here is an example with Will’s Flappy bird where he is using a single sprite sheet texture but multiple materials:

Hi yaustar
Thanks for your help, swap the materials is a good way, but there is an issue, I need combine the characters which user input to a string. Such as user input “L”, “O”, “V”, “E”, then I need display “LOVE” on model, so I think swap the materials can not meet this requirement. I need find another way.
Really thanks anyway.


To get this right, are you trying to render different parts of a texture on specific positions on a single model?

If so, it sounds like you would need to create a texture at runtime that the model uses and copy pixel data from your ‘source’ texture to the one created at runtime.

Yes, I created a texture at runtime, but no idea how to render different part on specific position.
Currently I’m trying to use canvas->context->drawImage(…), and set canvas as source of texture.

I’m almost there, the rest is adjust effect and position.
My test project:
Thanks a lot.

Here’s some code to do that. From what I remember, you need to make sure that the tiling in the original material isn’t 1 ( eg set it to 0.9999).

        var meshInstances = entity.model.meshInstances;
        for (var i = 0; i < meshInstances.length; i++) { 
            var mesh = meshInstances[i];
            var transformB = new pc.Vec4(tileU, tileV, offsetU, offsetV);

Thank you, I’ll try that.