Apply UV coordinates and lightmaps baked from Blender to Mesh

Questions
1

Hello,

I have a set up where I can create, edit and view shapes in ThreeJS. Once the user wants to view the final result, I export the shapes as GLB and import it in Blender to Bake the lightmaps for it.

In Blender I have written a script which firstly unwraps the glb file and then bakes the lightmaps for it. Here comes the main part, instead of using the exported model I save the UV coordinates of the model in JSON and export it, along with Lightmaps.

In ThreeJS, I apply the lightmaps generated of that mesh and I set 2nd UV channel for the lightmaps. I also dump my UV2 values from blender into the UV2 attribute of the mesh. Everything works till now, but the textures are not applied properly as you can see below. Can someone guide me through why this is happening and how to fix it.

image
image897×615 75.4 KB

2

Often in such cases texture.flipY = false works.
https://threejs.org/docs/#api/en/textures/Texture.flipY

3

I did try that but it didn’t resolve the issue

4

Out of curiosity have you tried reversing this array?

5

I tried it now and it did not work

6

Assuming both your shadowmap and your mesh are ok, I would start by checking what actual UV coordinates are being used/asigned for it.

Usually you can do that by:

  • temporally using a well-known UVMap (i.e. with a known pattern) or create your own like this, and do a visual inspection, or
  • leverage using the official utility ‘UVsDebug.js’ to display your 2nd UV set as a 2D map, and perform some UV checking (please see the official example for checking the 1st UV set)
2 Likes
7

Exporting the UVs separately from the mesh sounds like a fragile process – how are you exporting the rest of the mesh? Different formats have different UV conventions, vertex welding conventions, support for n-gons vs. triangles … all of this will cause the mapping of vertices to UVs to change.

One option would be to export to glTF from Blender. This way you can include the mesh and all of your UV sets together. Then use texture.flipY = false when applying the texture to the material.

8

Hello, I am just exporting the UV data and Lightmaps from Blender. This is because, I want to give the user a high visual render from the shapes (interior) they created at runtime. As I have the threejs scene set up with the custom data in scene hierarchy, I have no option to import the model from Blender on which the lightmaps were baked on.

I did implement this to check if my automated script is correct or not, and I could successfully see the effect of lightmaps.

Let’s say I just want to export the lightmaps and apply to my existing set up in threejs, what all factors/variables should I export from Blender’s end. My main goal is to apply the generated lightmaps properly.

9

Sorry, I don’t understand what it means to just export UV data from Blender. UVs are pairs of coordinates, with one pair per vertex. While you could imaginably export that as an array…

[u1, v1, u2, v2, u3, v3, ...]

… I don’t see how you would match up which vertex exported from Blender is which vertex in your mesh, if you are not also exporting the mesh from Blender. That’s where I believe the problem is, but without really knowing what you’re doing, I may have guessed wrong.

10

What I meant was, in blender I create a separate UV channel for the purpose of baking lightmap. I export this UV channel itself, and I do it while keeping the track of which UV array goes with which mesh. Later, in ThreeJS I save the UV array as 2nd channel of UV attribute of that same mesh. Below is an example of how the array looks.

"uv2": [
            0.8809522986412048,
            0.29100510478019714,
            0.8809523582458496,
            1.1589638970743721e-10,
            0.9107142686843872,
            2.7177655681498436e-09,
            0.9107142686843872,
            2.7177655681498436e-09,
            0.9107142090797424,
            0.29100510478019714,
            0.8809522986412048,
            0.29100510478019714
        ]

Okay, I had not considered this. I assumed that, as it is the same mesh I am working on, the vertex will be same too. I am not manipulating the mesh/model, just unwrapping it and baking lightmaps. Thus, I figured out that the vertex data should remain same. If it is wrong please let me know.

11

You haven’t described how the mesh came into existence, so i cannot say… If you’re exporting the rest of the mesh from Blender in exactly the same way you exported the UVs, that’s likely to be fine. If you’re bringing an existing mesh into Blender, then exporting the UVs and attaching them to the original mesh, I’d recommend trying to export a bit more than just the UVs from Blender, so you can sanity-check that the order and number of vertices has not changed.

EDIT: More generally, anything you can do to help us reproduce the problem (a demo, files, etc.) is likely to help reach an answer more quickly.

1 Like