I’ve been using PBR materials instead of standard even for basic colors because I can’t seem to get the colors to match. When exporting from Blender they come out as one shade in PBR, but a totally different shade if I use standard materials. I’m hoping to convert all of my materials to standard since I really just need flat colors.
Here’s a PG: Babylon.js Playground
Any ideas what I’m doing wrong?
Nothing is wrong, standard and PBR materials will render differently as they are not based on the same model (note however that you should convert the diffuse color to linear space in the PBR case - that still won’t give you the same display than in standard mode, though).
If you want flat colors you can disable lighting (mat2.disableLighting = true) and use an emissive color / texture.
I very much like the standard material. It has a lot to offer. At first ,when PBR kicked-in, I wanted to go PBR all the way. But then, I eventually went back to the standard material (even for things like glass or rough/mat metallic material (depending on design type). The standard material of BJS is (in my opinion) the equivalent of the defaultRenderingPipeline: Very reliable and polished, easy to use and versatile.
But then, yes, for the reasons stated above, changing your PBR materials to standard (or the other way round) will require some work (adjustment/fine-tuning). Not to mention the adjustments needed if you eventually applied post-processing to your scene. I’d say if you choose one, you’re safer sticking with it.
So essentially there is no way to make the colors match?
If I can’t match the colors, is there a way to at least export the materials as standard materials from Blender instead of PBR?
Also, is there a big enough performance advantage to use standard materials over PBR throughout my scene? I’m essentially wanting to boil my entire scene down to as few materials as possible, and then ideally have each material be as optimal as possible. From what I’ve seen, PBR materials are more expensive, so I’m wondering if over ~100 draw calls it would be worth using standard instead. All of the materials are basic colors.
Thanks in advance for the help!
There’s no way they will match under all lighting conditions (or under any conditions really) as the entire shaders are different. If you need colors to match the materials should use the same shading approaches (and parameters).
As @Evgeni_Popov said, you should at least convert PBR colors and textures to linear space:
mat1.albedoColor = new BABYLON.Color3(0.3916, 0.3916, 0.3916).toLinearSpace();
With that it looks a little closer, but definitely not perfect: https://playground.babylonjs.com/#W97RR2#3
Gotcha, I was hoping to get the standard material to match the color of the PBR material, that way the scene could be all standard materials.
Looks like I will have to go through and manually replace every material after it’s imported from Blender, and find standard material colors that are close in color.
Do you know if standard materials are significantly more performant than PBR, to make this process worth the extra work?
I don’t know. I believe it depends on the settings of the material (different settings lead to different shaders being generated). In general I think that PBR shading is per-se more expensive.
If you are not fill-rate limited (eg. you don’t have a lot of overdraw or too complicated shaders) I think you wouldn’t notice in todays modern hardware. You may notice on mobile, where fill rates are usually more of a problem, or in lower end graphic cards with less powerful shading capabilities.
Again imho, If you are fill-rate limited, then you’d notice a FPS increase by avoiding PBR materials, but then you should first try to avoid overdraw. If your target is mobile, you may wish to avoid PBR, HDR and postprocessing entirely. Your game runs at 60fps on my hardware but I have a reasonably decent gear
But it’d be nice to hear opinions from more exprienced people. I’m kind of in the same situation myself.
Yeah that’s what I figured. The game runs well for decent PCs but I am trying to cater to mobile and specifically Chromebooks which are terrible and run the game at like 20fps.
Thanks for the insight!
Just in case: make sure that the 20fps is due to shading, and not JS calculations. Check the inter-frame time in those lower end devices. It may be a combination of both.
Also, phones have a high pixel density. I wonder if we could scale the viewport for those (eg x2), as that would reduce fillrate needs by four and my app just needs to “show” on mobile (doesn’t need to look good).
So, as a side note, I have just tried this. It’s not actually different from rescaling the browser window but I might apply this on mobile since currently I am very fill rate limited:
//console.debug("Resizing scene: " + width + " " + height);
el.style.height = parseInt(height / sceneViewportRescale) + "px";
el.style.width = parseInt(width / sceneViewportRescale) + "px";
el.width = parseInt(width / sceneViewportRescale);
el.height = parseInt(height / sceneViewportRescale);
engine.resize(true);
el.style.height = (height) + "px";
el.style.width = (width) + "px";
//el.width = width; // Do not use, prevents canvas rescaling
//el.height = height; // Do not use, prevents canvas rescaling
Setting sceneViewportRescale to something like 8 will make the image very blurry but will stress the difference on mobile. I might apply 2 to some phones. Note however that this messes with mouse coordinates (eg for picking).
You can also try engine.setHardwareScalingLevel(2) (or any value > 1) to do the same thing.
Hi,
Correct shade is all about correct lighting. You have to set correct lighting on your final scene incl. ibl to make PBR looks good. The difference come from that fact that the PBR uses different light attenuation approach, which is more correct I think.
I used side-by-side image comparison to fine tune lights so PBR scene looks like my source Java3D scene with standard materials. The result is acceptable. Just use mat.unlit = true to compare with original color when tuning lights.
The only downside with PBR materials is their roughness, which can make some tint in the color. But this issue affects in most cases only very dark and de-saturated materials (yes - the shades of particular color).
