rust360.com

3D Rust Skin Viewer

Webový prohlížeč skinů z videohry Rust. Hráči si můžou před nákupem prohlédnout předmět ve 3D, otáčet ho a přibližovat detaily přímo na webu. Projekt jsem vytvořil v Blazoru, nejprve s three.js a později s Babylon.js.

Otevřít projekt

Proč jsem Rust360 vytvořil

Rust je multiplayerová hra o přežití, ve které hráči sbírají suroviny, stavějí základny a vyrábějí nástroje a zbraně. Ve hře jsou také takzvané skiny, které mění vzhled předmětů. Díky nim si hráči můžou upravit své vybavení podle sebe a odlišit se od ostatních hráčů. Skiny se dají kupovat a prodávat za skutečné peníze.

Při nákupu skinu byl často k dispozici jen statický obrázek. Chyběla možnost předmět otočit, podívat se na druhou stranu nebo si přiblížit detaily. Proto jsem vytvořil Rust360, kde si hráči můžou skin prohlédnout ve 3D přímo v prohlížeči.

Statický 2D náhled skinu krumpáče při nákupu — **Statický obrázek**Jeden úhel, bez možnosti otočení.

**3D náhled na rust360.com**Otoč předmět a přibliž si každý detail.

Ukázka výše porovnává obrázek z nabídky s interaktivním modelem stejného krumpáče. Model jde otáčet a přibližovat.

První verzi jsem postavil na Blazoru a three.js a spustil na rust360.com.

Příprava modelů a textur

Nové sady skinů vycházely zpravidla každý pátek. Jejich přidávání do Rust360 bylo automatizované. Textury se stahovaly ze Steam Workshopu a spojovaly s odpovídajícími 3D modely ze hry.

Geometrie určuje tvar předmětu a UV souřadnice rozmístění textur na jeho povrchu. Textury pak určují barvu, drobné nerovnosti a reakci na světlo. V ukázce s kuší si můžeš postupně zapínat albedo map, normal map a ambient occlusion map a porovnat jejich vliv na vzhled modelu.

// VYZKOUŠEJ SI TO

Vrstvy materiálu

Klikni na tlačítko a sleduj změnu ve 3D náhledu. Každý další krok přidá jednu mapu na stejný model.

3D náhled vyžaduje JavaScript.

Geometrie modelu

Model určuje skutečný tvar předmětu. UV souřadnice říkají, která část textury patří na kterou část jeho povrchu.

Model, textury a nastavení materiálu jsem ukládal do souboru GLB. Je to binární varianta formátu glTF, která umožňuje přenášet tyto podklady v jednom souboru.

Kvůli načítání na webu bylo potřeba zmenšit objem dat. Ukázkový krumpáč používá Draco pro kompresi geometrie; textury krumpáče i kuše jsou ve WebP. Výsledná velikost závisí na konkrétním modelu a texturách.

Prohlížeč soubor načte a vykreslí model s jeho materiály a osvětlením. Při vývoji jsem řešil hlavně to, aby vzhled skinů co nejlépe odpovídal hře.

Přechod na Babylon.js

Zpočátku jsem počítal s tím, že stačí načíst model, připojit k němu textury a zobrazit ho v prohlížeči. Výsledné skiny se ale pořád lišily od toho, jak vypadaly ve hře, hlavně leskem a odlesky. Samotné textury tedy nestačily, záleželo i na tom, jak s nimi renderer pracuje.

Musel jsem si proto lépe nastudovat vykreslování materiálů a jejich reakci na světlo. Zjistil jsem, že se běžně používají dva způsoby popisu materiálu, metallic/roughness a specular/glossiness.

Metallic/roughness určuje, jestli se povrch chová jako kov a jak je drsný. Drsnost ovlivňuje, jestli jsou odlesky ostré, nebo rozptýlené. Specular/glossiness pracuje přímo s barvou a intenzitou odrazu a hladkostí povrchu. Oba přístupy popisují podobné vlastnosti, ale jejich mapy obsahují jiné údaje a nejde je jednoduše zaměnit.

Skiny z Rustu používají specular/glossiness. Pro zobrazování 3D grafiky na webu jsem používal populární knihovnu three.js. Ta ale tento způsob při načítání GLB přímo nepodporovala. Přešel jsem proto na méně známý Babylon.js, další knihovnu pro 3D grafiku na webu, která ho podporovala. Díky tomu jsem mohl materiály načítat bez převodu a přiblížit vzhled skinů tomu, jak vypadaly ve hře.

Zveřejnění na Redditu

Rust360 jsem představil na Redditu v komunitě r/playrust. Příspěvek měl mezi hráči úspěch, získal téměř 1 000 upvotů a zobrazil se 70 tisícům lidí. V komentářích se objevovaly pozitivní reakce i návrhy na úpravy.

Původní video s ukázkou Rust360 ze zveřejnění na Redditu.

Původní příspěvek představující Rust360 komunitě r/playrust na Redditu — První veřejné představení Rust360 na r/playrust.

Komentáře hráčů pod prvním představením Rust360 na Redditu — Výběr reakcí a zpětné vazby od hráčů.

Přečíst původní příspěvek a reakce hráčů

Odkup projektu a další spolupráce

Přes příspěvek na Redditu se o projektu dozvěděl tým rusthelp.com. Kontaktovali mě a následně Rust360 odkoupili.

Po předání jsem dál pomáhal s vývojem, například s outfit builderem pro skládání outfitů a režimem View in Hands pro zobrazení předmětu v rukou postavy. Pod rusthelp.com projekt překonal milion prohlédnutí skinů.

Milník jednoho milionu prohlédnutí skinů na rusthelp.com — Milion prohlédnutí skinů v dalším vývoji pod rusthelp.com.

Současná podoba prohlížeče skinů Rust360 na rusthelp.com — Rust360 dnes

Zkušenosti z vývoje

Na Rust360 jsem si rozšířil zkušenosti s Blazorem a 3D grafikou v prohlížeči. Naučil jsem se základy práce v Blenderu, připravovat herní modely a textury pro web a řešit rozdíly ve vykreslování materiálů.

Vyzkoušel jsem si také zveřejnění aplikace herní komunitě, práci se zpětnou vazbou a předání projektu jinému týmu, se kterým jsem pak pokračoval ve vývoji. Díky projektu jsem se také dostal do kontaktu přímo s některými vývojáři Rustu.

Zpět na všechny projekty