Textures appear darker than in Blender

I’m trying to recreate a scene I created in ThreeJS using the same assets. I have a 3d scene made in Blender that has baked out lighting and colors. It looks great in ThreeJS but I had to change the rendering output encoding to sRGB along with the texture encoding. I was trying to find something similar for Babylon but couldn’t find anything regarding this.

Here is a comparison of the ThreeJS version and BabylonJS version:



Is there something I need to change in Babylon to get it to look like the ThreeJS version? More specifically, make it look like how it should look.

Note that in the Babylon version I exported out the material with the texture assigned, where as in ThreeJS I created a new material and imported the texture and assigned it that way. When I tried to do the same in BabylonJS I got this:

Similar thing happened in ThreeJS but I had the use “flipY” to fix that issue, not sure how that’s done in BabylonJS either. I can create a playground if need be.

1 Like

Two cents for a possible solution. I remember that when I was doing my photogrammetry demo I had to play with unlit in the advance settings of the material.

I think it will be easier if you are able to setup a repro.

Yup the playground would be the best to troubleshoot here. My guess is that your inputs would already be in linear space for some reasons ?

Here is a playground that includes the 3d asset and the baked texture. https://playground.babylonjs.com/#JUKXQD#1615

Note that in this case I created the material in Babylon and added the texture as a lightmap texture. Hopefully, someone can also help me solve the issue as to why the texture isn’t following the UVs of the mesh. I don’t know how to fix that issue, so the texture appears tiled over the mesh.

This is what I have in my own project in Typescript:

import {
} from "@babylonjs/core";
import "@babylonjs/loaders";

export class BakedScene {
  scene: Scene;
  engine: Engine;
  canvas: HTMLCanvasElement;

  constructor(canvas: HTMLCanvasElement) {
    //casting HTMLElement to HTMLCanvasElement
    this.canvas = canvas;

    this.engine = new Engine(this.canvas, true);

    this.scene = this.CreateScene();


    this.engine.runRenderLoop((): void => {

    window.addEventListener("resize", (): void => {

  CreateScene(): Scene {
    const scene: Scene = new Scene(this.engine);
    const camera: FreeCamera = new FreeCamera(
      "Free Cam",
      // Vector3.Zero(),
      new Vector3(0, 1, -5),
    // camera.setTarget(Vector3.Zero());
    camera.attachControl(this.canvas, true);

    const hemi: HemisphericLight = new HemisphericLight(
      "Hemi Light",
      new Vector3(0, 10, 0),
    hemi.intensity = 0.5;

    const ground: Mesh = Mesh.CreateGround("Ground", 20, 20, 5, scene);
    ground.position = new Vector3(0, -0.25, 0);

    return scene;

  CustomModel(): void {
    const bakedSceneMaterial: StandardMaterial = new StandardMaterial(

    bakedSceneMaterial.diffuseTexture = new Texture(

      (meshes) => {
        console.log("meshes 0", meshes);

        const bakedScene = meshes[4];
        bakedScene.material = bakedSceneMaterial;

I’m not sure if I should be using that texture as a lightmap texture or a diffuse texture (or something else). Using it as a lightmap texture seems to help, but it’s hard to tell without the UVs being used properly.

The texture is flipped: https://playground.babylonjs.com/#JUKXQD#1616


Thank you! I had to do something similar in ThreeJS as I mentioned in my first post, I wasn’t sure where to find that setting to flip it. On a side note, is this a common thing? I just saved the texture from Blender, but I’m wondering why the need to flip it along the Y to get this to work? Marking the solution!

most of the time texture are inverted so we flip them by default but it is not the case with yours :slight_smile:

Ok so I tested this out in my own project and was able to replicate the ThreeJS look in Babylon, it was a bit simpler too:

1 Like

Glad it was simpler !!! :slight_smile: