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

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

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

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

The team

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

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)

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

Open source Well documented Templates Available in hungarian language OpenCart

Open source Reliable Easy-to-use Sophisticated UV unwrapping

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

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

Extensive library Lots of examples Easy to use Examples: ThreeJS

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

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

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

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

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

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

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

Pávaszem Project

Milestones