I use albedoColor as background color.
I find out the albedoTexture (an image) will blend with albedoColor and the image color will faint a little bit.
In extreme cases: when the albedoColor is
1, plain black, the albedoTexture wont’ show up at all.
2, plain white, the albedoTexture shows up with image colors intact.
What I expected is the image will just be “over” the background color. they don’t blend at all.
I tried with alphaMode = 0, and even with other modes, they didn’t work at all.
this is the expected behavior , albedo color acts as a tint for the albedo texture , when you have a texture.
If you dont want any tinting, just make the albedo color pure white when using a texture.
yep, I think so. it’s designed in this way.
just wonder if there is a way to make a colorful background but won’t blend with texture?
I’ll try to create a miminal playground.
First of all, there’s always a way. Given the tons of properties and all the channels you have in a PBR material, there’s a lot you can play with, twist and tweak and disrupt
But then, you can’t go against the laws (of physics or design). When you say ‘background’, there’s no background in your texture that’s just opaque. One would first need to determine what the ‘background’ is and how it blends with the ‘foreground’. EZ enough you could edit the image, create a mask around the foreground and set the ‘background’ to whatever transparency level. That’s the old school way to do it. As said, tons of other possibilities but yes, before wanting to set different between ‘background’ and ‘foreground’…obviously, you first need to define (or detect) what those are
I think I should give up on this. 3d is not my field.
I’ll do the background thing outside babylonjs.
a canvas filled with expected background color, add new images to the canvas, then use the canvas as htmlelementtexture.
May be misunderstanding here. This is not just a 3D thing. It’s the same with 2D (except for the properties you can add to a PBR material). If you do it in 2D you can easily get the same in 3D. May be you should just share a screenshot/mock-up of what you are trying to achieve?…
the front side (the cat image) can be customized with user’s image. but the background must be pink color.
the background color is easily done in canvas but our business is sorta complex, so I’m trying to achieve the background color thing in babylonjs.
thanks, that clarifies it (sort of). I would have one more question:
Does the color of the bag (‘the background’) slightly ‘tint’ the cat image? I suppose so. Looks like you are trying to create a plateform that let’s you personalize items (and then, deliver the real thing, is it?) So, this would be printed on the bag using whatever printing technique… and if so, the roughness of the texture and eventually part of the coloring of the item would blend through? Am I delirious or close to what it is?
the real product has slight color difference with canvas texture.
it’s not just slightly “tint” with babylonjs albedoColor and albedoTexture.
we have a plain black variant for the pink box I attached in the previous reply, if I set the albedoColor to black then the albedoTexture wont’ show up at all.
just looking for a blend mode just like the default canvas globalComposite: source-over
So, you are actually doing the real product? And when you say ‘canvas’ you are refering to this thingy that makes you think you can create proper design and html sites in two clicks is it?
Ok, well, first things first: this blending method of source over is never going to make for a proper simulation of ‘the real thing’. Not even close.
Before speaking ‘design’ and then, YES, you can totally create this ‘design’ in BJS… but before that, we need to speak business.
Fact is the consumer wants to be delivered the promise. You don’t want your customers to return their product and complain on social media because what they have ordered in the site does not match the delivered product. For example, depending on the technique used for printing, there will be a certain coverage on the product. Typically printing black on a tinted surface, with a coverage of all inks making a total of more than 300% will have little impact on the black color. Though, even at 330% coverage the black color printed on say blue or orange background will still be different (slightly different). It will become either a ‘cold’ or a ‘warm’ rich black color. And then, the lower the coverage, the more the background will blend through. At the extreme, printing white on a black surface will likely never be white and requires multiple passes.
With that said, on the side of design in BJS, you have a number of options. You could use decals or a node material and (for the very simple approach) you could simply overlay and parent a printable area to your product (bag) mesh. On the side of the texture for this overlay/customized texture, you will probably want to at least add the ‘normal’ that comes from the roughness of the product. The blending mode you would do through the alpha (basically). But then, again, if you want to get as close as possible to the real thing, it won’t be just the .alpha. In this case, a PBR material would give you the flexibility to account the properties of your product material.
Ok, might sound complex but once it’s created for a product line (type of material), all you would have to do is change the color. Just not sure how far you are willing to push this.
Else, if you give me a PG with the model of the bag, I could reproduce this picture overlay/blending in a matter of minutes. But that would be cheating, wouldn’t it?
Hey man, really thanks for your input. Actually, we’ve used babylonjs and html canvas for such business (clothing, shoes, bags and so on) for some years. we have 400+ products by now…
but I’m still a noob for web 3d even though the product designer is implemented by me… it’s all basic staff for babylonjs, no node material and decal and other advance features.
I’ll take a look and see what I can do.
Really appreciate your help! that’s why I choose babylonjs over other 3d framework/library in the first place.
As said, if you could already set-up a PG with an example (even buggy) it would help a lot.
And then, thanks for your kind words (about me and the Community). You are very welcome
Meanwhile, have a great day
ok looking at the bag image you posted now , I presume when you say “background” , you mean the color of the bag. Anyway just let the image use a different unique material. Then you can change the bag color to whatever you want and it wont affect the image.
I forgot to answer and say thanks in that topic after “solving” my problem. Comment from @PatrickRyan is good description.
I actually even managed to make it work with custom shader:
At first glance, I think you would need a custom shader using a node material which uses an alpha channel in your albedoTexture to determine where the albedoTexture shows and where the albedoColor shows in your material. This is a simple lerp of the albedoTexture and the albedoColor using the alpha mask as the gradient. This output is then passed into the base color input of the PBRRoughnessMetallic node in the node material editor (NME).
So from my small experience in PBR rendering you most likely don’t want to have both specific albedo color and albedo texture unless you really know what you’re doing.
In my case we did workaround by having separate material with albedo color, and separate material on different mesh “on top” of it with texture. In that way I could change color and texture separately and everything automatically renders nicely.
Fun thing is my case was very similar to yours, I was rendering a cup with user design on top So in your case you could do something similar, by having 2 meshes/materials instead one. This will make everything much simpler in this case.
So in your case you could do something similar, by having 2 meshes/materials instead one. This will make everything much simpler in this case.