Od jednego screena bolidu do własnego cyfrowego muzeum. Jak zbudowałem RACECRAFT

Studio Core — pierwszy fundament

Pierwsza wersja RACECRAFT była bardzo prosta. Model GLB, Three.js, kamera, światła, podłoga i możliwość obracania samochodu. Do tego podstawowy interfejs: GARAGE · DRIVE · STUDIO Najważniejsze było jednak to, czego użytkownik nie widział. Od początku aplikacja powstawała jako osobny frontend, bez CMS-a i bez WordPressa. Produkcyjnie to statyczne pliki HTML, CSS i JavaScript oraz modele 3D. Dzięki temu cały runtime przeglądarki może pracować dla sceny WebGL. Bez warstwy motywu. Bez buildera. Bez dziesiątek wtyczek.

Jeden model szybko przestał wystarczać

Drugim samochodem został Mercedes W14. To był ważny test. McLaren z 1989 roku i współczesny W14 mają zupełnie inne proporcje, bryłę, materiały i sposób odbijania światła. Jeśli aplikacja miała kiedyś obsługiwać większą kolekcję, nie mogła być dostrojona tylko do jednego GLB. 

Samych modeli 3D nie tworzę. Korzystam z prac zewnętrznych autorów, zgodnie z warunkami ich licencji, a po mojej stronie pozostaje cały system RACECRAFT: sposób prezentacji, światło, interakcja, animacje, Drive, kamery, efekty, dźwięk, loader oraz zaplecze do zarządzania kolekcją.

Mercedes W14 nie jest obecnie dostępny w publicznej kolekcji. Model został udostępniony na licencji z ograniczeniem dotyczącym wykorzystania komercyjnego, dlatego do czasu uzyskania jednoznacznej zgody autora nie publikuję go w RACECRAFT.

Tak powstał Garage Engine. Samochody zaczęły być traktowane jako dane:

• rok,
• konstruktor,
• model,
• kierowca,
• numer,
• plik GLB,
• profil światła,
• konfiguracja Drive,
• credits i licencja.

Nowy samochód nie wymagał już przebudowania interfejsu. RACECRAFT zaczął zmieniać się z prezentacji jednego auta w archiwum.

Timeline i cyfrowa podróż przez epoki

Naturalnym kolejnym krokiem była oś czasu. Każdy rok może zawierać jeden lub kilka samochodów. Użytkownik może więc przeglądać kolekcję chronologicznie albo otworzyć Garage i wybrać konkretny model. To wymusiło zmianę myślenia o strukturze aplikacji. Rok nie jest samochodem. Konstruktor nie jest samochodem. Kierowca nie jest samochodem. Każdy pojazd jest niezależnym eksponatem, który dopiero otrzymuje kontekst historyczny. Dzięki temu jeden sezon może zawierać kilka różnych konstrukcji, a kolekcja może rosnąć bez zmiany architektury.

Cinematic Details

Samo obracanie modelu szybko przestało wystarczać. Do każdego samochodu dodałem przygotowane punkty kamery:

• Overview,
• Front,
• Cockpit,
• Side,
• Rear,
• Aero.

Kamera nie teleportuje się pomiędzy ujęciami. Przejeżdża po łuku, zmienia dystans i pole widzenia, a każde auto może mieć własne ustawienia kadrów. W efekcie model przestaje być tylko obiektem do obracania. Zaczyna zachowywać się jak element interaktywnej prezentacji filmowej.

DRIVE — z showroomu do mini doświadczenia

Później pojawiło się pytanie: skoro samochód już stoi w scenie, dlaczego nie pozwolić nim pojechać? Tak powstał tryb DRIVE. Na desktopie samochodem można sterować klawiaturą. Na urządzeniach mobilnych pojawia się osobny panel dotykowy z analogowym skrętem, gazem i hamulcem. Drive obsługuje między innymi:

• przyspieszanie,
• hamowanie,
• jazdę wstecz,
• skręt,
• obrót kół,
• animację kierownicy,
• biegi,
• zmianę FOV,
• kamerę chase.

Nie jest to symulator. I nigdy nim nie miał być. Celem było stworzenie wrażenia prowadzenia eksponatu, bez zmieniania całego projektu w grę wyścigową.

Formula FX — prędkość, którą widać

Przy 300 km/h sam licznik nie wystarcza. Dlatego Drive dostał system efektów zależnych od prędkości. Im szybciej jedzie samochód, tym mocniej pojawiają się:

• ground streaks,
• mikrocząstki,
• debris,
• aero trails,
• delikatny camera shake,
• speed FOV.

Trail zachowuje też fragment wcześniejszej trajektorii samochodu, dzięki czemu przy szybkim zakręcie można zobaczyć wizualny ślad pędu. Najważniejsze było zachowanie umiaru. Efekty nie mogą zasłaniać samochodu. Sam model cały czas pozostaje centralnym elementem sceny.

Sound Engine bez ani jednego MP3

Kolejnym problemem był dźwięk. Nie chciałem wstawiać jednego pliku audio zapętlonego w tle. Zamiast tego RACECRAFT dostał własny proceduralny Sound Engine oparty o Web Audio API. Dźwięk jest generowany w czasie rzeczywistym i reaguje na:

• obroty,
• prędkość,
• gaz,
• hamowanie,
• bieg.

Silnik składa się z kilku syntetycznych warstw:

• engine body,
• harmonic i firing tone,
• high-rev scream,
• drivetrain,
• wind noise,
• whine i turbo.

Powstały również profile odpowiadające różnym charakterom układów napędowych, między innymi klasyczne V8 i V10 oraz współczesne V6 Hybrid. Nie jest to próba laboratoryjnego odwzorowania konkretnego silnika. Celem jest wiarygodna reakcja dźwięku na zachowanie samochodu. I działa zaskakująco dobrze.

Problem z modelami: każdy GLB jest inny

Kiedy kolekcja zaczęła rosnąć, pojawił się dużo mniej efektowny problem. Nie każdy model 3D jest przygotowany w ten sam sposób. Jeden ma osobno lewe przednie koło, prawe przednie koło, oba tylne koła i kierownicę. Inny ma wszystkie koła połączone w jeden mesh. Jeszcze inny ma osobne koła, ale ich pivoty znajdują się w środku całego samochodu. To oznaczało, że ręczne konfigurowanie każdego modelu szybko stałoby się największą wadą systemu.

RACECRAFT CONTROL — własny CMS modeli

Rozwiązaniem został własny panel administracyjny. Nie jest to WordPress. Nie ma bazy MySQL. Źródłem danych kolekcji jest plik JSON. Panel umożliwia między innymi:

• upload GLB,
• dodawanie i edycję samochodów,
• publikowanie i ukrywanie modeli,
• ustawianie samochodu startowego,
• konfigurację oświetlenia,
• wybór profilu dźwięku,
• credits i licencje,
• konfigurację elementów Drive.

Od tego momentu nowe auto można dodać bez dotykania kodu aplikacji.

Model Inspector

Ręczne wpisywanie nazw obiektów z GLB nadal byłoby niewygodne. Dlatego CONTROL dostał Model Inspector. Po wybraniu pliku system analizuje strukturę GLTF i potrafi automatycznie odczytać między innymi:

• node'y i meshe,
• potencjalne grupy kół,
• kierownicę,
• osie obrotu,
• problemy z pivotami,
• metadata źródłowe.

Jeśli model zachował odpowiednie metadata, panel może również odczytać autora, stronę autora, źródło, nazwę licencji i adres licencji. Czyli część pól CONTROL potrafi uzupełnić się sama.

Auto-Pivot Engine

Jednym z ciekawszych problemów były modele, które miały poprawnie wydzielone koła, ale niepoprawne origins. Przy zwykłej animacji koło zamiast obracać się wokół własnej osi zaczynałoby krążyć wokół środka samochodu. Zamiast poprawiać każdy model ręcznie w Blenderze, RACECRAFT dostał mechanizm Auto-Pivot. Silnik analizuje bounding box koła, wylicza jego rzeczywisty środek, tworzy niewidoczny pivot, przepina geometrię i animuje nowy punkt obrotu. Sam GLB pozostaje nietknięty. Dzięki temu nawet niedoskonale przygotowane modele mogą zachowywać się poprawnie w Drive.

Renderer też musiał dojrzeć

Na początku na niektórych karoseriach pojawiały się regularne pasy i przebarwienia. Nie był to problem tekstur. Był to klasyczny self-shadowing artifact. Samochód rzucał cień na samego siebie przy zbyt agresywnej mapie cieni. Rozwiązaniem było rozdzielenie logiki. Samochód nadal rzuca cień na podłogę, ale jego materiały nie otrzymują tej samej dynamicznej shadow mapy. Później powstały również różne profile oświetlenia:

• Classic,
• Dark Car,
• Bright Car.

Czarny Mercedes i biały McLaren po prostu nie powinny być oświetlane w identyczny sposób.

Loader, który nie może zawiesić całego doświadczenia

Wraz z rosnącą kolekcją pojawił się problem pamięci i losowego zatrzymywania ładowania modeli. Nie zawsze chodziło o wielkość GLB. Ten sam plik raz ładował się natychmiast, a innym razem request mógł zatrzymać się bez błędu. Loader dostał więc:

• watchdog braku postępu,
• timeout,
• automatyczny retry,
• kontrolowane zwalnianie tekstur,
• obsługę ImageBitmap,
• ograniczony cache modeli w GPU.

Doszły również osobne etapy:

• Connecting,
• Downloading,
• Decoding,
• Preparing,
• Ready.

Od tego momentu zamiast zgadywać, gdzie aplikacja utknęła, dokładnie wiadomo, na którym etapie wystąpił problem.

SPECIALS — moment, w którym RACECRAFT przestał być tylko F1

Pierwotnie RACECRAFT był archiwum bolidów. Aż pojawił się transparentny model Mercedes-AMG One. Nie pasował do osi czasu F1. Ale wyglądał zbyt dobrze, żeby go nie wykorzystać. Tak powstała sekcja SPECIALS. To osobna część kolekcji dla samochodów i ekspozycji, które nie należą do głównego archiwum Formuły 1. Trafiają tam między innymi:

• hypercary,
• LMH,
• LMDh,
• LMP,
• GT,
• WRC,
• modele X-RAY,
• techniczne przekroje.

Każdy SPECIAL może otrzymać własną etykietę kuratorską i opis ekspozycji. Dzięki temu RACECRAFT z archiwum F1 zaczął przekształcać się w cyfrową galerię motorsportu.

Dlaczego bez WordPressa?

To jedna z ciekawszych decyzji tego projektu. RACECRAFT nie potrzebuje edytora blokowego, systemu wpisów, motywu, WooCommerce, komentarzy ani setek opcji panelu. Potrzebuje natomiast WebGL, GPU, modeli GLB, shaderów, szybkiego JavaScriptu i dobrze kontrolowanej pamięci. Dlatego publiczna aplikacja pozostaje lekkim frontendem. PHP pojawia się wyłącznie w panelu CONTROL. To przykład projektu, w którym brak klasycznego CMS-a jest zaletą architektury, a nie ograniczeniem.

System powstawał podczas realnego używania

RACECRAFT nie został zaprojektowany jednego dnia na podstawie kompletnej specyfikacji. Rozwijał się podczas rzeczywistego używania. Koła obracały się wokół złego punktu? Powstał Auto-Pivot Engine. Modele miały różną strukturę? Powstał Model Inspector. Drive na telefonie wymagał własnego sterowania? Powstał kontroler mobile. Prędkość była widoczna głównie na liczniku? Powstał Formula FX. Brakowało dźwięku? Powstał proceduralny Sound Engine. Ładowanie modelu potrafiło zatrzymać się bez błędu? Loader dostał watchdog i retry. Pojawiły się samochody spoza F1? Powstało SPECIALS. Właśnie taki sposób rozwoju najbardziej lubię. Nie dokładam funkcji dlatego, że dobrze wyglądają na liście możliwości. Dodaję je wtedy, kiedy podczas normalnej pracy pojawia się konkretny problem do rozwiązania.

Od jednego screena do cyfrowego muzeum

RACECRAFT przebył dość absurdalną drogę. Od: „chcę coś podobnego do tego screena” do systemu zawierającego:

• wielomodelowe archiwum,
• timeline,
• Garage,
• Studio,
• Cinematic Details,
• Drive na desktopie i mobile,
• Formula FX,
• proceduralny Sound Engine,
• profile światła,
• Model Inspector,
• Auto-Pivot Engine,
• loader z retry i kontrolą pamięci,
• własny panel CONTROL,
• deep linki do konkretnych modeli,
• sekcję SPECIALS.

A najlepsza część? Projekt nadal może rosnąć. Nowe samochody nie wymagają przebudowy aplikacji. Po prostu trafiają do kolekcji.

Co było najważniejszą lekcją?

RACECRAFT jest dla mnie dobrym przykładem projektu, którego finalnego kształtu nie dałoby się rozsądnie rozpisać na początku. Kolejne funkcje powstawały dlatego, że poprzednia wersja zaczynała stawiać nowe pytania. Skoro można obracać samochód — może warto przygotować kamery. Skoro mamy kamery — może samochód powinien jeździć. Skoro jeździ — powinno być czuć prędkość. Skoro czuć prędkość — powinno ją być słychać. Skoro dochodzą kolejne modele — potrzebny jest panel. Skoro modele są różnie zbudowane — panel musi je analizować. Skoro pojawiają się samochody spoza F1 — potrzebna jest druga kolekcja. I właśnie dzięki temu projekt rozwinął się organicznie w stronę, której na początku nawet nie planowałem.

RACECRAFT

Interaktywne archiwum i cyfrowa galeria motorsportu stworzone przez DIGIKROM.

Zobacz RACECRAFT →