Luke J. Li

Niektórzy latają w kosmos, a ty co? A ja nic, ja tylko robię własną planetę. W Three.js Tylko nie mówcie, że wygląda jak wirus. Bo to jest planeta planetowa. No i wygląda prosto, ale musiałem się namęczyć z tym, żeby dało się po kliknięciu rysować te sześciany i rurki w taki sposób, żeby były obrócone zgodnie z powierzchnią kuli. I próbowałem na różne sposoby, a to kombinowałem, żeby brać normalne , dodać do pozycji i wywołać metodę lookAt, ale to jakoś nie działało w każdej sytuacji, czasem kąty były dziwne. Próbowałem też korzystać z obiektów THREE.Spherical, z kwaternionów, czego ja nie próbowałem. Kombinowałem też, jak wydobyć styczną do powierzchni. W końcu nastąpił u mnie paradigm shift. I zamiast rozglądać się na to, co widać gołym okiem, na samą powierzchnię kuli, postanowiłem zajrzeć do samego środka. Bo każda kula ma środek. I zrobiłem tak, że obiekty "patrzą" na środek kuli (mesh.lookAt(0, 0, 0) zakładając, że środek kuli jest w pozycji (0, 0, 0) I oto je...

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...

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...

Projekt, o którym pisałem ostatnio, musi trochę poczekać, bo w międzyczasie wpadłem na pomysł zrobienia gry w Three.js . Wzięło się to z tego, że ostatnio prowadzę rozmowy w sprawie współpracy z firmą, która robi projekt w WebGL i chciałem sobie przypomnieć temat robienia grafiki 3D w JavaScript. I z rozpędu zacząłem grę robić. O grze napiszę później, jednak teraz trochę o samej bibliotece. Ale nie będzie to tutorial, tylko rzut okiem z lotu ptaka. Jaki problem rozwiązuje ta biblioteka? Czy jeśli jest natywne api do robienia 3D w przeglądarce (WebGL), to czy warto w ogóle osobnej biblioteki używać? Czy to taki kaprys, podobny do używania jQuery w 2019 roku? Przecież można pisać w WebGL. Wyrzućmy biblioteki w kosmos! Cóż, z używaniem suchego WebGLa jest taki problem, że tam proste rzeczy robi się w złożony niskopoziomowy sposób. Zróbcie sobie jakiś tutorial, to zobaczycie, że nawet, żeby wyrenderować obracającą się kostkę, trzeba się namęczyć. Więc o ile warto poznać suchego We...

Oto parę screenów z obecnej wersji gry. Zapewne w ukończonej grze grafika będzie nieco inna, bardziej dopracowana (nie wiem co z pingwinem zrobić - najpierw był w formie sprajta. Później przerobiłem na kulkę, ale też jakos dziwnie wygląda).

Ogarniam ostatnio Three.js . Piekielnie fajną bibliotekę do natywnej grafiki 3D w przeglądarce (wewnętrznie biblioteka korzysta z WebGL). W dość prosty sposób można stworzyć obiekt sceny 3D, dodać do niego obiekty, światła, kamerę, potem jakieś animacje. Tu jest link do tego, co można w tym zrobić: Three.js - przykłady (wymagają przeglądarki obsługującej WebGL ). Wietrzę w tym dużą przyszłość. Udało mi się już zaimportować prosty model z Blendera - jest to tego specjalna wtyczka: wtyczka do eksportu/importu Blender-Three.js niestety jeszcze nie udało mi się zaimportować do końca materiałów (ale może dlatego, że samego Blendera nie ogarniam zbyt dobrze, i nie wiem czy przypisałem dobrze materiały i tekstury w Blenderze). No ale że Three.js to jedynie silnik graficzny, renderer - to można robiąc swoją aplikację podpiąć pod to różne inne biblioteki - ja podpiąłem zewnętrzny silnik fizyki Chipmunk, o którym pisałem poprzednio (z tym, że on nie jest do 3D akurat, tylko do 2D). Wi...