Image: marmoset.co
All right, so you've made your model, you've made it real time ready and now you are ready to show this bad boy off to the public! Cool! So... how... do i do that?
Easy! Thats where the Marmoset viewer comes in! The viewer itself, by the way, is free to use but the program, Marmoset Toolbag, isn't. Luckily, as with most 3d programs this one comes with not a free 2 week trial but a full 30 days free (CLICK HERE) ! Yeah, now you can show the World all your mediocre models in real time!
Just a quick reminder that you can just take a video of your model and show that off on YouTube, for example, but marmoset is far more interactive and makes use of quite a few bells and whistles so that you can show off you model in all its glory to anyone passing by!
Just show me how to use the thing already!!!
Okay, okay. So since this article is about actually using the viewer I'll be showing you that and not how to import and export models in and out of the program, material setups etc...
All right, so the easiest way to have your model work in MV (Marmoset Viewer) is to just simply upload your .mview file to Artstation.
Aaaand thats it! There is a catch, though (obviously). The standard (free) user can only upload files up to ~15Mb while pro users are allowed up to ~50Mb. And there's also the fact that this will be uploaded onto a site that isnt yours, which is usually acceptable for most artists as this site in particular has millions of users, so having it there is a great choice. BUT if you have your own website you wont have to worry about the size limit or pay a premium fee just to have larger files displayed...
Using MV on your personal website
This actually took me a few hours to figure out as the Marmoset Guide doesn't cover the problems I ran into (either that or I'm just blind; yeah it's probably that...) and there aren't too many users explaining this as its just simpler to use Artstation! Clearly im already running out of blog ideas if im writing about something that can be done quicker and simpler elsewhere...
Anyhoo, here is how to embed the viewer onto your website if the need arises:
Step 1: Save your model as a viewer file
In order for all this to work make sure to actually save you Mamoset file as a viewer file and not a normal Marmoset file. To do this just go to File, Export, Marmoset Viewer and this window will pop up:
The boxes should be obvious to anyone thats exported something but just so we are on the same page the first box is the save location. Title and Author need no explanation and link can be your website url... Textures will define how big the file is; the higher the texture the bigger the file, DUH.... you can also check thumbnail and uncheck autoplay; this will auto start the file when users open your page which generally isnt something you want...
Up next is the HTML Section which you can leave unchecked; I will give you the code down below so you wont need the program to generate one; this is also the case for Artstation...
And thats it for the file side; this file will now be the file you will use to showcase your work, Artstation or otherwise; again it has to be a .mview file and not a .tbscene file!
Step 2: Upload your MV file to a cloud sharing service
For all this to work you need to have a publicly accessible file on the net... So in this case i have uploaded it to dropbox and made it publicly accessible by right clicking on the file, selecting share then share with dropbox. After that there will be a "copy link" option for you to share the file.
Step 3: Make the file downloadable
This is the step that made me bash my skull against my Ichigo body pillo - i mean concrete punching bag... YOU HAVE TO MAKE SURE YOUR FILE CAN DOWNLOAD VIA THE LINK!!!
To do this with Dropbox just take the link to your file from Dropbox and replace the "www.dropbox.com" part with "dl.dropboxusercontent.com" and leave the rest as is. This will ensure that your file can be downloaded automatically; you can test it by opening a private window and pasting your new download link. If it works you should be good to go, if not, you might have skipped a step or not have made your file publicly accessible...
Im using Dropbox by the way because Google Drive only works outside of the html use and I'm not sure why but it just doesnt work when I integrate it into the script, maybe its for security reasons but yeah it just doesnt work on Google drive! I havent tested other services out but i know Dropbox works for sure.
Step 4: Add the Html Code to your site
Whatever your website builder of choice is (WIX is the one I'm using and will be the platform I show from here on) you have to find out how to embed html code. In WIX's case its pretty easy: on the builder itself just go to add elements, embed code, html code and add that to a section of the site...
And thats it for the builder side. Up next is the actual code you need to use the Viewer on your site.
Step 5: add the Code to show your model
Below is the bare minimum code you'll need to actually have your model display on your site using the html code.
<html>
<body>
<script>
var currentViewer = marmoset.embed( "https://dl.dropboxusercontent.com/customdropboxcode");
</script>
</body>
</html>
If you dont know anything about html then all you need to know is that the first "Script" tag (a tag are those words between the "<" and the ">") is just telling the page to use this particular script to run whatever is going on down below - use the marmoset viewer script in this case.
The next script tag is also very important, it is basically pointing to where your viewer file is online (the file you saved in the Marmoset program to actually generate a viewer file) from a hosting site online, dropbox, in this case. I uploaded my viewer file to dropbox and made it downloadable by taking the link "www.dropbox.com" and replacing it with "dl.dropboxusercontent.com". I also made sure to make the file I uploaded to dropbox publicly accessible; you can check if it is public by pasting the link into a private window and if it doesn't open then you havent made it publicly accessible!
After all that is done you should be able to see this on your screen when you run the html: CLICK FOR YOURSELF!
Its just a plain viewer scene; nothing fancy. If you dont see a thumbnail thats fine as long as theres a play button.
If this is what you are seeing after pressing the play button:
Marmoset Viewer could not initialize and Package file could not be retrieved error.
it means that your file cant be downloaded either because you havent made it public or you havent made it downloadable or its the wrong link.
If you are having issues be sure to check out the official marmoset troubleshooting page for more info. But like i said the main cause was actually getting the file to download so it could be read and displayed by the script!
Thats pretty much it! If you want to add more to the scene (Customise some settings) you can keep on reading and if not: thanks for reading and i hope you get the viewer working!
Step 7: Pimp my Script!!!
Now that you've gotten the damn thing to actually work on your site lets use the added benefits from the marmoset viewer to customise the experience for our viewers; this isnt something you can do on Artstation as they override these settings to benefit themselves, which is to be expected...
The extra code to add more to the viewer
Quite a bit of stuff to break down here so ill just cover the necessities: 1 and 5 are the exact same as before; calling the marmoset script (1) and also telling the script where to find your .mview file (5)
(2) as you might have guessed defines options for the file like display height and width as well as autoplay functions...
(3) is just a thumbnail you can either host from dropbox, just like the .mview file or use the auto-generated one.
And finally (4) sets up the links and custom icons the viewer displays on the the top left of the viewer.
And the "if" statement is just there to make it look like i know how to code.
And thats it. I hope this helps you showcase your work and you are more than welcome to checkout my free marmoset viewer skulls HERE!!
Advanced Code:
<html>
<head><title>Primary Skull Forms</title><meta content="width=device-width, initial-scale=1.0" name="viewport" />
</head>
<body>
<script>var opts = { width: 1280, height: 720, autoStart: false, bare: true }
opts.thumbnailURL = "https://dl.dropboxusercontent.com/customdropboxcode";
marmoset.showFrameTime = false;
marmoset.hostURL = "https://www.thivolan-art.com/";
marmoset.hostImage = "https://dl.dropboxusercontent.com/customdropboxcode";
marmoset.dataLocale = "https://viewer.marmoset.co/main/data/";
var currentViewer = marmoset.embed( "https://dl.dropboxusercontent.com/customdropboxcode", opts );
if (window && document && currentViewer.resize) {
var lastResizeTimeout = null
function resizeMarmoset() {
var width = document.body.scrollWidth;
var height = document.body.scrollHeight;
if (lastResizeTimeout) {
clearTimeout(lastResizeTimeout)
}
lastResizeTimeout = setTimeout(function(){
currentViewer.resize(width, height); }, 100);
}
window.addEventListener('resize', resizeMarmoset);
}
</script>
</body>
</html>
Let me know if you want something else explained here so i can update the article for anyone that might need it too.
Hey, it's me again!
Thivolan Moodley, 3d Artist from Johannesburg, SA. Currently working as a freelance character artist. Also creating free and paid tutorials for the clueless- i mean enthusiastic (yeah that sounds better) 3d artists out there!
Tutorials, socials and portfolio: