Issue while trying to apply two logos to same plane with standard material

Im not sure, what is wrong, this is the screenshot!

backWall.material = new BABYLON.StandardMaterial(“backWallIdentpro”, scene);
backWall.material.diffuseTexture = new BABYLON.Texture(“/textures/identpro1ps.jpg”, scene);
backWall.material = new BABYLON.StandardMaterial(“backWallbekuplas”, scene);
backWall.material.diffuseTexture = new BABYLON.Texture(“/textures/bekuplas.jpg”, scene);

@mawa could you help :sweat_smile:

Well, first, you cannot create two materials for a same object (except for assigning it to a front or backface or a selection of vertices). In your case, the second material assigned will simply overwrite the first one.
And then the reason why you see no texture at all is likely because your link is incorrect.
Open the debugger and check for errors loading the texture.
Else, send me a picture of how you want to have your two logos on your plane and I’ll try quickly set-up a PG for you…

3 Likes

thank you for your help, :slight_smile: so i think i will have to edit two logos into one picture as you said yesterday and then render it to the material. this should be the way, am i correcT?

Actually, there’s another trick I use for this kind of thing (like adding a sticker or a decal to a mesh).
It’s very simple and has no impact on performance but is easier to edit.
All I do is create another plane or duplicate/clone or instance of the mesh and offset it just the tini-mini. Next I use this plane (or mesh) to show my logo or decal in PNG.
If you check-out my ‘BSA Bantam motorcycle demo’, and focus on the logos on the tank and battery box, this is how I did. The good thing here is that you can resize and clone or instanciate your logo the way you want without affecting the wall.

1 Like

can you check this pg, i tried to use the material in cloned plane, but somethings not working it seems

Wow, your project looks so great :slight_smile:

Thanks. I’m gonna fix your PG but I can already tell you the error you did here.
By doing what you did, you actually instructed to use the same material for ‘writingplane’ than the one you are using to create your dynamic texture. It is overwritten once you assign your dynamicTexture to it.
The assembly you want here is a 3 parts assembly with:

  1. The wall with its wall structure, material and texture
  2. The logo, slightly offset from the wall
  3. The dynamicTexture, slightly offset from both the wall AND logo(s).

what i was trying to do within the pg was to apply the grass texture into the cloning plane.

i guess i got your point :slight_smile:

You will even get it better with this revised PG (Hopefully :wink:

1 Like

sure, thank you for your time :slight_smile: let me check

No worries. Happy if I can help. Notice that with this you can now rescale and position your logo the way you want and even create a wall of logos by simply instanciating the logo plane (with just about no impact on performance).

yes thank you so much, i understood. can i know what was your pathway to babylon! im learning from docs, but i guess im still struggling

Same as you, I believe. Struggling, fail, try and try again. Watched a few videos. Used the docs (very well done I have to say), relied on the forum and soaked-up all I could from the knowledge of others. It’s been 2 years and a half now, so all I can say is, keep with this energy and never give up :smile:

1 Like

sure i hope to, thank you again for your time :slight_smile:

Hi @mawa Just a small issue, i tried to play it around a bit and found the flickering thing when we try to move the plane with a mouse click. Could you let me know what is the real issue with this?

Hi,
It comes from the size/resolution that is huge (I believe to accomodate the dynamic texture) where texts should be just tiny-mini if I recall correctly your project. So you have to change the values for accounting the 600 size plane. Instead of an offset of just 0.1 use a value of 1. And removing the backFaceCulling from the wall and dynamicTexture materials also helps.

1 Like

@mawa Im not sure why im not able to make it correct, i have a pg with the real time logos. whatever combination i tried qith the z position, im nit able to make it correct. also what are the ways to position these logos?rather than positioning the plane itself.

OK, first things first. Your logo in order to show correctly (with transparency around the logo) needs to be a transparent PNG.
Next, you made your plane even bigger. It’s now 4600x3200 (which btw is absolutely huge). So when you offset your logo plane, you need to account this size. Where the value of 1 for the offset would work fine with a plane of 600, you now need to make this value about 4 to 5 times bigger.

Well, the best is precisely to position and scale the plane at first. Next, within the plane, you can make adjustements of the logo position and scale using the values of Offset and Scale on the logo material (commented in this PG).

I would suggest you make your PNGs for the logos (one for each logo) leaving all around the logo, on all side about half the size of transparent background. This will give you enough latitude to scale and position the logo within the plane.

Edit: Here is an example with an .svg logo. You can use either transparent png or svg for the logo in your diffuseTexture. The advantage of using an .svg logo (from a vectorized image) is that you can scale it whatever size without loosing resolution. It will always show perfect and crisp.

Edit1: And before you ask :wink: There’s this other thing that is really cool with this technique. You can apply an alpha to your logo material to help blend it with your wall (make it look like it’s painted on the wall). The effect of painted on wall can even be further improved (with a normal/bump texture of the wall on the logo material and/or with an emissive texture using the texture of the wall material)

2 Likes