Luke J. Li

Przepisałem na nowo swój silnik 3D. Już dwa tygodnie temu i teraz rozwijam. I trochę zmieniam zdanie w kwestii tego, co jest najtrudniejsze. Napisałem wcześniej: (najtrudniejsze są chyba przeliczenia matematyczne. No i optymalizacja. Nie zawsze wiem, dlaczego mam spadek FPSów na przykład). Teraz myślę tak - tych obliczeń matematycznych wcale nie ma tak dużo (przynajmniej do tej pory). Optymalizacja też jest dość prosta (przynajmniej do tej pory udało mi się zrobić jakąś tam podstawową optymalizację - np. instanced rendering, trzymanie w pamięci raz utworzonych buforów i listy obiektów do renderingu (zamiast tworzyć to co klatkę) itp. Jednak silnik się powoli rozrasta i zaczynają mieć znaczenie decyzje projektowe - jak coś zrobić nie od strony technicznej, tylko od strony architektury. Tak, żeby silnik był elastyczny, ale jednak prosty, i nie przeinżynierowany. Abstrakcje są potrzebne, ale trzeba wyczuć, jakie to abstrakcje. Wydawać by się mogło, że pierwszą rzeczą, jaką należał...

Three.js stało się w pewnym momencie tym, co mnie ogranicza + zacząłem odczuwać zmęczenie tą biblioteką. Szanuję za same możliwości, jakie ta biblioteka daje (bo jednak ułatwia sporo pisanie w 3D), to uważam, że nie jest ona zbyt przyjazna dla użytkownika, tak z perspektywy developer experience. No i też kwestia dopasowania do potrzeb. Zacząłem mieć trochę większe potrzeby jeśli chodzi o 3D i nawet pisząc w Three.js musiałem się namęczyć i sporo napisać kodu, żeby coś zrobić. Plus świadomość narzutu, tego, że jednak bundle trochę zajmuje, że jednak biblioteka robi masę rzeczy "pod spodem" itp. itd. To wszystko spowodowało, że postanowiłem więc iść dalej i uczyć się czystego WebGLa. Mam pełną wolność, co robię. Chociaż ogranicza mnie póki co brak umiejętności. Uczę się dopiero około tygodnia. No, co prawda pisząc w Three.js napisałem też kilka shaderów, więc to jakaś wprawka. Kiedyś też jakieś HelloWorld napisałem w WebGL. Ale ogólnie jest to dla mnie nowość. I intensywnie k...

Założyłem nowego bloga: blog.jsbe.fun Będzie on różnił się od tego, że będzie po angielsku i będą bardziej konkretne notki. Konkretne, tzn. na przykład opisujące konkretną bibliotekę, konkretne problemy techniczne i sposób ich rozwiązania, przykłady kodu itp. Przynajmniej taki mam zamysł, ale to będzie ewoluować jeszcze Tego bloga dalej będę pewnie prowadził, chociaż powiedzmy sobie szczerze, że rzadko tu piszę ostatnio. Ale pewnie jeszcze niejedną rozkminę napiszę. Natomiast teraz JS be fun! będzie tym blogiem, na którym będę chciał się skupić i tworzyć content bardziej regularnie - na pierwszy rzut idzie biblioteka Plotly.js , która pozwala robić fajne wykresy.

Nie samym 3D człowiek żyje :) Czas na mapy. Ostatnio zacząłem poznawać bibliotekę o nazwie OpenLayers . Generalnie polega to na tym, że tworzysz mapę z takich warstw. Dlatego nie dziwne, że nazwali to "layers". Masz np. warstwę, która ci nakłada samą mapę, masz warstwę, która nakłada ci nazwy ulic i tak dalej. Czyli elastyczne, szczególnie biorąc pod uwagę, że warstwy mogą być z różnych źródeł. Np. możesz zaimportować warstwę mapy z OpenStreetMaps. I to działa z pudełka. Nie trzeba żadnego konta zakładać, czy tokenów (nie wiem, czy na OSM trzeba to robić, ale w Google Maps kiedyś pisałem i trzeba było się w to bawić). No i też są różne ciekawe źródła map, np. Stamen. To jest mega. Tak jakby ktoś malował coś: I tu macie przykład na żywo tego Stamen . Dużo jest też innych przykładów . Wygląda na to, że dużo da się zrobić w tej bibliotece. I wydaje się w miarę łatwa do ogarnięcia (chociaż tylko godzinę spędziłem w weekend na jej ogarnianiu, ale już po 13 minutach udało...

Co do Three.js - wiele rzeczy nie ogarniam xD Np. materiałów do końca nie umiem robić. Bo jest zbyt wiele rodzajów i parametrów, ostatnio próbowałem się w to zagłębić (będę o tym jeszcze wspominał w kolejnych notkach). I kiepsko mi idzie budowanie własnych shaderów, no ale na szczęście być może nie będzie to aż tak bardzo potrzebne, bo teraz są node materials, że łączysz wiele materiałów w taki graf (podobnie jak w Blenderze). Wśród materiałów szczególnie lustro czy szyby - to fajnie wygląda, a nie za bardzo mi się to udawało, jak próbowałem robić. Ogólnie też miałem problem z eksportem z Blendera do Three.js i załadowaniem poprawnie siatki (tj. materiały się rozjeżdżały i np. szyby nie były przezroczyste. Albo tekstury wyglądały dziwnie, tak jakby miały inne mapowanie UV). Pewnych rzeczy z matmy nie ogarniam, np. kwaternionów ( Quaternion ). Widziałem w źródłach, że ludzie ich używają do obrotów, a ja póki co jadę na obiektach Euler , które ponoć są mniej elastyczne. Buffer geo...

Three.js to cool biblioteka, można w niej robić grafikę 3D. Lans na całego. Ale React to też lans, bo jakieś tam SPA, czy coś tam można robić, takiego bardziej "profesjonalnego", więc też warto pokazać znajomość Reacta, prawda? Cóż, miałem niedawno rozmowę o pracę, w której poproszono mnie o stworzenie projektu od zera w Three.js i wyświetlenie czegoś na ekranie. Proste prawda? Niby tak, ale i tak co chwila coś się nie chciało wyświetlić (wiadomo jak to jest z Three.js. Zapomnisz o czymś, np. o dodaniu światła i masz czarny ekran). I tak przez około godzinę. Czułem, że wypadam bardzo źle. No ale na codzień nie piszę projektów od zera, tylko wykorzystuję już istniejący kod. Jednak rozmowy o pracę to dość specyficzna sytuacja, gdzie robi się rzeczy odrealnione od tego, co się naprawdę robi i w sytuacji sztucznych ograniczeń . Więc przypuszczam, że wypadłem źle. Przypuszczam, bo nie dostałem jeszcze odpowiedzi. Kto wie, może akurat się mylę i dobrze wypadłem? :) edit: Aku...

Ostatnio (od stycznia) mocno wszedłem w temat Three.js. Masę rzeczy się nauczyłem. No i zrobiłem taki edytor . chociaż on jeszcze nie skończony jest. Tylko, że w międzyczasie inne pomysły mnie naszły, więc z jednego projektu w Three.js zrobiłem kilka projektów. Wydzieliłem "silnik" oraz rzeczy specyficzne dla projektu i jakby robię kilka apek na jednym silniku (nawet w jednym repo wszystko jest, tak wygodniej). Poza tym: nauczyłem się operować na wierzchołkach, tworzyć własną geometrię. W ten sposób tworzę teren: https://github.com/hex13/tileterrain/ . Jest on inspirowany terenem, jaki miały gry izometryczne z lat 90 stworzyłem własny shader. I dzięki temu mam inny kolor terenu na różnych wysokościach (na górze śnieg, niżej skały, niżej trawa, a najniżej piasek). A przedtem to shaderów się bałem. poznałem wiele dziwactw Three.js. Niestety jest to biblioteka, która ma wiele rzeczy nieintuicyjnych i trzeba naprawdę uważnie czytać dokumentację + uczyć się na własnych błęda...