Does choosing a glTF over an OBJ file format matter?

MTLLoader is never used Error message.

The Problem: My MTL textures will not load…

My MLT textures won’t load. I research known OBJ and MTL textures issues. I come across the glTF file format. I research a bunch because I didn’t want to change my file formats. I choose to change my file formats. I write up my findings, trying to save you a potential headache.

Learning new technologies starts with documentation and a little guesswork

I recently started exploring three.js and some of the first YouTube tutorials and blog posts I found, referred to OBJ and MTL file formats for importing 3D models. Many of those resources, while not inaccurate, turned out to be outdated and with deprecated code. Much of the newer learning resources encouraged readers to use the glTF file format but with little to no explanation of why given. For my first full three.js project, I choose to use OBJ files simply because the file extensions made more sense to me (OBJ= object, makes sense. glTF….not sure what that is?). Over the course of my project, I struggled consistently with my texture files and loading speeds. This is when I started researching the glTF file format. Below I discuss some of the differences between the OBJ and the glTF file formats and when to use each.

What is an OBJ file?

# OBJ file created by ply_to_obj.c. dodecahedron.png, a snapshot of the shape as displayed by OBJ_DISPLAY

The Wavefront 3D Object File (OBJ), developed by Wavefront Technologies, is a standard 3D image format that can be exported and opened. The file contains the coordinates, textures, faces and other object related information necessary to create a three-dimensional object. OBJ files support polygonal objects, which use points, lines and faces to define the model, as well as supporting free-form geometry, which use curves and surfaces. The OBJ file is often paired with one or more MLT files.

A Side note on the MTL companion file

The Material Template Library file format (MTL) is a companion file format for OBJ files. They are used to describe surface shading materials and properties (i.e. what the surface of the 3D model looks like — color, patterns, etc.). Just as an OBJ file may reference more than one MTL file, an individual MTL file may reference more than one texture. This allows multiple textures to be applied to a single object. MTL files are saved in plain text format, allowing for easy editing.

Why I wanted to use OBJ

The OBJ is a widely supported 3D model format, so widespread it may be considered a universal model format. One reason it is popular, is because it is simple. The file is text-based, therefore readable for humans, and easy to understand. Other pros of the OBJ file format include:

  • Enabling the storage of position, UV, and data that has different topology aiding in the creation of high quality models
  • Having a large user base and support system. Documentation is king, support is priceless.
  • Being open source, and a solid bridge format for converting files to other formats when you cannot convert between the two directly

But the OBJ has its issues

The simple file structure can lead to large sizes. The more complex the 3D model, the larger the file size and the greater the speed inefficiencies and longer load times. OBJ files also export entire scenes in one mesh, making it hard to modify elements or have animation. The OBJ file format was designed in the 1980s, and since the mid 1990s, it has not seen many been maintained or updated. This is a huge issue looking forward. Threekit.com, a 3D and augmented reality for commerce business, went so far as to say the OBJ file could be considered an, ‘orphaned technology with no significant future ahead of it.’ Like the OBJ format, the MTL file format is still widely used, but considered outdated and no longer fully supports newer technologies such as parallax and specular maps. So if the OBJ file is no longer the ideal format, what is the new go-to 3D file? Well, according to many coders and designers, it is Khronos’ glTF.

Moving forward with glTF

PNG versions of glTF file from Khronos’ homepage

While attempting to troubleshoot my MLT materials issue, I naturally went to three.js for their documentation. They recommended using the glTF format but noted other popular formats, including the OBJ format, were available and regularly maintained. hmm…When I read that, I though, great! OBJ is fine then, I just need to solve this bug. Now upon rereading it, I recognize their emphasis of ‘Where possible’ use glTF files. Because it took me awhile to let their message sink in, I will include their words here — in case mine are not convincing enough,

“Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras..” -three.js

So what is a glTF file?

Resource from Khronos homepage

The Graphics Language Transmission Form (glTF) is a standard file format for three-dimensional models and scenes. It supports 3D geometry, appearance, scene graph hierarchy, and animation. Made to be a streamlined format for displaying 3D assets while keeping file size and runtime processing small. The glTF format is well suited for augmented reality and virtual reality as it supports both motion and animation. glTF files can support realistic-looking scenes used in video games, web applications, and to create CGI videos. They can handle a lot.

The Khronos Group, developers and maintainers of the glTF file format, describe their format as the, “JPEG of 3D.” The format was first created in 2012, by the COLLASA working group. In 2012, Khronos presented a demo of glTF which was then called WebGT Transmissions Format. In 2015, glTF 1.0 was released. The second version, glTF 2.0, was released in 2017, and was highly modified from the first version. Thus, it is worth making sure when looking for information on glTF file formats, to keep to more recently published articles. I learned that lesson!

Improvements on the OBJ file format

Size comparison of 3D model file using GLTF and OBJ formats

Compared to the OBJ file format, the glTF format provides a greater set of features. In addition to vertices, normals, basic materials, and texture coordinates that the OBJ file format does support, the glTF also supports:

  • Hierarchical objects in the 3D scene structure
  • Scene information including light sources and cameras and an instance feature
  • Skeletal (joints) structure and morph animation
  • Greater variety and reliability of materials and shaders
  • Physically based renderings (PBR) as the standard for this format (The Metallic-Roughness Material model is supported by default while the Specular-Glossiness Material model can be supported with an extension)

The glTF format was designed to be able to download and display graphics with minimal hassle. While the OBJ format is easy to read, and therefore to edit, the glTF format is ideal for rendering. That means excess data is cut for smaller files and faster load speeds. The resulting file has much of its data stored in binary so it can be uploaded to the GPU (Graphics processing unit) with zero processing. This also makes it unreadable to humans, therefore not editable. The OBJ file format stores vertices as text and have to be parsed before processing. Easier to edit, slower to load. A final pro in selecting the glTF format over the OBJ, is it is well supported, documented, and has an extensibility for further development and maintenance.

Concluding Thoughts

The OBJ file format has its place in history and in current use. It may be the right selection for simpler 3D models or models without animations. I will probably use it again, but not for animation and probably not in my future three.js endeavors. Given my research and thoughts laid out above, it is safe to say I plan to lean on the glTF file format for my 3D models. But the most important thing I learned from this experience, was to take time to consider all the small choices I make in my code, because they can have large impacts.

Resources:

“A Study on the Performance Comparison of 3D File Formats on the Web” — a special note on this paper, it is very thorough! As an academic paper I did not feel it proper to include some of their tables at this time, but it is a paper comparing the glTF to various other formats, the OBJ included. If you would like a more in-depth dive into file formats and structures, I recommend visiting this site first.

glTF related links:

https://aframe.io/docs/1.2.0/components/gltf-model.html

https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html

https://stayrelevant.globant.com/en/gltf-behind-the-scene-of-3d-magic/

https://threejs.org/docs/#examples/en/loaders/GLTFLoader

https://en.wikipedia.org/wiki/GlTF#:~:text=glTF%20

https://www.marxentlabs.com/gltf-files/

https://fileinfo.com/extension/gltf

https://www.researchgate.net/publication/339954315_QMwebJS-An_Open_Source_Software_Tool_to_Visualize_and_Share_Time-Evolving_Three-Dimensional_Wavefunctions

OBJ related links:

https://fileinfo.com/extension/obj

https://www.reviversoft.com/file-extensions/obj

https://www.threekit.com/blog/obj-3d-file-format-when-should-you-use-it

https://www.marxentlabs.com/obj-files/

https://fileinfo.com/extension/mtl

Find me on LinkedIn here!

--

--

--

Software Engineer & Children’s illustrator living in Western Mass. https://www.linkedin.com/in/sofija-fia-sutton/ & www.fiasutton.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Siri Shortcuts — GIPHY meets Siri

How to fix plumbing or the product design method.

Improved Automatic Edge Detection Scanning for our Camera Scanner, ScannerLens

How some principles of Gestalt can help you create better interfaces

Building a boat from scratch

Homework 3

Flying New: The Story of Our New Visual Identity

Our 15 favorite accessibility tools and resources on the web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Fia Sutton

Fia Sutton

Software Engineer & Children’s illustrator living in Western Mass. https://www.linkedin.com/in/sofija-fia-sutton/ & www.fiasutton.com

More from Medium

How to make a self-hosted github-pages with CapRover, DigitalOcean and SSL

Querying Location Collection and Calculating Midpoint — Multiple Markers on Google Maps with Wix…

How to Remove HTML Tags <p> from your Data

What is PostCSS? And How to Use it?