# Lightmap error on cornell box example and TypeScript

**URL:** <https://forum.babylonjs.com/t/lightmap-error-on-cornell-box-example-and-typescript/9351>\
**Category:** Questions\
**Created:** [March 20, 2020, 10:18pm UTC](https://forum.babylonjs.com/t/lightmap-error-on-cornell-box-example-and-typescript/9351 "2020-03-20T22:18:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![punkdified](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@punkdified](https://forum.babylonjs.com/u/punkdified)\
**Post date:** [March 20, 2020, 10:18pm UTC](https://forum.babylonjs.com/t/lightmap-error-on-cornell-box-example-and-typescript/9351/1 "2020-03-20T22:18:32Z")

</div>

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.

```auto
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();
});

```

---

<div class="post-metadata">

**Author:** ![syntheticmagus](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/syntheticmagus/32/395_2.png) [@syntheticmagus](https://forum.babylonjs.com/u/syntheticmagus)\
**Post date:** [March 20, 2020, 11:23pm UTC](https://forum.babylonjs.com/t/lightmap-error-on-cornell-box-example-and-typescript/9351/2 "2020-03-20T23:23:36Z")

</div>

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](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?

---

<div class="post-metadata">

**Author:** ![punkdified](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@punkdified](https://forum.babylonjs.com/u/punkdified)\
**Post date:** [March 20, 2020, 11:42pm UTC](https://forum.babylonjs.com/t/lightmap-error-on-cornell-box-example-and-typescript/9351/3 "2020-03-20T23:42:26Z")

</div>

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