Combining two image files into one texture

Questions
1

Hello!

I need to create a 2 side plane with a texture that is loaded from two separate jpeg files.
How can I combine these two?
Usually I would lode a single texture with

var mat = new BABYLON.StandardMaterial("", scene);
mat.diffuseTexture = new BABYLON.Texture("gargleblaster.jpg", scene);

Can this be done within the StandartMaterial class?

Thanks!

2

Hey!
you may need to just have two planes?

3

ah. ok.
I was basically following this pg:
https://www.babylonjs-playground.com/#LXZPJK#3
Which would be basically what i’d want to achieve.
Only with two different jpgs for the front and back

1 Like
4

In an image editing software combine the two images as happens with front and back of card https://i.imgur.com/ntIgFT6.jpg

5

Sure ;). Ok, Sorry wasnt clear:
the images will come from a cms and they will be in two different files,
so the merging would have to happen client side.
If BJS cannot handle that I just use some other JS and then pass the result ro BJS

6

The texture packer could handle this.

But so could just a custom canvas element script

7

I haven’t been diving deeper into the canvas element. only into frameworks like BJS, phaser et. al. so far.
How does BJS handle the image data? Does something like a rendertexture exist?

8

We should all know to listen to DK in the first place. This is the most straight forward method for separate image files.

1 Like
9

https://doc.babylonjs.com/how_to/how_to_use_rendertargettexture_and_multiple_passes

10

Thank you.
but it seems A rendertexture cannot be created from another texture. Only a mesh, etc?

11

well you can create custom procedural textures that could consume your texture: Use Procedural Textures - Babylon.js Documentation