Zaczynałem od tego samego łódki i podróżowałem wieloma drogami webgl, canvas i moim nowym "go-to: svg".
SVG dostarcza wiele elementów, których potrzebujesz, ale wciąż jest w graficznym silniku renderowania, więc wciąż możesz dodać kilka filtrów i efektów, ale warstwy są bardziej statyczne, tak jak powiedziałeś, że chcesz. (nie renderowanie każdego tiknięcia).
W mojej obecnej aplikacji silnik three.js został rozebrany i nie ma już tekstury obrazu (są to elementy 3D przekształcone w html). Mam czystą scenę html + Reakcja i scenę trzy.js, która idealnie pasuje (albo kamera perspektywiczna, albo ortogonalna). To był bardzo długi (zabawny) proces, aby je wszystkie dopasować.
W każdym razie używam tylko pliku three.js do dekoracji 3d (takich jak uchwyty do przechwytywania w celu zmiany rozmiaru elementów). Jest to aplikacja do animacji przy okazji, tak jak edytor 3d w sposób. Zastanawiam się, czy całkowicie usunąć renderowanie 3js (nadal będę używał three.js do tworzenia struktury sceny i wywoływania localToWorld na materiałach, a następnie renderowania go na nakładce svg-- ale nie będę wywoływał renderowania na trzech scenach [Muszę ręcznie zadzwonić do updateMatrixWorld() na wszystko, ale jest to 20 razy szybsze niż renderowanie sceny))
Do renderowania w czasie rzeczywistym, jeśli postać porusza się przez chwilę, wtedy stoi i próbuje aby zaoszczędzić czas na momentach, kiedy tło się nie porusza, nie wiem, czy to właściwe myślenie. Chcesz opóźnienia, kiedy porusza się wystarczająco daleko, aby przewijać tło?
To znaczy, odrzuca, może być szybsze. Three.js musi wczytać duże tekstury do pamięci.Jeśli robisz pewne filtry na tle, wtedy zmiana obrazu w tle i na zewnątrz bufora tekstury byłaby dość powolna, ale są też sposoby na zrobienie tego wszystkiego bez zmiany tekstury.
Prawdopodobnie nie poleciłbym systemu hybrydowego, chyba że wyczerpałeś swoje opcje i chcesz po prostu spróbować czegoś nowego.
Zdecydowanie polecam używanie i uczenie się svg.
Jestem prawie pewny, że w sieci web istnieją hacki, które prawdopodobnie dadzą się lepiej utrzymać na dłuższą metę (utrzymanie dwóch silników jest nieco psychicznie obciążające). To nie jest straszne, a ja naprawdę podoba mi się mój silnik html o wiele lepszy niż mój trójpodziałowy .. ale hmm ..
Czy rozważałeś cały silnik 3d html? Dużo czasu zajęło mi wypracowanie heirarchii i dopóki nie byłam wygodna przy użyciu mnóstwa elementów html (i nie starałam się ich zachować - szybko z dużą ilością)
Moje elementy html są oparte na 0 (zawsze tłumaczymy 50%, 50%, pracując od środka elementu, jak np. trójdźwiękowy, w mózgu jest o wiele łatwiej niż w górnej, lewej orientacji) container anchor mesh children Właśnie z tym poszedłem. Siatka ma zwykle wartość img lub svg. Obecnie większość moich elementów to 0x0. Tylko siatka ma zwykle szerokość. Oryginalnie robiłem dziwne rzeczy, ale teraz jest to prawie jak scena 3j.js, z wyjątkiem elementów html, a ja używałem oryginalnego CSS3dRenderer, ale mój jest równie dobry i łatwiejszy w utrzymaniu (wszystko jest komponentem reagującym)
Każda "rzecz" jest klasą i tworzy te 4 elementy HTML. Tworzy również elementy trójwymiarowe (do robienia przecięć myszy, robienia zdjęć, konwersji między układami współrzędnych itd.).
Interesujące było również wmawianie wszystkiego w redux w rozsądny sposób.
Siatki SVG mają również dzieci (elementy svg).
Być może spodoba ci się wykonanie jakiegoś projektu z reagowaniem i zagnieżdżonymi elementami HTML, przekształceniem 3D i użyciem svg dla elementów + animacji .. ponieważ wiem, że to robię.
Można wstępnie przetworzyć siatki i użyć gif zamiast obrazu lub svg.
Nie wiem. Wydaje się, że chcesz zrobić coś dziwnego, więc imo, gra w reakcji na svg wydaje się dziwna. Założę się, że dostaniesz darmową prasę, ponieważ ludzie będą głosować na wszystko, reagując w niej.
Inną rzeczą, którą powiem, jest to, że po nauce reaguję + redux + niezmienny, cały mój umysł jest inny. Mój silnik trójwymiarowy do aktualizacji rekwizytów jest inny o 10000%. Jest znacznie leniwszy. Może się okazać, że dopiero poznanie nowego systemu obsługi danych i aktualizowanie rekwizytów sprawi, że zobaczysz swój silnik w nowy sposób. Polecam naukę reagowania + redux + niezmiennie, a może nawet uczenie się stosowania ich do pliku three.js.
Inną rzeczą, którą można zrobić, to wielokrotne sceny internetowe, a następnie po prostu nie trzeba renderować warstwy tła, chyba że się porusza.
Ponadto, jeśli patrzysz na wykonanie trasy SVG, zwróć uwagę, że użycie transformacji css jest inne niż przy użyciu transformacji atrybutów (zbudowany dla elementów svg). Firefox i IE nie obsługują elementów svg (takich jak rect, path, circle, itp.), Które są przekształcane w css, ale działa, jeśli używasz tego atrybutu.
Ponadto, animacje css nie są szybsze niż animacje javascript .. nie do końca. Korzystanie z transformacji z translacją lub obrotem 3D lub czymkolwiek innym, to wszystko, czego potrzebujesz do aktywacji karty wideo. Jeśli zrobisz coś takiego, jak transform: translateZ(0), aktywuje się kartę wideo. Nie musisz pisać css, możesz używać javascript, a większość bibliotek tween używa tylko javascript. Nadal będziesz musiał pracować nad wydajnością, ale dobrze jest także robić przejścia w js, więc nie trzeba się zsynchronizować.
Gdybym wysłał cię na misję wizji, powiedziałbym ci, abyś napisał grę 3D w trybie reakcji + redux + niezmienny. A Ty uzyskasz 1000 przegranych na stronach programistów.
To naprawdę zależy od tego, jakie animacje zrobisz ... Niektóre spowodują odświeżenie całej strony w każdej klatce, inne nie. Niektórzy sprawią, że obraz waszego widocznego płótna będzie bardziej złożony, niż gdyby wszystko znajdowało się na jego powierzchni. A w każdym razie będzie to zależeć od implementacji przeglądarki, nie ma prawdziwej ścisłej odpowiedzi, którą można uzyskać. Najlepiej jest wypróbować oba i sprawdzić samemu, na różnych implementacjach. Jedna trzecia metoda, którą można wypróbować, to wideo w tle. – Kaiido
Jasne, że to zależy od animacji przyspieszanych GPU, ale zdecydowanie lepiej jest użyć płótna w moim przypadku. Ale pytałem tylko o akcelerowane przez GPU animacje: transformację i krycie. – tenbits
Pomimo tego, że są wykonywane na GPU, nie oznacza to, że nie wykonają procesu procesora, ani że nie będą miały wpływu na twój js: https://jsfiddle.net/phhpxbq6/ Pamiętaj też, że niektóre operacje na płótnie są również wykonywane na GPU. – Kaiido