3D illustratsioonid e-õppe materjalides 2016

Kahemõõtmelise illustratsiooni, joonise või foto puhul tekib sageli küsitavusi ja mitmetimõistmist. Selgust toob 3D mudeli esitamine. Kasutaja saab seda iga nurga alt vaadata.

Praegusel ajal, aastal 2016, suudavad brauserid 3D objekte näidata ilma igasuguste lisapluginateta. Ka mobiilsete seadmete brauserid saavad 3D sisu näitamisega ilusasti hakkama. Jänni võivad jääda vaid kõige odavamad säästunutikad hinnaga alla 80€.

Millega siis neid 3D illustratsioone luua? Tutvustan avatud lähtekoodiga 3D sisu loomise tarkvara Blender ja sellele loodud WebGL/HTML5 eksporterit Blend4Web. Väljundiks on üksik HTML5 fail, mis sisaldab kõike vajalikku - renderdusmootor, mudelid, tekstuurid, CSS failid ja interaktiivsus javascripti kujul.

Blend4Web on ka avatud lähtekoodiga aga sellest on nii tasuta kui tasuline variant. Tasuta variandi puhul nõutakse publitseerimisel ka algsete Blenderis tehtud 3D tööfailide avaldamist.

Mida see võimaldab lisaks sellele, et see on lihtsalt 3D?

Siinkohal üks näide:

Joonist 3D ruumis liigutades on näha, et enamus tähiseid küll liiguvad 3D ruumis aga on alati suunatud vaataja poole ja seda õigetpidi. Sellise nipi toimimasaamiseks tuleb objektil sisse lülitada omadus "Billboard".

Järgmise nipina juhin tähelepanu numbritele 1 ja 2.

Need liiguvad küll objektiga 3D ruumis kaasa aga teiselt poolt vaadates ei ole need pahupidi. Sellist nippi saab nii, et tegelikkuses ongi seal numbreid topelt, ühel pool ühtepidi ja teiselpool teistpidi. Objekti materjali omadustes saab aga ära määrata, et tagantpoolt vaadates oleks objekt nähtamatu. Tehnilise terminina Material/Rendering Options/"Backface Culling".

Juhin tähelepanu veel sellele, et tähised on selle konkreetse näite puhul alati näha, isegi kui need jäävad mingi objekti taha.

Sellise viguri saab siis, kui lülitada sisse objekti materjali renderdamine kõige peale. Tehnilise terminina Material/Rendering Options/"Render Above All".

Alaservas on näha kirja "download source". Blend4Web võimaldab 3D sisule anda mitmesugust interaktiivsust. Siinkohal on sellest tehtud nupp, mis viitab 3D lähtefailidele ja seega täidab ära Blend4Web tasuta kasutamise tingimuse.

Vaatame järgmist näidet:

Siin on näha infobokse või "lipikuid", millel klõpsates avaneb pikem info objekti kohta.

Selliste vidinate saamiseks tuleb 3D stseeni lisada soovitud kohta objekt "Empty" ja siis selle objekti omaduste alt sisse lülitada Object/Anchors/Enable Anchor ja Meta Tags väljadele saab juba kirjutada selle info, mida seal lipikute peal kuvatakse. Lipikute sisu on olemuselt lihtne html, nii saab näiteks sinna sisse ka html viiteid istutada.

Ka siin on näha varemkirjeldatud "Render Above All" kasutamist - Peeglid ja valguskiired on küll sees aga alati nähtaval. Pole tarvis klassikalist läbilõike joonist valmistada.

Kui klõpsata luugil või päikesepaneelidel, siis on näha, et need liiguvad. Blend4Web võimaldab interaktiivust lisada ka ilma programmeerimiseta, n.ö. visuaalsete "sõlmede" ja "nuudlite" abil.

Siin Blenderi kuvatõmmisel on näha kogu stseeni interaktiivsus:

nuudlid

Kui nüüd veel javascripti oskav programmeerija kampa võtta, siis saab samade vahenditega 3D illustratsioonide loomiselt üle minna juba täiemõõduliste 3D äppide loomiseni.