Lightmap error on cornell box example and TypeScript

Questions
1

I am trying the simple cornell box example. It works in the playground but the same has a weird lightmap error. I tried to do a simple blender glb export which has the same issue. Is there a issue with my code? (The playground example is JS, mine is TypeScript). I think this is the only difference. I am on 4.2.0-alpha.2. I tried with the standard release and I have the same issue.

import { Engine, Scene, SceneLoader, ArcRotateCamera, HemisphericLight, Vector3, Color3, MeshBuilder, Mesh, Texture, Material, Color4, DirectionalLight } from "babylonjs";
import 'babylonjs-loaders';

var canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
var engine = new Engine(canvas, true);

function assignLightmapOnMaterial(material, lightmap) {
    material.lightmapTexture = lightmap;
    material.lightmapTexture.coordinatesIndex = 1;
    material.useLightmapAsShadowmap = true;
}

function createScene(): Scene {
    var scene: Scene = new Scene(engine);
    scene.clearColor = new Color4(0, 0, 0, 1);
    var camera = new ArcRotateCamera("camera", Math.PI / 2, 1.6, 7.6, new Vector3(0,1.5,0), scene);
    camera.minZ = 0.01;
    camera.allowUpsideDown = false;
    camera.wheelPrecision = 150;
    camera.attachControl(canvas, true);
    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);

    // cornell box
    SceneLoader.ImportMesh(
        "",
        "https://models.babylonjs.com/CornellBox/",
        "cornellBox.glb",
        scene as any,
        function () {
            // renaming the default gltf "__root__"
            scene.getMeshByName("bloc.000").parent.name = "__cornell-root__";
            // material tweaking
            scene.materials.forEach(function(material: any){
                material.environmentIntensity = 1.4;
            });
            var light = scene.getMaterialByName("light.000") as any
            light.emissiveColor = Color3.White(); 
            var monkeyMtl = scene.getMaterialByName("suzanne.000") as any;
            monkeyMtl.metallic = .5;
            monkeyMtl.roughness = 0.5;

            // we have to cycles through objects to assign their lightmaps
            let lightmappedMeshes = ["bloc.000", "suzanne.000", "cornellBox.000"];
            lightmappedMeshes.forEach(function(mesh){
                let currentMesh: any = scene.getNodeByName(mesh);
                let currentMeshChildren = currentMesh.getChildren();
                // lightmap texture creation
                let currentLightmap = new Texture(
                    "https://models.babylonjs.com/CornellBox/" + currentMesh.name + ".lightmap.jpg",
                    scene);
                switch(currentMesh.getClassName()){
                    case "Mesh":
                        assignLightmapOnMaterial(currentMesh.material, currentLightmap);
                        break;
                    case "TransformNode": 
                        currentMeshChildren.forEach(function(mesh){
                            assignLightmapOnMaterial(mesh.material, currentLightmap);
                        });
                        break;  
                }
            });

            // all new meshes now receive shadows (shadowGenerator created below)
            scene.meshes.forEach(function(mesh){
                mesh.receiveShadows = true;
            });
    });

    return scene;
}

var scene: Scene = createScene();

engine.runRenderLoop(() => {
    scene.render();
});
2

Hi punkdified,

Welcome to Babylon! Can you provide a link to the Playground you’re talking about? I copy-pasted your code into a TypeScript Playground and it definitely looks off; is this the behavior you’ve been seeing?

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

If so, then it looks like the UV maps in your asset might be upside-down (indexing your textures from the bottom-left corner instead of the top-left, or vice versa). I tried going through all three textures in the Inspector and setting all their V-scales to -1, which appears to cause the scene to render correctly. Could this be the issue?

1 Like
3

This is exactly what I am seeing. Thanks for the response! Very much appreciated.