# StandardMaterial rendering quality and image matching

**URL:** <https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138>\
**Category:** Questions\
**Created:** [February 3, 2021, 10:27pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138 "2021-02-03T22:27:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbase](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dbase/32/9431_2.png) [@dbase](https://forum.babylonjs.com/u/dbase)\
**Post date:** [February 3, 2021, 10:27pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/1 "2021-02-03T22:27:02Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/6996365081bc017a64f75a8fd94df5bae79e3995.jpeg)

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [February 3, 2021, 10:40pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/2 "2021-02-03T22:40:40Z")

</div>

Hey!  
can you try this:

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

```

---

<div class="post-metadata">

**Author:** ![dbase](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dbase/32/9431_2.png) [@dbase](https://forum.babylonjs.com/u/dbase)\
**Post date:** [February 3, 2021, 10:48pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/3 "2021-02-03T22:48:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dbase](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dbase/32/9431_2.png) [@dbase](https://forum.babylonjs.com/u/dbase)\
**Post date:** [February 3, 2021, 10:51pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/4 "2021-02-03T22:51:35Z")

</div>

![Screen Shot 2021-02-03 at 5.50.44 PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f7832b74618a5bd736d7162ff84e8d57cefd0adc.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 3, 2021, 11:02pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/6 "2021-02-03T23:02:24Z")

</div>

[https://playground.babylonjs.com/#NPULGT#1](https://playground.babylonjs.com/#NPULGT#1)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a1ebe78ea74c4d6771e331a2fc88c21d9c58382c.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 3, 2021, 11:02pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/7 "2021-02-03T23:02:47Z")

</div>

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

[https://playground.babylonjs.com/#DGMYMX](https://playground.babylonjs.com/#DGMYMX)

---

<div class="post-metadata">

**Author:** ![dbase](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dbase/32/9431_2.png) [@dbase](https://forum.babylonjs.com/u/dbase)\
**Post date:** [February 3, 2021, 11:12pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/8 "2021-02-03T23:12:08Z")

</div>

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](http://www.tinyurl.com/113at7n5)

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [February 3, 2021, 11:41pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/9 "2021-02-03T23:41:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dbase](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dbase/32/9431_2.png) [@dbase](https://forum.babylonjs.com/u/dbase)\
**Post date:** [February 3, 2021, 11:57pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/10 "2021-02-03T23:57:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [February 4, 2021, 5:25pm UTC](https://forum.babylonjs.com/t/standardmaterial-rendering-quality-and-image-matching/18138/11 "2021-02-04T17:25:41Z")

</div>

Well related to size please read this:  
[Size matters. The scene graph and all the tools and… | by Babylon.js | Medium](https://babylonjs.medium.com/size-matters-e0e94dad01a7)
