WebGL (Web Graphics Library)
A JavaScript API for rendering interactive 3D
computer graphics and 2D graphics within any
compatible web browser without the use
of plug-ins
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
What is WebGL
• WebGL enables web content to use an API based on OpenGL ES 2.0 to
perform 3D rendering in an HTML canvas in browsers that support it
without the use of plug-ins.
• WebGL programs consist of control code written in JavaScript and special
effects code (shader code) that is executed on a computer's Graphics
Processing Unit (GPU).
• WebGL elements can be mixed with other HTML elements and
composited with other parts of the page or page background.
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
How will affect web browsing?
• WebGL will enable iOS-like applications to function on the web
• WebGL elements can be mixed with other HTML elements
• WebGL can also enable some typically non-web based programs to
run on the cloud
Cinema4DUnity3D
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
History of WebGL
• Version 1.0 of the WebGL specification was released March 2011
• Development of the WebGL 2 specification started in 2013
• Latest update: 2 February 2016
• https://www.khronos.org/registry/webgl/specs/latest/2.0/
Major browser vendors Apple (Safari), Google (Chrome), Mozilla
(Firefox), Opera (Opera), and lately Microsoft, are members of
the WebGL Working Group.
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
We are in the middle of a big change
April 2015: Google's Chrome started phasing out NPAPI
support
Summer 2015 – IE drops support for NPAPI plug-in
September 2015 –Chrome 45 NPAPI plug-
in support removed
December 2016 -
Firefox's is dropping
NPAPI entirely
By late 2015, many browser vendors have
either removed or
announced timelines for the removal of
standards based plug-in support,
eliminating the ability to
embed Flash, Silverlight, Java and other
plug-in based technologies
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
How this all started?
• Security issues with flash(vulnerability)
• “.. We don’t want to reduce the reliability and security of our iPhones,
iPods and iPads by adding Flash”, “…Flash was the number one reason
Macs crash”, April 29, 2010, Steve Jobs, "Thoughts on Flash"
13/2/2016. Google Drops Flash to go 100% HTML5 for Ads
8/2/2016. Adobe releases Animate CC -> to move away from
its proprietary plug-in and runtime in favour of HTML5 Canvas
and WebGL
Today…
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
WebGL and UNITY3D
• Unity 5.3(December 2015) makes WebGL support official.
• Unity is going to drop Web player support (web plug-in) in
version 5.4, due March 2016.
• Unity (and Unreal) exporters work: taking a runtime written
in native (i.e. C/C++), and cross-compiling it to asm.js +
WebGL via Emscripten.
• Emscripten is an LLVM(Low Level Virtual Machine)-based
project that compiles C and C++ into highly-
optimizable JavaScript in asm.js format. This lets you run C
and C++ on the web at near-native speed, without plugins.
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
WebGL and UNITY3D
• Unity3D embraced WebGL. It is already used in a number of successful
commercial titles that way.
• Their continued efforts can be easily addressed through their roadmap
on their website https://unity3d.com/unity/roadmap which has been
set to public as a proof for their credibility.
http://beta.unity3d.com/jonas/AngryBots/
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
WebPlayer vs WebGL
Big Buck Hunter
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Q-Tales and WebGL
• Q-Tales tools (Authoring tool and e-book Reader) support a number of
Digital Screens (PC, iMac, Android tablets, iPads).
• They also can be exported as web players. …But they work only in
Firefox and only till the end of 2016.
• WebGL seems the only way, but…its not stable yet…, not officially
supported from Unity 3d, and not all the existing features are working
properly(testing).
Early in 2015…
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Q-Tales and WebGL
Early in 2016…
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Next steps
• Browser vendors and Unity 3D have a lot of things still to
improve.
• Q-Tales is using the stable delivery channels for
dissemination (tablets as the main players).
• Everything that is added to the tools we take care to be
WebGL compliant.
• We believe that this will prove to become our advantage at
the end as early adopters of WebGL.
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Q-Tales ecosystem (1/4)
Collaboration Platform
• Initiators start new e-book
projects.
• Seek collaborators for the co-
creation of the e-books
• Send their e-books for Curation
• Publish their e-books to the Q-
Tales Store(s)
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Q-Tales ecosystem (2/4)
Authoring Tool
• Initiators setup book style
• Use the assets uploaded
from collaborators
(images, sounds, 3d).
• Insert and customize texts
• Add educational mini-
games/ features
• Use free assets offered by
Q-Tales
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Q-Tales ecosystem (3/4)
Q-Tales Store
• Curated books are sold to
the public
• There is a premium store
for publishers to buy
rights of e-books
• Also free e-books are
there
• Links to Q-Tales Reader
apps
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Q-Tales ecosystem (4/4)
HoloLens
Q-Tales Readers
|Creative Industries Concertation Meeting | 17.02.2016 | Luxembourg |
Thank you!
Co-funded by the European Union under the Horizon 2020 programme

Q tales project - WebGL

  • 1.
    WebGL (Web GraphicsLibrary) A JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins
  • 2.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | What is WebGL • WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. • WebGL programs consist of control code written in JavaScript and special effects code (shader code) that is executed on a computer's Graphics Processing Unit (GPU). • WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.
  • 3.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | How will affect web browsing? • WebGL will enable iOS-like applications to function on the web • WebGL elements can be mixed with other HTML elements • WebGL can also enable some typically non-web based programs to run on the cloud Cinema4DUnity3D
  • 4.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | History of WebGL • Version 1.0 of the WebGL specification was released March 2011 • Development of the WebGL 2 specification started in 2013 • Latest update: 2 February 2016 • https://www.khronos.org/registry/webgl/specs/latest/2.0/ Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), Opera (Opera), and lately Microsoft, are members of the WebGL Working Group.
  • 5.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | We are in the middle of a big change April 2015: Google's Chrome started phasing out NPAPI support Summer 2015 – IE drops support for NPAPI plug-in September 2015 –Chrome 45 NPAPI plug- in support removed December 2016 - Firefox's is dropping NPAPI entirely By late 2015, many browser vendors have either removed or announced timelines for the removal of standards based plug-in support, eliminating the ability to embed Flash, Silverlight, Java and other plug-in based technologies
  • 6.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | How this all started? • Security issues with flash(vulnerability) • “.. We don’t want to reduce the reliability and security of our iPhones, iPods and iPads by adding Flash”, “…Flash was the number one reason Macs crash”, April 29, 2010, Steve Jobs, "Thoughts on Flash" 13/2/2016. Google Drops Flash to go 100% HTML5 for Ads 8/2/2016. Adobe releases Animate CC -> to move away from its proprietary plug-in and runtime in favour of HTML5 Canvas and WebGL Today…
  • 7.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | WebGL and UNITY3D • Unity 5.3(December 2015) makes WebGL support official. • Unity is going to drop Web player support (web plug-in) in version 5.4, due March 2016. • Unity (and Unreal) exporters work: taking a runtime written in native (i.e. C/C++), and cross-compiling it to asm.js + WebGL via Emscripten. • Emscripten is an LLVM(Low Level Virtual Machine)-based project that compiles C and C++ into highly- optimizable JavaScript in asm.js format. This lets you run C and C++ on the web at near-native speed, without plugins.
  • 8.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | WebGL and UNITY3D • Unity3D embraced WebGL. It is already used in a number of successful commercial titles that way. • Their continued efforts can be easily addressed through their roadmap on their website https://unity3d.com/unity/roadmap which has been set to public as a proof for their credibility. http://beta.unity3d.com/jonas/AngryBots/
  • 9.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | WebPlayer vs WebGL Big Buck Hunter
  • 10.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Q-Tales and WebGL • Q-Tales tools (Authoring tool and e-book Reader) support a number of Digital Screens (PC, iMac, Android tablets, iPads). • They also can be exported as web players. …But they work only in Firefox and only till the end of 2016. • WebGL seems the only way, but…its not stable yet…, not officially supported from Unity 3d, and not all the existing features are working properly(testing). Early in 2015…
  • 11.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Q-Tales and WebGL Early in 2016…
  • 12.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Next steps • Browser vendors and Unity 3D have a lot of things still to improve. • Q-Tales is using the stable delivery channels for dissemination (tablets as the main players). • Everything that is added to the tools we take care to be WebGL compliant. • We believe that this will prove to become our advantage at the end as early adopters of WebGL.
  • 13.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Q-Tales ecosystem (1/4) Collaboration Platform • Initiators start new e-book projects. • Seek collaborators for the co- creation of the e-books • Send their e-books for Curation • Publish their e-books to the Q- Tales Store(s)
  • 14.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Q-Tales ecosystem (2/4) Authoring Tool • Initiators setup book style • Use the assets uploaded from collaborators (images, sounds, 3d). • Insert and customize texts • Add educational mini- games/ features • Use free assets offered by Q-Tales
  • 15.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Q-Tales ecosystem (3/4) Q-Tales Store • Curated books are sold to the public • There is a premium store for publishers to buy rights of e-books • Also free e-books are there • Links to Q-Tales Reader apps
  • 16.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Q-Tales ecosystem (4/4) HoloLens Q-Tales Readers
  • 17.
    |Creative Industries ConcertationMeeting | 17.02.2016 | Luxembourg | Thank you! Co-funded by the European Union under the Horizon 2020 programme