3. About us
• ThreeDee Media
Framework and tools for creating WebGL rich content
•
•
•
•
Jurjen de Wal – Founder/Managing Director
Maarten Steur – Co-founder/Platform Architect
Maarten Heinstra – 3D Artist
Trevor van Hoof – Tools programmer
4. What is WebGL?
WebGL: real-time 3D rendering
•
•
•
•
•
•
OpenGL ES in a browser
JavaScript API bindings
Supported in nearly all modern browsers
Supported on many devices
Shipped since early 2011
Standard is maintained by Khronos Group
10. How WebGL works
WebGL is a JavaScript drawing API
• Draw to HTML5 canvas element using a (“webgl”) context
•
•
•
•
•
Low-level drawing – buffers, primitives, textures and shaders
Accelerated by graphics hardware (GPU)
Can draw 2D as well as 3D graphics
Integrates seamlessly with other page content
There is no file format; no markup language; no DOM
11. Why use WebGL?
•
•
•
•
•
•
•
Rich internet experiences with hardware-accelerated 3D
No downloads, no plugins
Complete integration with HTML5 page elements
Cross-platform
Rapid development with the right tools
Performance – it’s faster than 2D canvas
Royalty-free - no licensing issues
12. Web 3D is finally here!
• WebGL is solid for developing games and other rich content
• OpenGL ES under the hood (it’s what’s running on your phone
and tablet)
• Huge development, testing and conformance effort by
browser vendors
• Strong standards group maintaining it (www.khronos.org)
• In most browsers and growing number of devices
• A few enhancements will help…
13. Web 3D is finally here!
Adformatie
Jan’14
Emerce Feb’14
14. What do you need to get started?
1. Rendering engine
2. Application functionality
3. Content creation pipeline - 3D tools e.g. Autodesk Maya, Blender
WebGL Game Engines & Tools
•
•
•
•
•
•
•
•
ThreeDee Media
GooTechnologies
PlayCanvas
Turbulenz
Three.js
Verold Studio
Babylon.js (Google)
Scene.js
17. TDM Editor
A 3D scene editor for the web
•
•
•
•
•
•
•
Import 3D assets (drag-drop files)
Assemble 3D scene
Adjust materials, textures, lighting, cameras
Add post-effects
Default Shaders
Publish & share to the web
Powered by TDM Engine
19. Interested in building your own
3D Game?
@ThreeDeeMedia
info@threedeemedia.com
www.threedeemedia.com
Demo time!
Hinweis der Redaktion
WebGL will have a bid impact on the web.We’ve been working on WebGL for the last 2 yearsWe’re building tools to create application and games.Will show some demo’s on the engine we’re building.
At its most basic level, WebGL (Web Graphics Library) is a JavaScript extension that uses the processing power of your Graphic Processing Unit (GPU) to create 3D graphics that update in real time. WebGL is bringing hardware accelerated 3D graphics to modern web browsers. This means you can launch any rich 3D experience in your browser without the need for installing plugins or additional software.WebGL is managed by the not for profit industry consortium The Khronos Group. It is an open technology backed by several enterprise giants such as Apple, Google, Mozilla, Opera, AMD, and NVIDIA.
Virtual Reality Modeling Language (VRML) is een markup-taal waarin driedimensionale objecten kunnen worden beschreven, speciaal ontworpen voor het wereldwijde web. Door middel van een VRML-browserplug-in kan het object dan van alle kanten worden bekeken, geroteerd, in- en uitgezoomd worden enzovoort. Dit maakt het mogelijk driedimensionale scènes via het internet te presenteren zonder dat hier extreem veel gegevens voor moeten worden verstuurd. VRML heeft een opvolger, X3D, die bedoeld is om VRML te vervangen.
Game developement, Advertising (3D mobile advertising), Data visualization, Products, eCommerce, Websites.
Tablet, Games consoles Smart TV
Libraries and frameworks are key to fast ramp up and productive developmentWebGL is a Javascript layer access to the graphics card, as you would have when building native apps
Cross platfrom (sort off)
Web3D is here today – you can start building commercial applicationsIts is not only for big game / development studio’s – it for you.Frameworks like what we’re building is making is accessible.Tools and frameworks are young and evolvingExport from pro tools a bit shakyStill not ubiquitous on mobileDevice input – mouse lock API comingAudio and video API chaosFormats and delivery - streaming, compression, binaryhttp://www.slideshare.net/KhaledMAMOU/gl-tf-siggraph2013
October 2010 – TodayX3D > XML3D > Three.js > TDM.jsThree.js bottlenecksHet voornaamste probleem met Three.js zat in de materials.Het had een aantal built-in materials en een custom shader material en ze werkten allemaal weer net even wat anders. Dit wouden we gelijk trekken, wat wat lastiger was dan gehoopt. Ook de post-processors en controls werkten allemaal net weer anders. Er waren wel mogelijkheden om te importeren, maar het opslaan van een scene was nog niet mogelijk. Kortom, veel mogelijkheden, maar weinig standarizatie.
Arrange your 3D models, adjust materials, textures, lighting, cameras, environment, and post effects to create exactly the scene you want for your game or app.3D scene creation in WebGL, allowing non-technical users to create every aspect of an interactive 3D scene, such as cameras, lights, meshes, materials etc.lab.threedeemedia.com/editor/target/classes/editor.html