How to Publish and Embed Interactive 3D Models with Sketchfab
Total Page:16
File Type:pdf, Size:1020Kb
Man-San Ma http://mansanma.com/ (647) 447- 3769 • [email protected] How to Publish and Embed Interactive 3D Models with Sketchfab 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! 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) How to Publish and Embed Interactive 3D Models with Sketchfab 1 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. How to Publish and Embed Interactive 3D Models with Sketchfab 2 Man-San Ma http://mansanma.com/ (647) 447- 3769 • [email protected] 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. How to Publish and Embed Interactive 3D Models with Sketchfab 3 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. How to Publish and Embed Interactive 3D Models with Sketchfab 4 Man-San Ma http://mansanma.com/ (647) 447- 3769 • [email protected] 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 • http://jlai3d.blogspot.ca/?view=classic Sketchfab also provides a portfolio website (Sketchfab.me) for Pro account users. If you are a student it is FREE! • http://blog.sketchfab.com/post/46247179555/sketchfab-me-professional-3d-portfolio-website Plug-ins http://wordpress.org/plugins/sketchfab-viewer/ How to Publish and Embed Interactive 3D Models with Sketchfab 5 .