1. Félegyházi Tamás 3D Technologies for Web Student Workshop

2. Overview 3D Technologies for Web Student Workshop Pávaszem project Applied technologies Open Cart Blender WebGL Unity Milestones Concept

3. Dennis Gabor Talent Point - creative workshops Lead coordinator of Workshops: Berecz Antónia First english language workshop in GDF 3D Technologies for Web Student Workshop

4. Workshop headteacher: Pavel Hristov Subjects: Responsive design CMS systems VRML, WebGL, X3D, ThreeJS Visualization of 3D objects on a web platform 3D Technologies for Web Student Workshop

5. The team

6. namerole Kaczur Sándor/Berecz AntóniaProject management Morgován DánielWeb shop, web design Bakos Zoltán3D modelling Kovács ÁkosMiscellanous and support Félegyházi TamásPreview application

7. Overview of company: Minarat 2000 kft CEO: Török Tünde A newly formed company, with an established clientele Main profile: Selling textile/drapery Curtains and furniture decoration Pávaszem (a short introduction)

8. Preview application 3D modells Interactivity Adjustable viewpoint Variable textures Different textures to different parts of the same modell Texture catalog Elements can be removed, and uploaded in a user-friendly manner Complete Website Informations Company Products News Webshop Responsive design Preview application Curtains Carpets Furniture With custom textures Specifications

9. Open source Well documented Templates Available in hungarian language OpenCart

10. Open source Reliable Easy-to-use Sophisticated UV unwrapping

11. Web-based Graphics Library HTML Canvas JavaScript Based on OpenGL ES 2.0 History Vladimir Vukićević – 2006 First implementation – 2007 (Mozilla, Opera) WebGL Working Group – 2009 Multitude of libraries accessible – 2016 WebGL

12. Coding is VERY tedious and exhausting Proof 170 lines of code + HTML WebGL - an important note

13. Extensive library Lots of examples Easy to use Examples: http://threejs.org/examples/#webgl_sandbox http://threejs.org/examples/#webgl_loader_collada_kinematics http://threejs.org/examples/#webgl_interactive_voxelpainter ThreeJS

14. Unity 5 – released in March, 2015 Very strong game engine Free to use* Scripts can be written in 3 different languages (C#, JavaScript, Boo) WebGL build can be integrated seamlessly, into the website Object oriented design Unity

15. Pros and Cons ThreeJSUnity LanguageJavaScriptC# Object OrientedNot quiteYes Model ImportingEasyDrag-and-drop* TexturesPossible, fine tuning shaders may require some tweaking Very easy Ray castingRequires some effortEasy Development timemoderateReal fast OtherWill show Unity Logo on Application launch

16. JavaFX is part of JavaSE, since the spring of 2014 Pros Real fast 3D applications With webstart application could be somewhat integrated to the website Uses Java language Cons Model importing requires „3rd party”* libraries Libraries for texturable materials are somewhat lacking A notable alternative

17. Scene consists of GameObjects GameObjects consists of components: Transform (position, rotation, scale) Renderer Mesh Colliders Material Scripts Script lifecycle: OnAwake -> OnEnable -> Start -> Update -> Destroy And many more components available Like: Particle Systems, RigidBody, Audio, Lens flare … Unity

18. IL2CPP compiles.Net (C#, UnityScript) bytecode to C++ Emscripten compiles result to asm.js JavaScript Disadvantages: No threading/IO support Cannot be debugged in Visual Studio Reflection is not 100% supported (System.Refelection.Emit) Unity - WebGL

19. Unity compiles and compresses all Assets, adding new Asset requires rebuild of project Except StreamingAssets Accessing streaming assets is slower then usual Have to use WWW class for downloading the textures Textures loaded through a Coroutine Parenting the texture chooser sidebar to the camera All transforms automatically inherited Sidebar textures need different unlit material Pávaszem Project

22. Scripts Different classes for different events Selection of model Selection of texture Camera script Image loader Asynchronous loading of images Images loaded through manifest file

23. Pávaszem Project

26. Milestones