Set Up Your Scene
Marmoset Viewer content is created by setting up a scene in Marmoset Toolbag, and then exporting a .mview file. All of the scene data including meshes, materials, textures, lights, camera and post effect settings are saved.
You can set up your scene by importing your mesh, applying your materials and adjusting your lighting, camera and post effects. If you’re unfamiliar with the scene creation process, please read our Getting Started in Toolbag 2 tutorial.
Marmoset Viewer is designed to run on a large number of devices, so there are some limitations. Shadow casting lights are limited to 3 (you can use more lights, but only the first 3 will cast shadows), omni lights do not cast shadows, and some shader models, post effects and rendering features are not supported at this time. For a full list of supported features, check out the FAQ tab on the Viewer page.
Center Your Camera
One of the great things about Marmoset Viewer is that the camera settings, including position, angle, pivot, field of view, and post effects are transferred to the .mview file. This gives the artist full control over the the camera system, but means that care must be taken ensure the scene is easy to navigate. Specifically, it’s important to make sure that the camera is centered, otherwise it will be difficult to rotate the scene. This can generally be solved by selecting your primary mesh and going to View-> Frame Selected (Ctrl+F). More information on this topic can be seen in the following video tutorial:
To export a .mview file, go to File-> Viewer Export or press Shift+Ctrl+V. To add artist credits and a link to your portfolio, simply fill out the Title, Author and Link fields.
The Texture Quality setting significantly affects file size. Low quality limits the maximum texture size to 1024×1024, High to 2048×2048 and Unreasonable to 4096×4096, each level determining quality of the compression. File size affects download speed, bandwidth use, and performance on lower end devices. On export, your content is compressed to minimize file size; texture content is converted to a standard shading model.
The settings in the HTML tab apply to the .html file which is exported alongside the .mview file. Write HTML determines whether or not the .html file is saved, and should generally be enabled for testing purposes or if you plan on embedding your scene with an iframe tag. If you’re uploading your .mview file to a site like ArtStation, feel free to turn off the Write HTML function and ignore the HTML specific settings.
Auto-Play determines whether or not the scene will be automatically loaded when the page opens, Width and Height set the dimensions of the Marmoset Viewer window, and Full Frame determines whether the window will expand to fill the bounds of the page. Full Frame ignores the Height/Width setting, and should be used if you’re embedding your scene with an iframe tag. Use Page Layout Preset applies formatting to the .html page, and should be turned off if you’re embedding your scene via iframe tag or integrating Marmoset Viewer into an existing site design.
Once you’ve signed into ArtStation, go to your dashboard and create a new Art Project. From there, you can upload your .mview file by clicking the Add Marmoset Viewer File button.
Additionally, you can add traditional 2D images, or replace the thumbnail with a custom image. After you’ve entered all of your pertinent information like title, description and tags, you can press the Save button, which will give you an option to preview your art, or click Publish to post your art publicly on ArtStation.
You can embed .mview files that you have uploaded to ArtStation on other sites as well. This is a great option for sites like Wix or other web hosting platforms which give you access to HTML code but do not offer an FTP service to upload files. You’ll find a link to copy the embed code under the Marmoset Viewer window on ArtStation.
<iframe width=”640px” height=”480px” src=”https://www.artstation.com/embed/665067″ frameborder=”0″ allowfullscreen mozallowfullscreen=”true” webkitallowfullscreen=”true” onmousewheel=”” scrolling=”no”> </iframe>
Paste this code into your site’s HTML editor, adjust the width and height if desired, and your Viewer file will show up, like so:
Note: ArtStation has a 15MB file size limit, so you may need to adjust the Texture Quality settings. Geometry count also affects file size; if you would like to load untextured high-poly models, it’s best to keep the poly count under 500,000 triangles. Decimating your mesh in zBrush is a good way to reduce the geometry count of very high resolution meshes.
Embedding on Your Website
Marmoset Viewer content can be added to your website or portfolio as well; however, this will require a bit of HTML knowledge and full FTP access to your web server.
The easiest way to add Marmoset Viewer to your website is with an iframe tag which allows you to link to a separate .html file, in this case a page that contains your Marmoset Viewer scene. When exporting your scene, make sure that .html export is on, and that Full Frame is enabled, to ensure that Marmoset Viewer will fill the space of your iframe.
After you’ve exported your .mview and .html files, upload them to your website via FTP. Then copy the following bit of code into your page, replace yourscene1.html with the url to your .html file, set the height and width, and you’re done.
<iframe src=”yourscene1.html” allowfullscreen=”true” height=”467″ width=”830″></iframe>
Note: Be sure allowfullscreen is set to true, otherwise you will not be able to use the full screen feature.
Creating a Gallery
It’s very easy to create a gallery system by adding thumbnail images that swap out the iframe content when clicked. To start, copy the following bit of code, and replace yourscene1.html with the URL to the scene you want to load by default, and give it a name.
<iframe src=”yourscene1.html” name=”viewerframe” allowfullscreen=”true” height=”467″ width=”830″></iframe>
For the clickable thumbnails, copy the next bit of code and for each line, replace the a href with the URL to the .html file, make sure the target is set to the same name as your iframe, and change the img src to the URL of the thumbnail image.
<a href=”yourscene1.html” target=”viewerframe”><img src=”yourscene1.jpg” ></a>
<a href=”yourscene2.html” target=”viewerframe”><img src=”yourscene2.jpg” ></a>
<a href=”yourscene3.html” target=”viewerframe”><img src=”yourscene3.jpg” ></a>
<a href=”yourscene4.html” target=”viewerframe”><img src=”yourscene4.jpg” ></a>
That’s all you need to do to create a basic gallery system. If you’re experienced with web development, you can get creative and add extra formatting to further customize the appearance of your site. Click the thumbnail links below to see how the gallery code works.
We’d like to hear from you! We are making an effort work with web developers using Marmoset Viewer, and we’d be happy to help and offer advice should you need it. Please send any questions, concerns, or introductions to us at firstname.lastname@example.org.