Beginner's Tutorial on glTF in Augmented Reality

After a two year hiatus from experimenting with AR, I am getting back into it and just discovered what I am calling WebAR… the ability to load augmented reality objects through the web without having to create stand-alone apps. The catalyst for this is the tutorial created by Nicolo Carpignoli with Chialab.

While it easy replicated his first example of the Magnemite object, I could not get this 2nd tutorial to work; I am guessing because I don’t know how to properly create the necessary scene.gltf files for the other two objects. Cut and pasting the raw Github code into a text editor apparently isn’t how this works.

I have worked with Unity and Blender in the past, but how to either properly format or convert glTF into the format that Nicolo created in his tutorial is currently a mystery to me. So, I am looking for guidance on what’s next. How do I (1) create a properly formatted glTF file out of the raw files on Github and (2) how do I adapt other 3D file formats like FBX, OBJ, etc. to GLTF for augmented reality presentations?

If Nicolo’s tutorial is using some custom format then probably only Nicolo can answer about how to convert to/from that format. But standards like WebXR (the modern basis for VR and AR on the web) can work with any file format, and popular WebGL- and WebGPU-based libraries all support glTF.

create a properly formatted glTF file out of the raw files on Github

Impossible to say without knowing what’s in these ‘raw files’… code? models? mysterious binary data?

how do I adapt other 3D file formats like FBX, OBJ, etc. to GLTF for augmented reality presentations?

Typically people will choose a particular library (three.js, babylon.js, modelviewer, etc.) first, and then that library will have guidelines for loading models. I’m not sure what the tutorials you mention would use, or if they’re current. In any case you can find a bunch of three.js AR and VR examples here if you have a supported device: three.js examples … lots of other examples for loading models. If you’ve chosen a library / framework, the forums for that library may be able to help further with the details.

1 Like