Facebook’s 3D Posts

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:

A Treasure chest of 3D posts!

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:

  1. glTF-Binary
  2. glTF-Draco
  3. glTF-Embedded
  4. glTF-pbrSpecularGlossiness
  5. glTF
A collection of glTF Samples

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:

Showing a 3D cube

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!

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:

> FBX2glTF --binary --input YOUR_MODEL_NAME.fbx --output YOUR_MODEL_NAME

There are a few things to keep in mind, however:

  1. Your textures must be in the same folder as the FBX file
  2. Try to have 1 material per model, as it looks like having multiple materials per model is not fully supported yet.
  3. 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!

Export FBX files right from Unity!

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!

ProBuilder + Unity

The steps I took were the following:

  1. Download Unity’s FBX Exporter (Beta) from the Asset Store
  2. Download ProBuilder from the Asset Store
  3. Once you’re in the Unity Editor, create a cube and edit the model with the texture you want
  4. Right click on the GameObject you’d like to Export…
Last step on the editor!

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!

Leave a Reply

Your email address will not be published.