TETRA HTML5. Gebruikersgroepvergadering 15 mei 2014, Gent

Transcriptie

1 TETRA HTML5 Gebruikersgroepvergadering 15 mei 2014, Gent

2 Agenda Pilootcase Yappa - Showroomr 3D CMS Verspreiding technologie Varia Planning

3 Pilootcase Yappa - probleemstelling Initieel: visualisatie grondplan (winkel, ) Grondplan: dynamisch aanpasbaar Aanvulbaar met extra info: video, tekst, Hulplijn => verkoper vragen Routebepaling Locatie opvragen / delen o Indoor locatiebepaling

4 Pilootcase Yappa - probleemstelling Probleemstelling werd verbreed Meer generieke oplossing Toepasbaar op o.a. Kristalpark Lommel, begraafplaats,... 3 cases o Gebouw (kantorencomplex, school / universiteit, shoppingcentrum) o Winkel / magazijn / o Ruimtelijk gebied (buurt, industrieterrein, natuurgebied, )

5 Pilootcase Yappa - Analyse Communicatie met back-end / alles lokaal / offline modus met synchronisatie (Indoor) Locatiebepaling o ibeacon / Estimote o QR code o Experimentele opties (Indoor Atlas) Grafische aspecten => niet de focus Mobile aspect => responsive design?

6 Pilootcase Yappa Locatiebepaling in de winkel Eerste versie o o Kaartje QR-codes om locatie aan te geven => scanner app Resultaten met magnetisch veld waren niet naar wens

7 Pilootcase Yappa - Showroomr Data wordt momenteel ontsloten via back-end communicatie Responsive design aan front-end kant Embedded in Android project voor integratie QR-code scanner

8 Pilootcase Yappa - Showroomr Bovenop kaart van de winkel, die kan geüpload worden => grid Wordt gebruikt om obstakels aan te geven, deze kunnen bovenop de kaart getekend worden Routebepaling Generiek genoeg voor gebouw, terrein, Uitdaging met meerdere verdiepingen

9 Pilootcase Yappa - Showroomr Volgende stappen: o Clickable hotspots => audio, video,... o 3D content => work in progress o Andere mogelijkheden voor locatiebepaling: ibeacon, Estimote, NFC => niet nader bestudeerd in dit project o Voor- en nadelen app versus puur html5 Bv. nood QR code scanner

10 Pilootcase Yappa - afbeeldingen

11 Pilootcase Yappa - afbeeldingen

12 Pilootcase Yappa - uitbreidingen Stand van zaken Uitwerken generieke versie => is afgewerkt o Breed toepasbaar o Code is generiek opgebouwd = Reverse lookup => wordt momenteel geïmplementeerd Kan dienen als basis voor andere cases Wordt toegepast op Stad Lommel (stagiair) o Begraafplaats

13 Agenda Pilootcase Yappa - Showroomr 3D CMS Verspreiding technologie Varia Planning

14 3D CMS Administrator kan 3D scene opstellen o Editor in browser Opslag in centrale database Gebruikers kunnen 3D scene verkennen Interactie met 3D wereld: o Tekst o Foto s o Webpagina s o Video

15 3D CMS Administrator kan 3D scene opstellen o Editor in browser Opslag in centrale database Gebruikers kunnen 3D scene verkennen Interactie met 3D wereld: o Tekst o Foto s o Webpagina s o Video

16 3D CMS - doel Gebruiken voor: Zaalplan voor beurzen Grondplan voor evenementen (festivals, ) Interieur winkel/magazijn Grondplan industriële site Focus op herbruikbaarheid

17 3D CMS - admin functionaliteit Overzicht beschikbare assets Toevoegen 3D model, material, texture aan database Invoegen aan scene o 3d model o Lichtbron o Startpunt voor user

18 3D CMS - admin functionaliteit Verplaatsen objecten in scene (positie, rotatie, scale) 3D model in scene aanpassen: o Material (diffuse, specular, emission, ) en texture o Collider (kan je door het obbject lopen of niet?) o Zichtbaarheid o Shadow caster o Behavior (klikbaar, animatie, )

19 3D CMS - user functionaliteit Bezoek scene via hyperlink Kiezen viewpoint o Bird s eye o First person Camera Rondwandelen Interactie met objecten o Klikken op object Pathfinding? Afhankelijk van timing wordt dit al dan niet uitgewerkt

20 3D CMS - back-end Gebaseerd op PHP (CodeIgniter RESTful server) MySQL als database server

21 3D CMS - back-end

22 3D CMS - front-end Babylon JS o Uitgebreide render engine Collision detection ingebouwd Geen Wavefront obj ondersteuning (enkel via exporter programma) o Enkel ondersteuning voor Babylon formaat >> Client side obj importer ontwikkeld (maakt het mogelijk om vanuit de meest courante 3D-programma s objecten te importeren)

23 Babylon JS Game engine? o <> render engine >> enkel renderen van objecten Meerdere componenten: o o o o o o Render engine Physics engine (o.a. collision detection) Scripting Animation Sound

24 Babylon JS - code //get canvas var canvas = document.getelementbyid("babyloncanvas"); //Babylon var engine = new BABYLON.Engine(canvas, true); //scene var scene = new BABYLON.Scene(engine);

25 Babylon JS - code //camera var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene); scene.activecamera.attachcontrol(canvas); //light var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(-0.75, -1, -0.5), scene);

26 Babylon JS - code //add box var box = BABYLON.Mesh.CreateBox("box", 3.0, scene); var material = new BABYLON.StandardMaterial( material1", scene); box.material = material;

27 Babylon JS - code // Once the scene is loaded, just register a render loop to render it engine.runrenderloop(function () { scene.render(); });

28 Babylon JS - physics Collisions? o Wanneer raken twee objecten mekaar? o scene.collisionsenabled = true; o box.checkcollisions = true; Zwaartekracht? o Voorlopig enkel op camera o camera.applygravity = true;

29 Babylon JS - code Picking o o o Object uit de scene selecteren Muis >> raycast in 3d >> object var pickresult = scene.pick(evt.clientx, evt.clienty);

30 Nieuwe ontwikkelingen - WebGL Unreal Engine 4 Unity 5: one click WebGL deployment Dit zijn ver ontwikkelde game engines die veel gebruikt worden in de 3D en gaming wereld (inclusief 3D editor en script editor) Zullen beiden export functie voor WebGL aanbieden C# en C++ code worden via ASM.JS parser omgezet naar JavaScript

31 Agenda Pilootcase Yappa - Showroomr 3D CMS Verspreiding technologie Varia Planning

32 Verspreiding technologie Cegeka Knowledge Sharing Meeting Research Dag PXL FeWeb on tour CoderDojo Belgium Opleidingsonderdeel Special Topics in IT 2 AppsCity: vandaag ;-)

33 Cegeka Knowledge Sharing Meeting 5 november 2013 Strategische samenwerking Cegeka - Hogeschool PXL Uitwisseling ervaringen en expertise Cegeka werknemers Toelichting project + partners voor de aanwezigen Nieuwe features HTML5 10-tal collega s PXL was eveneens aanwezig

34 Research Dag PXL 15 november 2013 Interne onderzoeksdag Postersessie Poster HTML5 werd uitgebreid toegelicht voor de aanwezigen, waaronder Vlaams Minister van Innovatie, mevrouw Ingrid Lieten

35 FeWeb on Tour Beroepsfederatie internetprofessionals Jaarlijkse ronde PXL-IT Research werd via 10-tal slides voorgesteld Lopende projecten, waaronder HTML5, werden in detail voorgesteld, samen met partners en doelstellingen.

36 CoderDojo Hasselt PXL UHasselt HTML groepje Melding project en partners

37 Opleidingsonderdeel Special Topics in IT2 Studenten 3e jaar applicatie-ontwikkeling Enkele relevante, recente topics 9 weken, HTML5, CSS3, JavaScript 3 weken: focus op Canvas element Project Alle studenten hebben hierdoor kennis van HTML5 technologie

38 Agenda Pilootcase Yappa - Showroomr 3D CMS Verspreiding technologie Varia Planning

39 Varia Geïntegreerd project o o o Editor voor HTML5 video content + annotations Uitgewerkt als extra opdracht voor student die langdurig ziek is geweest DEMO Stage Werkt momenteel verder op basis van de generieke versie (Locator) Integratie gegevens stad Lommel (begraafplaatsen) Werkt daarnaast ook nog aan aantalkleinere opdrachten in de rand van lopende projecten

40 Agenda Pilootcase Yappa - Showroomr 3D CMS Verspreiding technologie Varia Planning

41 Planning Afwerking Pilootcase Yappa / Stad Lommel Afwerking 3D CMS