Keskustelu: Nettisivujen teko: Javascript ja 3d

Tullu tässä kokeiltua tehdä muutama peli js:llä, mutta nyt olisi idea tehä 2d:n sijasta 3d:tä.

Olen ajatellut tarvitsevani x, y ja z akselit ja laskea sijainnit kahdella kolmiolla. Parempia vaihtoehtoja? Toimisiko näin käytänössäkin?

Itse ongelmaan: Ajatuksena olisi tehdä erittäin monta diviä (vai onko canvas opettelemisen arvoinen vaihtoehto?) ja näille laskea värit, mutta en keksi miten lasken tämän :(

Kopioi tuolta tj.: http://lumpio.dy.fi/js/s3d/

Kyllä se canvas kannattaa opetella, jos aiot saada pelisi päivittymään edes pari kertaa sekunnissa.

Laskeminen vaatii hyvää ymmärtämistä analyyttisesta 3D-geometriasta ja vektoreista, joten eipä muuta kuin sini, kosini, pistetulo ja ristitulo taas muistiin ja kynä käteen — sillä niitä kaavoja on helpointa kirjoitella uudestaan ja uudestaan. Ei kannata lähteä linjalle "kokeilenpa tällaista kaavaa, jos vaikka toimisi", vaan ihan järjen kanssa saapi laskeskella asiat läpi. Kokeiluvaiheessa oletuksena pitäisi olla, että kaava on oikein laskettu ja toimii. (Tietenkin on mahdollista kopioida joistain valmiita koodeja, mutta on ehkä antoisampaa oppia jotain itsekin.)

Ensimmäinen päätettävä asia on, aiotko käyttää rasterointimenetelmää, jossa siis lasketaan, mihin kohti tietyt asiat pitää piirtää, vai jotain valonsäteiden kulkuun perustuvaa, jossa lasketaankin, mitä tietyssä kohti näkyy. Nämä ovat lähestymistapoina hyvinkin erilaiset.

Värien laskemisessa pääsetkin sitten miettimään myös, kaipaatko jonkinlaisia tekstuureja vai riittääkö vain värillisten kappaleiden piirtäminen. Valaistuskin on taas yksi laskettava asia, ja siinä kannattaa perehtyä muutamaan perussääntöön valon heijastumisesta.

Metabolix kirjoitti:

Laskeminen vaatii hyvää ymmärtämistä analyyttisesta 3D-geometriasta ja vektoreista, joten eipä muuta kuin sini, kosini, pistetulo ja ristitulo taas muistiin ja kynä käteen — sillä niitä kaavoja on helpointa kirjoitella uudestaan ja uudestaan. Ei kannata lähteä linjalle "kokeilenpa tällaista kaavaa, jos vaikka toimisi", vaan ihan järjen kanssa saapi laskeskella asiat läpi. Kokeiluvaiheessa oletuksena pitäisi olla, että kaava on oikein laskettu ja toimii. (Tietenkin on mahdollista kopioida joistain valmiita koodeja, mutta on ehkä antoisampaa oppia jotain itsekin.)

Tossa tulikin laskesteltua ja pääsin tuohon ensimmäisessä viestissäni selittämään tapaan. Olisi ajatus tehdä itse 100%, jos vaan skillit riittää.

Metabolix kirjoitti:

Ensimmäinen päätettävä asia on, aiotko käyttää rasterointimenetelmää, jossa siis lasketaan, mihin kohti tietyt asiat pitää piirtää, vai jotain valonsäteiden kulkuun perustuvaa, jossa lasketaankin, mitä tietyssä kohti näkyy. Nämä ovat lähestymistapoina hyvinkin erilaiset.

Kuulostaa aikas monimutkikkaalta, mutta tarvii kattoo jos jotakin tajuaisin.

Tuli tossa mietyttyä tota rasterointia ja tahtoisin varmistaa, että meneekö se näin:
1. Valitsen pikselin.
2. Lasken mitkä kaikki 3d-koordinaatit ovat tämän pikselin kohdalla.
3. Menen kaikki 3d-koordinaatit läpi ja otan talteen lähimmän jossa on jotakin.
4. Katson tietokannasta mikä on tämän objektin väri.
5. Laitan valittuun pikseliin kyseisen värin.

Itse olen kerran tehnyt homman ja väänsin sen seuraavasti:

Piirrä kuva kamerasta(kameran linssistä), kalvosta ja kohteesta, esim ukosta. Tämän jälkeen lasket missä kohdin ukon pikselit läpäisevät kamerankalvon. Kamerankalvon voi sitten suoraan piirtää näytölle, kun kaikki objekteissa olevat pikselit ovat laskettu. Tämä on vain yksi tapa ja varmaan hidas, jos on paljon pikseleitä.

ps.
Jos haluat kuvan, että voisit ymmärtää paremmin, niin voin piirtää tarvittaessa.

Rasterointi menee kyllä juuri toisin päin:
1. Otetaan kolmio.
2. Lasketaan kunkin kärjen 2D-sijainti ruudulla.
3. Lasketaan jokaiselle 2D-kolmion pikselille käänteisesti taas 3D-koordinaatti.
4. Jos pikselin aiempi arvo oli kauempana kuin uusi, korvataan se uudella värillä.

Ray casting toimii kuvaamallasi tavalla, eli valitaan pikseli ja katsotaan, mikä objekti osuu kohdalle.

Ray tracing on tästä laajennettu versio, jossa tämän säteen kulkua seurataan pidemmältä matkalta eli huomioidaan myös heijastusten yms. vaikutus.

Englanninkielinen Wikipedia on hyvä paikka lukea näistä perusasiat.

Paulus M kirjoitti:

Itse olen kerran tehnyt homman ja väänsin sen seuraavasti:

Piirrä kuva kamerasta(kameran linssistä), kalvosta ja kohteesta, esim ukosta. Tämän jälkeen lasket missä kohdin ukon pikselit läpäisevät kamerankalvon. Kamerankalvon voi sitten suoraan piirtää näytölle, kun kaikki objekteissa olevat pikselit ovat laskettu. Tämä on vain yksi tapa ja varmaan hidas, jos on paljon pikseleitä.

ps.
Jos haluat kuvan, että voisit ymmärtää paremmin, niin voin piirtää tarvittaessa.

Kuva olisi ihan kiva kyllä :)