Scene quality doesn't match when exported - Compared to First Time Load Scene

webgl_loader_obj.html (20.0 KB)

I am modifying the above sample file and trying to create a scene. The scene that I am creating right now for testing has a template and two trees.

Here is the scene which I am creating:


When exported the output is:


there is nothing wrong with the object’s position, I have placed it differently. The only thing that worries me is the house has some parts missing in it.

Assets I am adding into the scene: (1.1 MB) (1.2 MB)

Can anyone please help me why is the scene appearing so differently when exported?

GLTF file which is getting generated:

When you call your exportGLTF(), it’s important to pass in a scene and not just an array of objects. This should at least solve the problems with the transformation. So do this in your code:

exportGLTF( scene );

However, the model of your house (ODL_2019_Set03) is not correctly exported by GLTFExporter. I’ve manually imported the OBJ/MTL + textures into the three.js editor, see screenshot:


However, when exporting to glTF, the resulting file is rendered like in your screenshot. So it seems it represents only a single part of the entire geometry. There might an issue with GLTFExporter in context of multi-material objects.

/ping @donmccurdy

scene.glb (570.0 KB)

If it looks differently before and after exporter through GLTFExporter let’s file a bug, I haven’t set up this full scene to reproduce the issue though, and that would be helpful unless we can reproduce it with plain primitive geometries (e.g. SphereBufferGeometry) and multiple materials.

Here is one approach that I am trying now to achieve the identical quality of the scene when creating the scene for the first time and then importing the saved scene (using GLTFExporter):

  • OBJ-MTL file, I am converting it into GLTF using obj2gltf convertor
  • Importing the converted asset into the scene
  • Loading the OBJ models of the attached tree
  • Exporting the scene using GLTFExporter

Here is the result that I have achieved so far:

When creating it for the first time:

When Importing the saved scene:

Converted GLTF file:
ODL_2019_Set03.gltf (1.1 MB)

As you can see the wall is extra bright plus the tree texture is not coming up properly once saved. So what can be the issue? I suspect this is an issue related to the GLTFExporter - not sure though.

One more suggestion I need is that if the issue is specific to GLTFExporter and will need time to be stabilized, what is the way to go forward if we can’t compromise on the quality of the created scene and exported scene - which format should I go for? What are the pros/cons of using JSON-format?

When you are loading gltf with textures (as opposed to .obj) you need to set the gamma level of the renderer (this will affect your overall lighting)

			this.renderer.gammaOutput = true;
			this.renderer.gammaFactor = 2.2;
See Textures section

Using JSON format is fine if you are not going to import the scene outside of three.js. Using a format like glTF will make you more flexible instead.

In any event, I have created an issue at github in order to solve the first problem of your post:

Thanks a lot, the quality actually improved. I still have one doubt though, suppose in a scene I am loading assets from different loaders - say some assets using GLTFLoader and some with OBJLoader - then how are we going to tell the renderer that output with gamma for glTF objects and without gamma for OBJ objects?

That does not work since the setting is global. You have to ensure on application level a correct color space management. That means you have to set the texture encoding of your OBJ assets manually to THREE.sRGBEncoding. Or you apply a change directly to the MTLLoader so diffuse, emissive and specular maps are sRGB encoded.

One more question -

OBJ-MTL file, I am converting it into GLTF using obj2gltf converter

Should I go with this approach as it gave me better results or is there any better way of doing it? Directly loading the OBJ-MTL file from OBJ-MTL loader and exported gave me bizarre results ( but when converted to glTF, GLTFExporter gave me better results.

So, what should I opt for?

I would convert the assets to glTF before loading. Eventually you want to load glTF anyway since it’s in many ways better than OBJ. More information about that topic right here:

I just want to notify you that the dev version of GLTFLoader has now a fix for you house model. So if you want to keep your OBJ to glTF workflow, please use the version from here:

I would also recommend going entirely gltf, check out the Draco compression option of obj2gltf and gltf-pipeline as the size savings are potentially enormous.

You need to include the Draco loader as part of your gltfloader setup but the benefits are huge if any of your models are high polygon.