1st OpenGL and WebGL Meetup
Khronos Benelux Chapter
Amsterdam
February 13, 2014
Developing Web Graphics with WebGL
About us
• ThreeDee Media
Framework and tools for creating WebGL rich content

•
•
•
•

Jurjen de Wal – Founder/Managing D...
What is WebGL?
WebGL: real-time 3D rendering
•
•
•
•
•
•

OpenGL ES in a browser
JavaScript API bindings
Supported in near...
What ≠ WebGL?

Ehh no, it’s not Stereoscopic 3D...
History of WebGL
What can you do with WebGL?

Source: http://www.awwwards.com/22-experimental-webgl-demo-examples.html
WebGL Support

Source: http://beta.caniuse.com/#feat=webgl
Who has WebGL

Personal computer

Smartphone

Source: http://webglstats.com
How WebGL works
WebGL is a JavaScript drawing API
• Draw to HTML5 canvas element using a (“webgl”) context

•
•
•
•
•

Low...
Why use WebGL?
•
•
•
•
•
•
•

Rich internet experiences with hardware-accelerated 3D
No downloads, no plugins
Complete int...
Web 3D is finally here!
• WebGL is solid for developing games and other rich content
• OpenGL ES under the hood (it’s what...
Web 3D is finally here!

Adformatie
Jan’14

Emerce Feb’14
What do you need to get started?
1. Rendering engine
2. Application functionality
3. Content creation pipeline - 3D tools ...
1.0

Back to 2011...
?
TDM Engine
HTML5 and WebGL based graphics engine

Engine Features:
•
•
•
•
•
•
•

Modular
Animation (key frame, skeletal)
...
TDM Editor
A 3D scene editor for the web

•
•
•
•
•
•
•

Import 3D assets (drag-drop files)
Assemble 3D scene
Adjust mater...
WebGL (Re)sources
• http://www.khronos.org/webgl/
• http://learningwebgl.com/blog/
• http://tonyparisi.wordpress.com/

@py...
Interested in building your own
3D Game?
@ThreeDeeMedia
info@threedeemedia.com
www.threedeemedia.com

Demo time!
Upcoming SlideShare
Loading in …5
×

Introduction to WebGL - 1st WebGL meetup Amsterdam

850 views

Published on

Slides from the 1st OpenGL & WebGL Meetup in Amsterdam hosted by Khronos Group BENELUX chapter.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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
  • Questions?lab.threedeemedia.com/tutorial/TD01_Build/Build/index.htmllab.threedeemedia.com/editor/target/classes/editor.html
  • Introduction to WebGL - 1st WebGL meetup Amsterdam

    1. 1. 1st OpenGL and WebGL Meetup Khronos Benelux Chapter Amsterdam February 13, 2014
    2. 2. Developing Web Graphics with WebGL
    3. 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. 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
    5. 5. What ≠ WebGL? Ehh no, it’s not Stereoscopic 3D...
    6. 6. History of WebGL
    7. 7. What can you do with WebGL? Source: http://www.awwwards.com/22-experimental-webgl-demo-examples.html
    8. 8. WebGL Support Source: http://beta.caniuse.com/#feat=webgl
    9. 9. Who has WebGL Personal computer Smartphone Source: http://webglstats.com
    10. 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. 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. 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. 13. Web 3D is finally here! Adformatie Jan’14 Emerce Feb’14
    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
    15. 15. 1.0 Back to 2011... ?
    16. 16. TDM Engine HTML5 and WebGL based graphics engine Engine Features: • • • • • • • Modular Animation (key frame, skeletal) Input (Keyboard, Mouse, Accelerometer, Touch, etc) Dynamic lighting Post-effects Integrate external libraries (Physics, Sound) Documentation & Resources
    17. 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
    18. 18. WebGL (Re)sources • http://www.khronos.org/webgl/ • http://learningwebgl.com/blog/ • http://tonyparisi.wordpress.com/ @pyalot @mrdoob (Three.js) @alteredq @auradeluxe @Tojiro
    19. 19. Interested in building your own 3D Game? @ThreeDeeMedia info@threedeemedia.com www.threedeemedia.com Demo time!

    ×