StandardMaterial rendering quality and image matching

Questions
1

I’m having a bit of trouble matching rendering quality of a StandardMaterial in my project. Our application depends on quality of images so the accuracy of the colours of a texture matter quite a bit.

Screen Shot 2021-02-03 at 5.18.33 PM
Screen Shot 2021-02-03 at 5.18.33 PM2422×1282 345 KB

In this image the left side is a Babylon scene with an image on a plain. The same image of the sax player on the right is the original image outside of the application. Notice that the Babylon version’s whites and over all colour seems muted?

When I’m defining the material this is how it’s being set:

const material = new StandardMaterial("AM", this._scene);
material.emissiveColor = Color3.White();
material.diffuseTexture = await this.loadTexture(url, url);

Nothing too complicated or difficult. I imagine that the emissiveColor and diffuseTexure would change but I really don’t know what material options would be best to get the same quality (or as close as possible) to the original.

I’ve experimenting with ambientTexture (and setting the scene ambient color). I’m not knowledgeable enough about 3D space lighting to ensure I’m getting a proper and accurate rendering.

Your input is greatly appreciated.

2

Hey!
can you try this:

const material = new StandardMaterial("AM", this._scene);
material.disableLighting = true;
material.emissiveTexture= await this.loadTexture(url, url);
3

Didn’t really make much difference. All my lighting is targeted at specific meshes so there’s nothing artificially being set. So doesn’t seem like disableLighting is doing much at all.

4

Screen Shot 2021-02-03 at 5.50.44 PM
Screen Shot 2021-02-03 at 5.50.44 PM1690×2530 198 KB

Here’s a test image with a perfectly white background. When I pull that in it turns gray, so this would be a good test/sample to work against.

6

https://playground.babylonjs.com/#NPULGT#1

image
image964×965 180 KB

Seems sharp to me, try turning of your mips on the texture maybe.

7

With the code from @Deltakosh the white is full white:

https://playground.babylonjs.com/#DGMYMX

8

Thanks everyone. I think the emissive setting helped and I traced a couple other face color values that shouldn’t have been there. It seems much better now but not perfect. Oh well!

Truly appreciate the help. By the way we launched our application recently. Fully Babylon powered. Have a look: www.tinyurl.com/113at7n5

Select an artwork then customize a whole bunch of settings. =)

2 Likes
9

This is cool!
if you can manage to get a repro in the PG we can help further

10

Thanks! I think this will suffice for now. We got a handle on the textures with your help!

We have a new version that lets you rotate/pan and explore the custom canvas. As well as a version where you can upload a custom photo. It’s currently deployed for that client but it’s actually a white-label product.

Our next big problem is tackling bundle size. It would be SO good if there was a way to reduce Babylon’s footprint. We’re at a hefty 1.1mb gzipped and that’s enormous. Would be so helpful for applications like ours to reduce that. Even with tree-shaking and compression it’s a big one.

1 Like
11

Well related to size please read this:
Size matters. The scene graph and all the tools and… | by Babylon.js | Medium