Keresés

Bemutatkozás

A böngészők képesek webgl 3D tartalmak megjelenítésére is, de a kód megírása felkészült programozót igényel. Ezt az oldalt azért fejlesztem, hogy egyszerű utasításokkal könnyen, és gyorsan lehessen ilyen tartalmakat készíteni programozási tudás nélkül is. 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 

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:

 

Ajánlott oldalak

Kémiai modellek

Egyszerű 3D kémiai modelleket a GÖMB, és a RÚD utasításokkal lehet készíteni. A gömbök méretével, és színével adhatjuk meg az atomokat. A rúd utasítással köthetők össze az atomok. Érdemes minden geometriát egy csoporthoz adni, mert akkor az egészet egyben lehet animálni.

 


Nagyobb atomszám, és kötés esetén sokkal jobb módszer, ha letöltjük a SDF formátumú leírófájlt, ami tartalmazza az atomok koordinátáit, és a kötéseket is. Az SDF fájl tisztán szöveges kódolású, könnyen ki lehet másolni belőle a szükséges sorokat.

Az SDF formátumban szóközökkel pozícionálják az egyes mezőket, tehát nem lehet tetszőlegesen beljebb tolni a sorokat!
Különösen érvényes ez az első sorra, ahol megadja az atomok, és a kötések számát. Ez max. 999 lehet, ezért 100 feletti értékekenél összefolyik a két adat. 
A pirossal jelölt rész az atomok száma, a kékkel jelölt a kötések száma. A sárga részen vannak az atomok koordinátái. Utánuk található az atom jele. 

FONTOS: Ugyanezeket a neveket kell használni a kód elején egyéni névként. Például az oxigént egy piros gömbbel definiáltuk, aminek a neve O. Ezeket a definiáló geometriákat a látómezőn kívül kell elhelyezni, mert ezeket klónozza a megfelelő helye az SDF utasítás. A példában 1000 egységgel az origó fölé helyeztem az összes atomot definiáló gömböt.

 

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.

 

 

 

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!

 

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