How to change textures of an imported mesh of an imported mesh on click

Questions
1

So i’m trying to update the texels on click by the user. I know i can get the bu and bv coordinates from the pointerInfo. But i can’t figure out how do i place a new texel at that point in the texture. Ideally i would like to insert a image in the texture at that point.

2

To change textures of an imported mesh on click, you’ll need to implement a click event handler that detects interactions with the mesh. Upon click, you can programmatically switch the texture by accessing the material or shader associated with the mesh and updating the texture property. Make sure you have multiple textures available and cycle through them with each click. Refer to your platform’s documentation for specific implementation details.

1 Like
3

How do I access the shader programmatically. Also I do not want to replace the texture with another texture, I just want to update some region (small square shaped region) of the texture.

4

Wanted to get this to work myself. Couldnt find docs on Texture.getInternalTexture(). So I ended up converting the regular texture (ie Texture class) to a RawTexture. Like this

const buffer = await regularTexture.readPixels();     //raw RGBs <--- here!
//e.g.
    const [r,g,b,a] = this.getColorIndicesForCoord(x,y, width);
    buffer[r] = Math.floor( desiredCol.r * 255 );
    buffer[g] = Math.floor( desiredCol.g * 255 );
    buffer[b] = Math.floor( desiredCol.b * 255 );  

const format = BABYLON.Engine.TEXTUREFORMAT_RGBA;
const updatableTexture = new BABYLON.RawTexture(buffer, width, height, format);
//etc

Or use a DynamicTexture. Might make it easier copying sprites into it via the canvas context.

See also

1 Like
5

Thank You @Joe_Kerr. Using Dynamic Textures worked for my purpose :smiley: