Twoje modele w przeglądarce dzięki Marmoset Viewer i Dropbox.

[Monio]

 

UPDATE: Dropbox wycofuje się z możliwości hostowania stron. Na kontach basic ta opcja już nie działa, na kontach Pro przestanie działać 01.09.2017. Korzystajcie z Artstation lub alternatywnych serwerów.

 

Ostatnio kilka osób pytało jak udało mi się umieścić moje sceny z Marmoset Viewera na Dropboxie więc postanowiłem zrobić mały tutorial.

 

Na start małe wyjaśnienie o czym mówimy. Marmoset Viewer to funkcja Marmoset Toolbag 2. Dzięki niej możemy wyeksportować naszą scenę w formie strony wyświetlanej w przeglądarce. Zaznaczam że nie jest to serwis jak Sketchfab. W przypadku Marmoseta musimy sami zatroszczyć się o hosting naszych plików. Możemy też dołączyć je do naszej galerii na Artstation, jednak w tym przypadku musimy się liczyć z limitem 15 mega na scenę. Marmoset Viewer działa w przeglądarkach które wspierają WebGL, również na urządzeniach mobilnych.

W tym miejscu chciałbym bardzo polecić Marmoset Toolbag 2. Oferuje wyśmienity rendering Realtime, radzi sobie z bardzo gęstymi siatkami z Zbrusha i świetnie spisuje się jako przeglądarka plików 3D ogólnego zastosowania (wspiera wiele formatów).

Więcej informacji o Marmoset Toolbag 2 i Viewer znajdziecie na oficjalnej stronie.

http://www.marmoset.co/

 

Będziesz potrzebował dwóch rzeczy:

Marmoset Toolbag w wersji 2.07 lub nowszej.

Konto Dropbox. Może być również darmowe! (Dzięki Boris!)

 

 

1 - EXPORT PLIKÓW MARMOSET VIEWERA

Zakładam że potrafisz obsługiwać Toolbaga 2 i masz już przygotowaną scenę. Jeśli ten program to dla ciebie nowość to wszystkie potrzebne informacje znajdziesz na stronie autorów.

 

Kliknij File a następnie Viewer Export. W oknie które się pojawi możesz wpisać informacje o sobie.

Jeśli twój model jest oteksturowany to zwróć uwagę na pole Texture Quality. Po najechaniu kursorem nazwę opcji pojawi się informacja jak dane ustawienia wpływają na rozdzielczość tekstur. Warto włączyć opcje Full Frame żeby nasza scena wyświetlała się w całym oknie przeglądarki.

 

 

Na chwile obecną Viewer nie obsługuje wszystkich efektów Toolbaga. Jeśli masz jakieś ustawienia materiału czy postprocesu które nie będą widoczne w przeglądarkowej wersji to w okienku Alerts pojawią się o tym informacje.

Pełną listę wspieranych funkcji możecie znaleźć pod tym adresem: http://www.marmoset.co/viewer/support

 

2 - MARMOSET.JS

Mamy już pliki Viewera. Z jakiegoś powodu gdy przerzucimy je na dropboxa i uruchomimy link do pliku HTML z poziomu przeglądarki strona nie wyświetli się. Jest to spowodowane tym że Dropbox blokuje wykonywanie skryptów z zewnętrznych serwerów a nasz kod HTML odwołuje się do pliku marmoset.js który jest na serwerze marmoset.co. Możemy sobie z tym poradzić pobierając ten plik z serwera marmoset.co i umieszczając go na naszym Dropboxie.

 

Otwórz plik HTML wyeksportowany z Toolbaga w dowolnym edytorze tekstowym. Znajdziesz tam adres do skryptu .js. Uruchom ten adres w przeglądarce i zapisz plik na swoim komputerze. Na marginesie dodam że plik z tym skryptem jest chroniony prawem autorskim. Jednak jeśli uruchomisz go przeglądarce to będziesz mógł przeczytać że jego licencja pozwala na wykorzystanie takie jak tutaj opisuje. Goście z Marmoseta to fajne chłopaki. :)

 

 

Teraz pozostało nam umieścić wszystkie pliki na Drobboxie i zedytować trochę plik HTML. Tutaj masz 2 opcje do wyboru, w zależności jakie konto posiadasz.

 

3A - DROPBOX DLA DARMOWYCH KONT - LINKI GENEROWANE

Tutaj opisze metodę dla darmowych kont. Zadziała ona również na płatnych kontach Pro i Business ale jest mniej wygodna więc jeśli masz wykupionego płatnego Dropboxa to polecam przejśc do punktu 3B.

 

Stwórz katalog na twoim dropboxie i przenieś tam pliki HTML, MVIEW i marmoset.js. Będziesz musiał zedytować plik HTML tak żeby odwoływał się do plików MVIEW i marmoset.js.

W explorerze kliknij prawym przyciskiem na plik ze skryptem wybierz opcje "Udostępnij łącze do Dropbox", zapisze się on w schowku. Jest to link do strony dropboxa z opcjami pliku a nie direct link do samego pliku. Zanim będziemy go wklejać do kodu HTML musimy odpowiednio zedytować ten adres żeby uzyskać link do właściwego pliku.

 

To co zostało skopiowane do schowka wygląda mniej więcej tak:

 

https://www.dropbox.com/s/1234567890abcd/marmoset.js?dl=0

 

Podmień "www.dropbox.com" na "dl.dropboxusercontent.com" i wytnij z końcówki linku znak zapytania i wszystko co znajduje się za nim. Otrzymasz adres do pliku który będzie mniej więcej tak:

 

https://dl.dropboxusercontent.com/s/1234567890abcd/marmoset.js

 

Powtórz tę operacje również dla plików MVIEW oraz HTML. Teraz wystarczy podmienić w kodzie HTML adresy do skryptu i pliku MVIEW.

 

 

To wszystko. Uruchom w przeglądarce adres do pliku HTML który spreparowałeś powyższą metodą żeby przetestować czy wszystko poszło dobrze.

 

Pamiętaj że jeśli będziesz zmieniał lokalizacje lub nazwę plików to musisz wygenerować te linki ponownie. Nie wystarczy sama zmiana nazwy pliku na końcu linku!

 

3B - DROPBOX DLA KONT PRO I BUSINESS - FOLDER PUBLICZNY

Posiadając konto PRO lub BUSINESS na Dropboxie możesz skorzystać z wygodniejszej metody z Folderem Publicznym. Dzięki niej będziesz mógł przenosić twoje pliki do podkatalogów bez potrzeby generowania linków a edycja kodu HTML będzie łatwiejsza. Funkcja Folderu Publicznego jest wyłączona domyślnie dla wszystkich kont które powstały po 04.10.2012 więc jeśli założyłeś kontro na Dropboxie po tej dacie musisz aktywować folder publiczny za pomocą specjalnego linku:

https://www.dropbox.com/enable_public_folder

 

Przenieś pliki HTML, MVIEW oraz marmoset.js do twojego Folderu Publicznego lub stworzonego w nim podkatalogu.

Otwórz plik HTML w edytorze tekstu żeby zmienićścieżkę do skryptu marmoset.js tak żeby odwoływała się do pliku który masz na dropboxie. Jeśli twój plik HTML i marmoset.js będą w tym samym katalogu, tak jak ci zaproponowałem, to wystarczy że w adresie do skryptu pozostawisz tylko nazwę pliku.

 

 

Jeśli chcesz umieścić skrypt w innym podkatalogu Folderu Publicznego, na przykład po to żeby nie musieć mieć jego kopi w każdym innym podkatalogu, to adres URL do tego pliku dostaniesz klikając w explorerze na plik prawym klawiszem i wybierając opcje "Kopiuj Łącze Publiczne". Taką samą operacje możesz wykonać dla pliku MVIEW jeśli chcesz.

 

 

Wszystko ustawione. W explorerze kliknij prawym klawiszem na plik HTML i wybierz opcje "Kopiuj Łącze Publiczne" żeby dostać link do twojej strony z Viewerem.

 

4 - GOTOWE!

 

Teraz możesz wysyłać swój model w świat. :)

Klik.

 

BONUS1 - MINIATURKA NA SERWISACH SPOŁECZNOŚCIOWYCH

Opiszę teraz metodę dzięki której serwisy społecznościowe wyświetlą miniaturkę gdy opublikujemy nasz link.

Gdy wklejamy link do okna postowania, Facebook i podobne serwisy wyszukują obrazki na stronie żeby stworzyć miniaturkę do postu. Nasza strona nie zawiera żadnych obrazków w formacie zrozumiałym dla tych skryptów więc musimy dodać taki plik do naszego Dropboxa oraz umieścić go w kodzie HTML.

Stwórz obrazek miniaturki w małej rozdzielczości. Możesz go wyrenderować w Toolbagu. :) Jeśli zamierzasz udostępniać swoje modele na Facebooku to polecam żeby twoja miniaturka miała proporcje 2:1, dzięki temu obrazek nie zostanie przycięty. Wykadrowany i zedytowany obrazek zapisz na Dropboxie. W pliku HTML dodaj w sekcji BODY odwołanie do tego obrazka. Jeśli ustawiłeś w eksporterze viewera opcje Full Frame to obrazek nie będzie się wyświetlał bo przysłoni go Viewer.

 

Dla kont darmowych skorzystaj z metody generowania linku opisanej w punkcie 3A

 

Mając konto płatne możesz skorzystać z Folderu Publicznego tak jak opisuje to w punkcie 3B.

 

Enjoy!

Edytowane 9 Luty 2017 przez Monio

[Monio]

 

Masz racje. Da się to zrobić również z darmowym kontem! Gdy wcześniej testowałem twoją metodę chyba wkleiłem do kodu zły link (dropbox zmienia je gdy zmieni się lokalizacja lub nazwa pliku). Zedytuje dzisiaj wieczorem tego tutka. Dzięki!

Edytowane 11 Lipiec 2015 przez Monio

[olaf]

super sprawa, widziałem Twoj pomysł w wątku ale byłem za bardzo zajęty, by spytać. Dobra robota.

[Monio]

Przeorałem tutek tak żeby opisywał również jak postawić Viewera na koncie bezpłatnym. Dzięki Boris za info, wcześniej nie przetestowałem tego wystarczająco. Wyczerpałem mój dzienny limit na internety więc eksport z Zbrusha opiszę w poniedziałek. Elo. ;)

[Luki Luki]

Super! Dzięki za tutorial. Jest z tym trochę roboty, ale da się przeżyć.

[2013]

Super to jest Monio, pięknie dziękuję!

[flamaster69]

Cześć!

Mam prośbę o drobną pomoc, zakupiłem licencję z marmoseta i chciałbym usunąć buttony z menu viewera. Czy masz lekarstwo gdzie i jaką komendą to zrobić? Ponadto zrobić przeźroczyste tło?

[Monio]

Chyba się nie da. Wiem że da się logos wymienić na własny więc można pustego png tam dać. Może napisz do ich supportu czy moga dodać takie opcje, nie wiem jak z przeźroczystością ale usunięcie interfaceu to raczej banał.

Wymiana logosa jest opisana tutaj: http://www.marmoset.co/viewer/integration