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

Help & Support
1

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.

Charles

2

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

3

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.

4

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: https://playcanvas.com/editor/scene/404993

5

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.

Charles

6

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.

7

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.

8

Hi,
I’m almost there, the rest is adjust effect and position.
My test project:
https://playcanvas.com/editor/scene/614427
Thanks a lot.

9

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);
            
            mesh.setParameter('texture_diffuseMapTransform', transformB.data);
            mesh.setParameter('texture_emissiveMapTransform', transformB.data);
        }
10

Thank you, I’ll try that.