Facebook has been creating a lot of innovative content lately.
From immersive panoramic posts, live video feeds and the Facebook Game Room there’s a lot of different technologies that one can look into, with sometimes some great explanations (i.e. the Thundering Herd Problem) offered by the teams at Facebook themselves!
A feature that particularly interested me are the recently announced 3D Posts. Not only because they are in 3D, but also because there’s a potential to bring a lot of technologies together in order to create content.
3D posts are essentially 3D models displayed on your newsfeed which you can rotate, as can be seen below:
glTF and 3D Posts
It turns out that Facebook’s 3D posts use the glTF 2.0 format. This is a format that the Khronos Group (OpenGL, Vulkan) introduced not too long ago for WebGL and they’ve iterated on since its inception.
Naturally, this looked like a good opportunity to learn about the glTF ecosystem, while also getting some results by creating some content that I could publish on Facebook!
Initial Investigation
I first downloaded the glTF-Sample-Models repo that the Khronos Group released (a mere 500MB zip file!)
The 2.0 folder is of particular interest in this repo, and the models they have there have been exported in the following formats:
- glTF-Binary
- glTF-Draco
- glTF-Embedded
- glTF-pbrSpecularGlossiness
- glTF
After a few failed attempts at uploading some glTF files to my Facebook status update, I managed to create a post using the glTF-Binary format.
Dragging the glTF-Binary file to your status update works best, and you can get a preview for it where you get a chance to edit the background color too:
The next thing I wanted to try out was to see if I could take an existing 3D model and convert it to something that Facebook could use.
FBX2glTF converter
Fortunately, Facebook has recently added a FBX2glTF converter on their github page!
- FBX2glTF on GitHub
Building it was relatively simple if you have:
Once you’ve gone through the building process, you end up with an executable that lets you convert FBX files to glTF-Binary files!
This is achieved by running the FBX2glTF.exe with the following parameters:
There are a few things to keep in mind, however:
- Your textures must be in the same folder as the FBX file
- Try to have 1 material per model, as it looks like having multiple materials per model is not fully supported yet.
- Keep your models simple. It looks like animation support is not there yet either.
Once all that’s done, you can upload your glTF-Binary file and make a 3D post!
Taking it further
I wanted to see if I could create a sort of authoring pipeline to for models where I didn’t need to download a FBX file from made by someone else to create a glTF-Binary.
#madewithunity
Turns out, earlier in 2017, Unity teamed up with Autodesk to allow the creation of FBX files right from the Editor!
Not only that, but earlier this week Unity also announced that they had incorporated ProBuilder into the editor itself!
This meant that I could quickly prototype making a 3D mesh, export it as FBX and get it converted to a glTF-Binary!
The steps I took were the following:
- Download Unity’s FBX Exporter (Beta) from the Asset Store
- Download ProBuilder from the Asset Store
- Once you’re in the Unity Editor, create a cube and edit the model with the texture you want
- Right click on the GameObject you’d like to Export…
5. Invoke the FBX2glTF exporter to convert your new FBX file to glTF-Binary (with the –binary flag!)
6. Upload your glTF-Binary file to Faceobok and publish it!
Here’s the end result from the conversion:
If you enjoyed reading this, and want to see what other tech. things I get into, you can always follow me on Twitter @JavDev!