PHZ:n Petri Hetta: “3D-visualisaatio Three.js:llä”

Three.js on 3D-visualisaatioiden luomiseen tarkoitettu työkalu. PHZ:n koodaaja Petri Hetta kertoo Three.js:n mahdollisuuksista ja sudenkuopista.

Three.js on JavaScript-kirjasto ja sovellusohjelmointirajapinta, jota käytetään 3D-visualisaatioiden luomiseen verkkoselaimessa. Three.js sopii esimerkiksi projektiin, jossa asiakas haluaa tuotteensa nettisivuilleen esille niin, että sitä voi tarkastella eri asiayhteyksissä 3D-maailmassa.

Three.js:n käyttämisessä 3D-animointiin on paljon mahdollisuuksia mutta myös sudenkuoppia, joista on hyvä olla tietoinen.

Taipuvatko Three.js:n tekniset mahdollisuudet asiakkaan toiveisiin?

Kun lähdetään suunnittelemaan 3D-visualisaatiota, tärkeintä on ensin selvittää, mitä asiakas oikeasti haluaa. Miltä asiakas haluaa, että visualisaatio näyttää?

Asiakkaan toiveet pitää osata sovittaa Three.js:n teknisiin mahdollisuuksiin. Three.js on suhteellisen moderni kirjasto, ja sen valaistusmalli on hyvä. Three.js tukee suurinta osaa nykyään käytetyistä 3D-mallien formaateista. Parhaimmillaan sillä voidaan renderöidä aika hienon näköinen skene.

Kaikkia toiminnallisuuksia ei ole kuitenkaan mahdollista toteuttaa selainpohjaisessa 3D-renderöinnissä. Esimerkiksi kaikilla webin käyttäjillä ei ole 400 euron näytönohjainta, joten malliin ei voida laittaa loputtomasti yksityiskohtia, jos halutaan säilyttää interaktiivisuus.

Three.js:ssä läpinäkyvyys ei vielä toimi kunnolla. Jos visualisaatiossa on paljon läpinäkyvyyksiä peräkkäin, kuten vaikka viisi ikkunaa, joiden läpi pitäisi pystyä näkymään, on teknisesti todella haastavaa saada se toimimaan hyvin Three.js:llä. Myös animaatiot toimivat vain keskinkertaisesti.

Kuinka realistisen näköinen skenestä halutaan?

On tärkeää miettiä, kuinka realistisen näköinen skenestä halutaan. Joskus asiakkaan visio on, että tuote näyttäisi visualisaatiossa täysin samalta kuin vaikkapa markkinointimateriaalissa.

Jos visualisaatiosta halutaan esimerkiksi mahdollisimman valkoinen, se ei ole realistinen näköinen, koska oikea maailma ei ole läheskään valkoinen. Ihmissilmän näkemä valkoinen on todellisuudessa tietyssä valossa melko harmaa.

Realistisen näköisen lopputuloksen saamiseksi 3D-projekteissa käytetään usein tekniikkaa nimeltä Physically Based Rendering, joka jäljittelee todellisen maailman valoisuusolosuhteita.

Kun asiakkaan toiveet ovat selvillä, voi alkaa mallaamaan 3D-skeneä: mihin kukin 3D-objekti menee ja miten kamera liikkuu. Tämä visio kannattaa hyväksyttää asiakkaalla ennen kuin alkaa toteuttamaan visualisaatioon mitään toiminnallisuutta.

Tyypillisimmät virheet 3D-malleissa

Tyypillisin virhe 3D-animoinnissa on se, että itse 3D-mallit, joita visualisaatiossa käytetään, ovat vääränlaisia. Helposti voi käydä esimerkiksi niin, että normaalit ovat väärinpäin, jolloin valo ei heijastu niihin oikein.

Joskus kappaleen materiaali on säädetty väärin tai sitä ei ole ollenkaan. Esimerkiksi muovi käyttää metallista materiaalia.

Myös mittakaava saattaa olla pielessä. Esimerkiksi tuolista onkin tullut nelimetrinen tai rakennuksesta 30 sentin korkuinen.

Koodaajan ei kannatakaan vain sokeasti laittaa graafikon tai asiakkaan antamaa 3D-mallia ohjelmaan. Malli kannattaa avata ja katsoa, että se sopii siihen mitä yritetään tehdä.

Three.js asiakasprojektissa

Käytin Three.js:ää projektissa, jossa oli asiakkaana tuuletuslaitteita myyvä yritys. Yritys halusi ohjelman, jolla sen asiakkaat pystyisivät tarkastelemaan tuuletuslaitteita eri asiayhteyksissä: miltä laite näyttää vaikkapa eri huoneissa?

Ohjelmasta oli jo olemassa versio, jossa oli kuitenkin paljon virheitä. Esimerkiksi render loop, joka piirtää asioita näytölle, oli tehty väärällä tekniikalla. Toteutuksessa ei ollut käytetty selaimen omaa renderöintiajoitusta, minkä vuoksi ohjelma pätki koko ajan.

Ohjelman korjaamisen lisäksi asiakas halusi siihen uuden ominaisuuden: visualisaatiossa tulisi näkyä ilmavirtojen lisäksi äänikuvio, jotta asiakas voisi tarkastella, kuinka kova ääni tuuletuslaitteesta kuuluu.

Hyödynsin äänikuvioiden toteuttamisessa metapalloesimerkkiä, sillä metapallot toimivat periaatteessa samalla kaavalla kuin äänenpaine. Äänikuvioiden lisäyksen jälkeen ohjelmassa näkyivät eri äänenpaineet eri väreillä.


PHZ:n Petri Hetta: “Haluan tehdä monipuolisesti erilaisia projekteja”

Koodaustaustani ulottuu lapsuuteen, kun 10-vuotiaana googletin, miten tehdään peli. Löysin CoolBasic-ohjelmointikielen, ja aloitin pelien koodaamisen sillä.

Pelinkehitys on edelleen lähellä sydäntäni. Pidän sen kuitenkin mieluiten vain harrastuksena, jotta intohimo siihen säilyy.

Työkseni haluan tehdä monipuolisesti erilaisia projekteja. Erityisesti minua kiinnostaa matalan tason projektit, kuten sulautetut järjestelmät. Niitä en ole tehnyt vielä kovin paljon ja haluan oppia niistä lisää.

Olen opiskellut tietotekniikkaa Tampereen teknillisessä yliopistossa. Aloitin koodaajan työt jo opiskeluaikana, ja PHZ:lla aloitin syksyllä 2021.

Kehittäjänä olen tekemiseen keskittyvä: voin tehdä yhtä hommaa pitkäänkin. Vahvimpia ohjelmointikieliäni ovat Java ja TypeScript.

Seuraavaksi aion ehdottomasti opetella Rust-ohjelmointikielen. Alkaa näyttää siltä, että se korvaa C:n ja C++:n, nyt kun Linuxiakin aletaan tehdä Rustilla.


Meillä PHZ:lla on jatkuvasti työpaikkoja auki kokeneille koodaajille. Katso kaikki avoimet työpaikat täältä