Keresés

Bemutatkozás

Ez az oldal elsősorban gyereknek készült. Egy általam kitalált programozási nyelvet fordít át WebGL nyelve. Az új böngészők ezt már képesek 3D-ben megjeleníteni.

Az oldal ingyenes, ezért bármilyen támogatásnak örülök. (Megosztás, reklámozás, anyagi támogatás.)

Niethammer Zoltán


PayPal azonosító:
niethammer.zoli@gmail.com 

3D Időkép

Fejlesztés alatt van a 3D időkép vizualizáció, amely az ingyenes adatbázis  alapján élőben mutatja a legfontosabb időjárási adatokat. 

A fejlesztés részleteiről itt olvashatsz: 3d-idokep

AR marker

A marker egy olyan kép, amelyet a kamera 3D viszonyítási pontnak tekint, ha betöltesz egy AR tartalmat. Az oldalon található tartalmak a következő képet használják:

 

AR – kiterjesztett valóság

Webkamerával, vagy a telefon kamerájával megfigyelt valósághoz adjuk hozzá a digitális tartalmat. A kamera mozgatását a 3D digitális tartalomnak követnie kell. Erre a telefonban lévő szenzorok alkalmasak (GPS, mágneses érzékelő, gyorsulásmérő). Tehát amikor fordul a kamera, követi a 3D tartalom is. Ez a fajta AR nagyon sok számítást, és programozást igényel, és nem is könnyű tartalmat létrehozni.

 

Jóval egyszerűbb a marker alapú HTML5 kódolású AR működése. Egy pontosan meghatározott képet, a markert keresi a kamera, mint az arcfelismerő szoftverek. Amint megtalálta, ahhoz viszonyítva képes a 3D tartalmat a képre rajzolni.

Ezen az oldalon ezt a markert használom. Nagyítsd ki, vagy nyomtasd papírra!

 

Hátránya a módszernek, hogy lapos szögben már nem ismeri fel a markert, tehát kb. 30-90 fokos rálátásnál működik. Előnye, hogy sokkal egyszerűbb a kódolása, és a WebGlBasic is képes ilyen tartalmon előállítására.

Nézzük, hogyan készül az AR tartalom!

1. Bejelentkezés

Mivel az elkészült kódot a saját szerverem tárolja, csak bejelentkezett felhasználó készíthet AR tartalmat. Ha szükséged van egyéni azonosítóra, akkor e-mailban kérj tőlem. Használhatod a „teszt” azonosítót is, de akkor mások próbálkozásait is elérheted, illetve időnként törlöm az összes teszt mentést.

 

2. Kódolás

WebGlBasic nyelven megírod a 3D tartalom kódját. Nincs értelme a háttér, a kamera, és az interaktív utasításoknak, mivel a kamerával csak passzív nézők leszünk. A tárgyak animálása sem mindig jó ötlet, mivel pont az a cél, hogy a felhasználó mozogjon a virtuális tárgyak körül.

A jelenetet az XZ sík feletti 10 egységnyi területre kell korlátozni, mert a marker kép a Y=0 síkban lesz.

Érdemes kikapcsolni a beépített fényforrásokat, mert azok nem kerülnek az AR modellbe. Az AR LOGO bekapcsolása segíti a jelenet tervezését, de az sem kerül a mentett modellbe. 

A kódba legalább egy lámpát, és háttérfényt is érdemes berakni, hogy ne legyen sötét része a modellnek.

 

//-------------------------------
// lámpa fehér fénnyel

szín(#ffffff)
hely(10, 10, 0)
lámpa(1,100)

//-------------------------------
// magas háttérfény
ambientlight(0.5)


//------------------------------
// TNT textúrás kocka
anyag()
texture(minecraft2/mine_27.png)
hely(0,3,0)
tégla(3,3,3) DEF KOCKA1


//------------------------------
// zöld textúrás kocka
anyag()
texture(tree/tree002.jpg)
hely(-4,3,0)
tégla(2,2,2) DEF KOCKA2


//------------------------------
// kötelezően AR nevű csoportba kerül
// minde geometria

hely(0,0,0)
csoport() DEF AR
csoport.add(KOCKA1)
csoport.add(KOCKA2)
csoport.vége()

 //------------------------------

// forgás animáció
animáció(AN1,1)
kulcs( 0%, 0, 0, 0)
kulcs( 50%, 0, 180, 0)
kulcs(100%, 0, 360, 0)
animáció.forgás(KOCKA1,AN1)
animáció.forgás(KOCKA2,AN1)

// mozgás animáció
animáció(AN2)
kulcs( 0%, -5, 0, 0)
kulcs( 20%, -5, 6, 0)
kulcs( 50%, 5 , 6, 0)
kulcs( 70%, 5, 0, 0)
kulcs(100%, -5, 0, 0)
animáció.hely(KOCKA2,AN2)

 

 

3. Csoportba helyezés

Amikor jól működik a jelenet, akkor készíteni kell egy „AR” nevű csoportot, és abba kell helyezni az összes objektumot!

hely(0,0,0)
csoport() DEF AR
csoport.add(KOCKA1)
csoport.add(KOCKA2)
csoport.vége()

 

4. Mentés

A konvertálás közben legyen bekapcsolva a mentés. Ekkor 3 db fájlt ment a konvertálás:

-          Magát a forrásfájlt webglbasic nyelven

-          Egy hagyományosan megnézhető 3D tartalmat

-          Egy VR világot, amit csak kamerával lehet megnézni

 

 

5. Marker használata

Szükségünk lesz a marker képre, amit lehetőleg nyomtatott formában helyezünk majd a kamera elé. Ha nincs papír alapú marker, akkor a képernyőn, vagy telefonos is megjeleníthetjük.

6. Megjelenítés telefonon

Be kell tölteni a telefonon egy HTML5 kompatibilis böngészőbe az elmentett AR oldalt. Javaslom a chrome böngészőt, azzal eddig minden jól működött. Az AR oldal címét be is lehet gépelni, de sokkal jobb, ha generálunk egy QR kódot a linkből. Ha a markert, és a QR kódot egy lapra nyomtatjuk, akkor könnyen hordozhatóvá válik a kiterjesztett valóság modellünk.

A példa ezen a címen található: 
https://webglbasic.com/compiler/ar/kano48_ar_tutorial01.html

 

7. Megjelenítés webkamerával

Fejlesztés közben sokkal gyorsabb a webkamerát használni. Csatlakoztassuk a PC-hez, majd a konvertálás után kattintsunk az AR linkre. Új lapon betöltődik a modell, és kérni fogja a kamera engedélyezését. Amint látható a böngészőben az élő kép, akkor már csak a marker felé kell fordítani. A marker lehet papír, vagy egy másik képernyőn megjelenő kép is.

 

Néhány tanács:

- Vagy a kamera, vagy a marker mozogjon. A kettőt együtt nem érdemes, mert eltűnik a kép.

- Előszőr kb. 45 fokos szögben kell a markerre irányítani a kamerát, majd kicsit mozgatni, ha nem látjuk az AR tartalmat.

- A marker egyenletesen legyen megvilágítva. Az árnyékok, vagy a kevés fény zavarják a felismerést.

- Érdemes többféle távolságról kipróbálni a modellt, hogy optimálisan beleférjen a 3D tartalom a kamera látómezőjébe.

 

 

 

 

 

 

 

OBJ import TINKERCAD-ból

A 3D modellezés egyik legnehezebb része a geometria megrajzolása. Ebben a legjobb talán a TINKERCAD. Ingyenesen, online lehet 3D-ben rajzolni, és a végeredményt ki lehet exportálni OBJ formátumú fájlba. Ez a formátum tisztán szöveges, és nagyon egyszerűen olvasható. 

Bővebben: OBJ import TINKERCAD-ból

FPV

A three.js orbit nevű vezérlőjét használtam eddig a modellek körbejárására. Ez kicsit zavaró lehet, ha épületeket akarunk modellezni, esetleg belsőnézetes játékok fejleszteni. Ezért készítettem egy saját vezérlő kódot, ami az orbitális kamerát blokkolja, és a felhasználó a billentyűzettel mozgathatja a kamerát. Így a kamera az XZ sík felett 3 egységgel mozoghat csak.

A kód elején a VEZÉRLÉS(FPV) paranccsal állítható be az üzemmód. Ez még kevés lesz, mert egy kamerát is be kell építeni a start pozícióba: KAMERA(START, 0, 3, 10,   0, 3, 0) A vezérlő kód úgyis Y=3 síkban tartja a kamerát, tehát eleve azt is érdemes megadni. Az X, és a Z szabadon változtató. A példában a kamera a (0,3,10) pozícióban lesz, a nézőpont iránya pedig (0,3,0), vagyis a párhuzamos az alapsíkkal. Nézhet a kamera kicsit lefelé (0,2,0), vagy esetleg felfelé is (0,4,0).

A fordítás után nem működik sem az egérrel történő navigálás (kikapcsoltuk), sem a billentyűzettel történő irányítás (nem aktív a 3D keret). Rá kell kattintani a kameránk gombjára, és utána már működik az FPV navigálás is.

Nem igazán hasznos ez a navigálás sem, ha minden tárgyon szabadon át tudunk menni. Éppen ezért egy új paranccsal szabályozható a kamera, és a tárgy ütközése. Ha bekapcsoljuk az ütközést, akkor az utána következő téglatestek, gömbök, és hengerek akadályozzák a kamera szabad mozgását. A többi geometria még nem használható ütközésre, de folyamatban van ennek a megoldása is.