ThreeJS - 3D grafiikkaa komponenttiin

ThreeJS on Javascript-pohjainen 3D-kirjasto, johon löytyy listaus erilaisia, upeita esimerkkejä. Näinpähän jonkun Youtube-videonkin, missä sillä tehtiin first-person shooter -peli. ^1️⃣

Tuosta edellisestä kappaleesta ensimmäisen lauseen olen kirjoittanut kolmetoista kuukautta sitten. Koska olin saanut aikaiseksi myös seuraavan “demon”, niin tämä blogikirjoitus näkee nyt päivänvalon. Enemmän nyt sitten metakirjoituksena kirjoituksesta kuin 3D-grafiikasta.

Aika nolon näköinenhän tuo on. Mutta ihan itsestään se ei minulta syntynyt. Vuosi sitten oli työpaikan code camp -tapahtuma, jossa mentiin mökille koodaamaan viikonlopuksi. Ajattelin sellaisen tekevän minulle hyvää, jotta tulisi keskityttyä asiaa. Ei se huono ollut, mutta ihmisiä, hauskanpitoa, nuotio, palju ja monta muuta juttua harhauttivat sen verran, että ihan keskeytymätöntä koodausta ja supertuotteliasta flow-tilaa ei määrättömästi kuitenkaan ollut. Ja taisin joutua lähtemäänkin jo tapahtuman puolesta välistä.

Sinne olin kuitenkin itselleni varannut tehtäväksi ThreeJS:ään tutustumisen. Jotain näkyvää nettisivulle oli tavoite ja siinä sinänsä onnistuin, yllä todiste.

Vaikeus ei varsinaisesti ollut tuon grafiikan tuottamisessa niinkään, vaan ThreeJS:n upottamisessa nettisivulle. Eikä kai sekään olisi vaikeaa, mutta nyt tässä minun teknologia-stackissa ja saitin koodissa on niin paljon itselle tuntematonta, että aika perusjututkin menevät harjoitellessa.

Näin vuotta myöhemmin, en juurikaan muista mitä on tullut tehtyä, mutta homma kuitenkin toimii ja blogissa näkyy koodattua 3D-grafiikkaa, niin tästä olisi kätevä seuraavan kerran ponnistaa taas. Nyt kun tuollainen on todistetusti mahdollista, niin on yksi tekosyy vähemmän olla kirjoittamatta tällaisia blogi-kirjoituksia. ^2️⃣

Ihan en muista milloin ja miksi 3D-mallinnukseen ja tekemiseen (nyt tuon edellisen/viimeisen kerran) innostuin. Mahdollisesti pwnisher YouTube -kanava ihastutti. Hän on järjestänyt nyt useita kertoja 3D Challenge kilpailun/tapahtuman/virtuaalieventin, jossa on tavoitteena toteuttaa lyhyt animaatio, joista sitten sata parasta esitellään YouTube videolla. Animaation rungoksi on tehty lyhyt pätkä, raami, jota on seurattava ja siten perättäiset videot näyttävät hauskalta. Luulen, että tämä on ensimmäinen, jonka näin:

Ei voi olla ihailematta ihmisten mielikuvitusta ja aikaa, vaivaa ja panostusta mitä noihin laittavat.

Tätä myöhemmin seurannutta tehtävänantoa silmäillen asensin Unreal Enginen ajatuksella, että olisin koettanut tehdä itse jonkin maailman raamin ympärille. Näin hienoja muut toteuttivat. ^3️⃣ 3D-maailmat ja -videot jäivät Unreal Enginellä toteuttamatta. Osin koska se oli melko hidas ja kankea Macilla silloin, mutta enemmän koska innostus siirtyi jonnekin toisaalle.

Tällaiseen puoli valmiiseen blogi-kirjoitukseensa (tässä tapauksessa ehkä vähän antelias arvio) kun uppoaa, niin ei voi olla ihmettelemättä omaa toimintaa. Instagramissa tuli vastaan quote, joka jäi mieleen.

Pystyn samaistumaan. Helposti. Siitä palkinnoksi tein itselleni tällaisen hyväksyntäleiman. Voisi käydä kirjastossa sen painamassa pinssiksi.

Tätä blogikirjoitusta varten tuli toteutettua Footnote komponentti ja käsittely, jota ilman omaa visiota ei olisi mitenkään voinut toteuttaa. Nyt jälkiviisaana vaikea ymmärtää, miten olen voinut ylipäänsä mitään kirjoittaa ilman sitä. Tuntien määrä tämän kirjoituksen toteuttamisessa ei ole millään tavalla kohtuullinen suhteessa tuotetun tekstin määrään. ^4️⃣

---

1. 1️⃣ Nyt oli sen verran vanhempi video historiassa, etten heti löytänytkään. Mutta jos Youtubesta etsii "threejs first person shooter" hakusanalla, niin videoita löytyi useampiakin - pelien tekeminen sillä on siis enemmänkin kuin mahdollista. Ei ihme että se kiinnosti. Ja toki ne esimerkit on kovin hienoja, tekee mieli seuraavana toteuttaa sellainen (sellaisenaan) sivulle. ↩️
2. 2️⃣ Nuo Bartosz Ciechanowskin blogi kirjoitukset ovat hienoimmasta päästä asioita, joita tiedän. Ei lakkaa hämmästyttämästä se määrä työtä, joka noiden takana on. Tuo interaktiivisuuden upottaminen osaksi blogi-kirjoitusta on äärimmäisen toimiva ja hieno ratkaisu. Tsekkaa jos et usko (TJEU™) 2022 vuodelta kirjoitus Mechanical Watch. Airfoil oli ensimmäinen, johon itse törmäsin ja se on upea kanssa. Exposing Floating Point on yksi ehdottomista lemppareistani.
   
   Nyt tulin sen avanneeksi ja on vielä niin paljon hienompi kuin ajattelin. Opetuksellisena materiaalina ja sen visualisointina, on vaikea tehdä parempaa. Lisäksi liukuluvut-aiheena on vaan niin järjettömän mielenkiintoinen ja elegantti. No minulle ainakin, ei välttämättä uppoa ihan kaikille. Tuo blogi edustaa internetin parasta sisältöä ja kaikki mitä hän on tehnyt on täyttä kultaa. Ehdottomasti ihailtava esikuva. 🤩 ↩️
3. 3️⃣ Tämän tyyppisiä tutoriaaleja katselin tuolloin itse ja jotain erityisen houkuttelevaa on tuolla videoiden tekemisessä. Näyttävät toki hienolta. Mutta ideana tuo, että valmiista asseteista copy/pastetaan upea maailma on siisti. Tulee mieleen 90-luvun puolenvälin tienoilta Corel Draw, johon koulun ATK-luokassa oli lisenssi. Siinä oli suuri kokoelma clip art -kuvia, joilla muistan tehneeni jonkin savanninäkymän. Jotain maagista oli vaan listalta valita eläimiä ja tiputtaa niitä kuvaan ja järjestellä haluamallaan tavalla. Unreal Enginen mukana tuli vielä viime vuonna nuo Quixelin Megascan assetit ilmaiseksi omiin harrasteprojekteihin. Vuoden vaihteesta taisivat muuttua maksullisiksi. Ymmärrettävää, mutta vähän harmi. Multiharrastelijakokeilijoille ^5️⃣ ne näyttivät olevan melkoinen aarreaitta. ↩️
4. 4️⃣ Toki ihan blogin julkaisufrekvenssistä äkkiä on pääteltävissä, että varsinainen kirjoittaminen ei ole tässä se ykkösjuttu. Ennemminkin oma ihmettely, kokeilu, harrastelu ja ongelmien ratkonta. Erinomaisen paljon minulla on ideoita ja toiveita siitä mitä haluaisin kirjoittaa, mutta huomattavan paljon vähemmän halua oikeasti tarttua toimeen ja kirjoittaa. Ongelmien ratkonta sitten monesti tarkoittaa erilaisten toiminnallisuuksien toteuttamista, kun ne ovat muutoin henkisinä esteinä itse kirjoittamiselle. Pitää pystyä ilmaisemaan itseään juuri oikealla tavalla tai sitten ei ollenkaan. Yleensä ei ollenkaan. ↩️
5. 5️⃣ Tästä mental note to self kahdesta kirjasta, jotka ovat pitkään mietityttäneet. Ne voisi etsiä käsiinsä ja lukaista uudelleen. Molemmat olen lukenut jossain 90-luvun alkupuolella.
   
   Ensimmäinen niistä oli ehkä nimeltään Kopiohuumoria tms. ja se oli vain kokoelma faxilla lähetettyjä erittäin varhaisia meemejä. Siellä on yksi kirjoitus joka hauskuutti ja jonka haluaisin löytää.
   
   Toinen onkin haastavampi tapaus. Sen oli kirjoittanut (suomalainen kai) insinöörimies, joka testaili asioita tietokoneella. Löytyi ATK-osastolta silloin. Hän harjoitteli aikaisella CADilla 3D piirtämistä, saattoi koodata jotakin C64:llä ja ainakin pelasi jotain kovin varhaista Microsoftin Flight Simulatoria, mikä minut innosti sittemmin ostamaan Flight Simulator 5 -pelin kun se julkaistiin. Mitään käsitystä ei ole kirjan nimestä tai kirjoittajasta.
   
   Tuota jälkimmäistä en lähde googlettamaan, on vaikeampi tehtävä jollekin toiselle päivälle, mutta ensimmäinen löytyikin heti. Se on Ulla Lipposen "Siistiä sisätyötä: kopiohuumoria" vuodelta 1989 ja löytyy lähikirjaston varastosta. Pitääpä noutaa luettavaksi.
   
   Kadonneista meemeistä puheenollen muistan joskus 2006 tietämissä nähneeni sarjakuvan kirjeenvaihdosta, jossa englantilainen sotaherra piirittää linnaa ja pyytää asiakastuelta neuvoja katapultin kanssa. Kovin hämärä mielikuva siitäkin mutta en ole löytänyt uudestaan muutamista googletus yrityksistä huolimatta. Mikä on jännää, koska internetin ei pitäisi unohtaa. ↩️

---

Cover picture: “ThreeJS Example css3d_sprites” kuvaruutukaappaus ThreeJS demosta.