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:

ThreeJS

BabylonJS

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 {
  Scene,
  Engine,
  Vector3,
  Mesh,
  HemisphericLight,
  FreeCamera,
  SceneLoader,
  StandardMaterial,
  Texture,
} 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.CustomModel();

    this.engine.runRenderLoop((): void => {
      this.scene.render();
    });

    window.addEventListener("resize", (): void => {
      this.engine.resize();
    });
  }

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

    const hemi: HemisphericLight = new HemisphericLight(
      "Hemi Light",
      new Vector3(0, 10, 0),
      scene
    );
    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(
      "BakedMaterial",
      this.scene
    );

    bakedSceneMaterial.diffuseTexture = new Texture(
      "http://localhost:8080/3d/baked/baked.jpg",
      this.scene
    );

    SceneLoader.ImportMesh(
      "",
      "http://localhost:8080/3d/baked/",
      "portal.glb",
      this.scene,
      (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

2 Likes

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: