Sketchfab: Embedding an interactive 3D viewer
Recently, I had the opportunity to present a workshop at the Biomedical Communication Academic Meeting(BAM@TO). At this meeting, all four accredited medical illustration graduate programs across North America gathered to share ideas and their work. Karyn Ho made this year’s conference especially special by re-branding the student exchange as a student run conference. I was lucky enough to not only present at the workshop but also be involved in the symposium team.
Anyways, let’s get back on topic and talk about Sketchfab! I wanted to do a workshop that was useful for students from all the other schools. Different modeling programs are used between each school, so instead of teaching a modeling technique specific to the programs I know, I decided to do a workshop on Sketchfab, which is an interactive 3D web publisher that any 3D modeler could use!
You can watch the screencast of my workshop and read the instructions that goes with the workshop below!
You can download a pdf of the workshop handout here:
ManSan_BAM_Handout
Introduction
If you are a medical illustrator that creates beautiful scientifically accurate 3D models, why showcase your work as a 2D image? Sketchfab is a platform that allows interactive 3D content to be published, shared and embedded online without a plug-in. Your model can be embedded on any web page and shared across platforms like Tumblr, WordPress, Bēhance, Facebook, Kickstarter, Linkedin, Deviantart and the list goes on. This document will give a brief introduction on how to easily and quickly embed a 3D interactive viewer within a few clicks!
The technology behind Sketchfab
Sketchfab utilizes WebGL technology. WebGL is a JavasScript API for rendering 3D and 2D graphics within browsers without the use of plug-ins. WebGL utilizes the <canvas> element in HTML5. Understanding the inner workings of WebGL is unnecessary to use Sketchfab, but if you would to learn more about WebGL, you can read Joshua Lai’s blog post on how to use WebGL to code your own interactive 3D viewer: http://jlai3d.blogspot.ca/?view=classic
Browser Support
Since sketchfab is powered by webGL, and webGL is in turn run with the <canvas> tag, sketchfab will only fully function on browsers that support the <canvas> tag. The <canvas> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
However, Sketchfab has built an image-based backup so that if the browser does not support WebGL, it will automatically default to a 360° view of your model. This means that even if your audience not on a WebGL enabled browser, they will still have an interactive 360° model to view. You can view an example
here: https://www.youtube.com/watch?v=6fSh422JPVM
3D file support
Sketchfab allows you to upload 28 different 3D file types. You can find out more here: https://sketchfab.com/faq/upload#which-formats-are-supported
Getting Started
First you will need to create a Sketchfab account. There are two types of accounts: Basic and Pro. The free account has more than enough features to get started with. Throughout this document I will list some of the differences and options you can have with a Pro account. You can find out more about the account types here: https://sketchfab.com/plans.
Uploading model and materials
There are many methods of uploading your model onto Sketchfab, but this document will only go over how to upload your model in the zipped format. I have chosen to go over this method because it is suitable for anyone to use with any 3D modeling program. The other options not discussed in this document include uploading to Sketchfab with an exporter directly from your 3D modeling program (eg. Maya, Cinema 4D, etc.) or natively (eg. Photoshop, 3D coat, etc).
To upload your materials with your model, you can zip together (.zip, .tar) a folder that contains all your texture files (.jpg, .png, .psd, .tiff), material file (.mtl) and your model file, and directly upload the zipped file. (I have found that sometimes this does not always work, if that is the case, you can upload your 3D file and then import your textures and maps separately)
Upload> Choose file
You can now insert a model name, description and choose a category. You can always revisit and change these settings by going to your model’s properties.
3D Settings and Material editor
Once your model is uploaded, you can modify the textures, materials and settings of your model. Go to
Settings> 3D settings.
This will bring you to the scene where you can edit the model’s orientation and the camera’s field of view for when your model initially loads for your site. Here you can enable image-based lighting by loading an environment. If you have a Pro account, you can upload your own environment. In this example I did not use an environment, I just set my fixed background to “clean_dark”.
You can access the Material Editor by going to the Materials tab. Here you can add various maps to texture your model. Click on the square> Import image> find your texture and material file.
For each material, here are the settings you can control:
• Diffuse Color – Use the color picker to tint the model or upload your own diffuse map.
• Lightmap – Pre-baked lighting on your models for shadows you have rendered onto the model.
• Specular Color – Controls the intensity of the texture meant to reflect in light.
• Glosiness – Controls the sharpness of the specular map
• Normal Map – You can import a normal or displacement map in this section.
• Opacity – Controls any transparancy in your materials, or the overall transparancy of the part of the model selected. You can only select a texture not a color, if you select a color it will disable the texture. If you don’t use the texture only the factor will affect the rendering.
• Emission – For parts you want glow or self-illumination.
• Environment Reflection – This setting is used only if you enabled a environment under the scene tab. This factor is multiplied by the specular color.
You can find out more about the specific settings here: http://blog.sketchfab.com/post/63679785587/how-to-match-your-materials-on-sketchfab
When you’re done, take screenshot to save your thumbnail and save settings.
How to share and embed Sketchfab’s 3D viewer on your website
There are many methods of embedding your 3D model on your website (ex. WordPress offers a plugin). We will focus on the simple method of using the embed button at the bottom of your Sketchfab 3D viewer. Here you can click on any of the social media icons to share. If you want to embed the 3D viewer in your website, you can take the <iframe> code from and paste it into the html of your page (the <iframe> tag defines an inline frame- an inline frame is used to embed the 3D viewer hosted on
Sketchfab and place it within another HTML document such as your website).
To see more options, click show options. Here you can define the size of your <iframe>. By default, the 3D viewer will display the screenshot of the model with a “play” button and will only launch if the user
clicks on it. If autostart is checked, then the viewer will launch immediately once the page is loaded. I like to keep this option unchecked so that it does not overload the user’s browser. I typically check off hide model infos so that my user isn’t taken off my website to my Sketchfab account.
The options within the iframe code:
• Frameborder: specifies whether or not to display a border around the <iframe>.
• Height/width: specifies the height/width of the iframe. If you change the values to a percent
(eg. embed = 100% of parent’s window size) then you can make your viewport responsive. (ex.
height= “500px” width= “100%”).
• Webkitallowfullscreen & mozallowfullscreen: allows full screen functionality
• Src: this is the address of where your model is stored on Sketchfab.com
You can read more about the embedding options here: https://sketchfab.com/faq/share
Once your iframe is modified to your liking and pasted on your HTML document, you’re done!
Comparison with other interactive 3D viewers
The two main competitors of Sketchfab are Verold and p3d.in. Here is a brief breakdown on their similarities and differences:
Similarities: All three platforms run WebGL in the browser and allow a large number of 3D file types to be uploaded. All three products are fairly new and were launched in 2012.
Differences:
Verold: More invested in their material system and shaders. It supports advanced material features like subsurface scattering, iridescent effects, transmissive properties, fresnel shading, ability to set another layer of specular information for metallic-looking surfaces, etc.
p3d.in: It can display your model without displaying any information about itself. Sketchfab will have the company logo (unless you upgrade to a pro account, in which cause you can upload your own watermark). No option to upload as a zip file.
Resources
Josh Lai’s blog about webGL
Sketchfab also provides a portfolio website (Sketchfab.me) for Pro account users. If you are a student it
is FREE!
Plug-ins
Model used in this workshop was by Andrew Q Tran, visit his website to see more of his work!