WebXR: SVG to glTF pipeline
(With a bonus learning: Taking a raster image and converting it to a vector graphic in illustrator.)
Raster Image Converted To Vector Graphic
- Download this zip file and extract it onto a hard drive, svg to glTF pipeline.
- Open a new Illustrator file and then place the generic-logo.png file form the svg to glTF pipeline folder.
3. Open Window > Image Trace.
4. Keep default settings for black and white logos. (Adjust settings for color or grayscale conversions) With the raster image file selected click on the trace button.
5. With the image still selected, go to Object > Image Trace > Expand.
6. The image is now converted into a vector graphic.
7. With the Direct Selection Tool click the all white space objects and delete them so only the logo is left on the Artboard.
SVG to glTF/glb
- With the Direct Selection Tool click on the logo to inspect the paths. Image Trace doesn’t always perfectly trace raster images so some clean up might be necessary.
2. Make sure the paths are clean of extra points, drawn counter clockwise and all points have straight handlebars in pairs or broken in pairs with even widths. Broken handlebars in pairs, (or without even widths), will result in glitched out vectors when extruding the file into a 3D object. Broken handlebars only work in single handlebar mode, (when one side the point is fixed and the other side is curved). Handlebars can’t overlap each other or the points will extrude to holes in the 3D vectors.
3. Select all vector objects and turn them into a compound path.
4. Now save the file as both .svg and .ai. Exporting as .svg after saving the .ai file is the ideal workflow.
5. Open up Blender, delete the default primitive, and import the .svg file. File > Import > Scalable Vector Graphics (.svg)
6. Right click and select the curve object.
7. Now Select + CTRL + ALT + C to set the origin of the object. Then select Geometry to Origin.
8. Now click open the Transform menu and scale up the object by 300 on all three axis fields, and change the Rotation on the axis to 90 percent.
9. Next click on the Object Data Curve menu, and in the Geometry dropdown set the Extrude to 0.005, Depth to 0.001 and Resolution to 5+, (but we don’t want the resolution to be over 10 or the poly count will be too high).
10. Let’s now go into edit mode to see the extruded curves handlebars and points.
11. Go back to object mode and let’s now covert those curves into one solid mesh object. Press ALT + C to Convert to Mesh from Curve/Meta/Surf/Text.
12. Go back into edit mode to see the all the vertices of the mesh.
13. First File > Save the Blender file as a .blend, and after that select all by pressing “A”, and then go to File > Export > Collada(.dae).
14. You will need a Sketchfab account for the next few steps, so make an account here. Once you’ve set up an account upload the Collada logo file to change the materials, enhance the lighting and convert the file into the glTF format.
15. Once the model is loaded it’s material and lighting settings can be changed, select 3D settings to make adjustments.
16. Sketchfab allows for multiple material options, but rough-matte and high gloss metal materials seem to work best for glTF and glb formats. Stay away for bump maps or glassy transparent settings.
17. Now modify the lighting, shadow and environment settings.
18. Now save the settings, and exit 3D settings. Return to the main page for the logo model and set it for free download and save, then publish the model for viewing and downloading.
19. Click the download button and select glTF file format.
20. Extract the .zip file and open the folder, inside will be two files scene.gltf and scene.bin.
21. Now let’s open up Cesium’s COLLADA (.dae) models or OBJ models to glTF website, http://52.4.31.236/convertmodel.html, and convert the glTF files into a .glb file that was can load onto Facebook in a 3D post.
22. A scene.glb file will automatically download once the file is converted. Now let’s validate the file with Facebook’s 3D validator tool. Facebook will not allow files larger than 4MB. https://developers.facebook.com/tools/3d/validation
24. The file is now ready to share on Facebook in 3D post.
25. Have fun!
