SlideShare a Scribd company logo
1 of 44
Download to read offline
Pietro Grandi
@PietroGrandi3D
Demystifying the 3D Web
1 / 44
Pietro Grandi
Frontend dev at BetssonGroup
Working with WebGL since 2012
Born as 3D Artist
Hi!
2 / 44
Community
Khronos Chapter Milano
OTS WebGL workshop
NodeSchool WebGL workshop
Pietro Grandi
3 / 44
Why the web?
4 / 44
Web is everywhere
Desktop
Mobile
Wearable
Why the web?
5 / 44
Browser as environment for
applications
Fast JS interpreter
Standards
One stack, more platforms
Why the web?
6 / 44
Why WebGL?
7 / 44
WebGL
Native API
Porting of OpenGL ES 2.0
GPU access
Maintained by Khronos Group
Why WebGL?
8 / 44
Native API
Access through JavaScript
No plugin required
Context from canvas
Why WebGL?
9 / 44
OpenGL
Industry standard
Shader based pipeline
Khronos Group
Why WebGL?
10 / 44
The Khronos Group
Founded in January 2000
Including ATI, Intel, NVIDIA...
Creating open standard APIs for
rich media
Why WebGL?
11 / 44
Shaders
Define rules for visualization
Vertex shader for geometry
Fragment shader for pixels
Why WebGL?
12 / 44
Shaders
Take parameters
Compiled
Use GLSL 1.0
Why WebGL?
13 / 44
Shader pipeline
Link shaders
Load geometry data
Draw data
Why WebGL?
14 / 44
Immediate mode API
Scene is redrawn each time
No scene caching
Scene is managed by the
application
Why WebGL?
15 / 44
Support
All product names, logos, and brands are property of their respective owners.
Why WebGL?
16 / 44
Yet another JS
framework???
17 / 44
WebGL API offers
primitives
Points and connections
Triangles and connections
Colors
Textures
Why frameworks?
18 / 44
World is bigger
Polygons
Solids
Fluids
Materials
Why frameworks?
19 / 44
A trivial example
A red square in 52 lines
A red square in 21 lines
Why frameworks?
20 / 44
So, is there a killer
framework?
21 / 44
The biggest
ThreeJS
BabylonJS
OSGJS
SceneJS
Which framework?
22 / 44
ThreeJS
Developed for Flash
Community driven development
Game engine
MIT License
Which framework?
23 / 44
BabylonJS
Developed for Silverlight
Supported by Microsoft
Game engine
Apache license 2.0
Which framework?
24 / 44
OSGJS
Based on OpenSceneGraph
Used by Sketchfab
Rendering engine
MIT License
Which framework?
25 / 44
SceneJS
Rendering engine
Declarative approach
Used by BioDigital Human
Custom OSS License
Which framework?
26 / 44
What about 2D?
Shaders for 2D effects
GPU powered rendering
Filters
Texture blending
Not just 3D
27 / 44
PixiJS
Fast rendering engine
Support animations
WebGL blend and filters
Not just 3D
28 / 44
Cool.
Is someone REALLY using
it?
29 / 44
Google maps
Big data visualization
Draw vectors instead of tiles
Boost performances
Case study
30 / 44
Autodesk
A360 Viewer
Revit WebGL Publisher
Using ThreeJS
Formerly using Flash
Case study
31 / 44
Autodesk
API for developer
Convert models
Display 3D
Case study
32 / 44
Unity
WebGL target as of 5.3
Compiles to JS with Emscripten
Custom framework
Case study
33 / 44
Big companies spend
money.
Have you ever used it in
production?
34 / 44
Yes, I did it!
UI to navigate environments
Data visualization
Online 3D viewer
Me
35 / 44
Have you read Microsoft's
security report?
36 / 44
Graphics is weak
Real time calls for performances
Less checks
Buffer overflow, illegal memory
access, DOS
Security
37 / 44
Untrusted code
Web applications are not
installed
Giving hardware access can be
harmful
No control
Security
38 / 44
WebGL is not OpenGL
New allocated memory is zeored
Pixels outside framebuffer are
set to (0,0,0,0)
Array buffers have fixed size
Security
39 / 44
Unknown sources
Cross origin assets are forbidden
Only CORS validated resources
can be loaded
Security
40 / 44
Denial of service
OS can reset the GPU
GL_ARB_robustness has been
introduced
WebGL implementation could
detect GPU reset
Security
41 / 44
@PietroGrandi3D
pietrograndi.com
Thank you!
42 / 44
WebGL programming guide, Kouichi Matsuda
WebGL security, Khronos Group
WebGL considered harmful, Microsoft 2011
Unity WebGL updates, Jonas Echterhoff 2015
Step inside the map with Google MapsGL, Brian McLendon
2011
WWDC 2014, Apple
Announcing an updated version of Internet Explorer 11,
Microsoft 2014
References
43 / 44
Betsson Group
http://www.betssongroup.com/Jobs
We are hiring!
44 / 44

More Related Content

Viewers also liked

Recording conversations without consent
Recording conversations without consentRecording conversations without consent
Recording conversations without consentAlexandria Bishop
 
F# in social gaming by Yan Cui at Codemotion Dubai
F# in social gaming by Yan Cui at Codemotion DubaiF# in social gaming by Yan Cui at Codemotion Dubai
F# in social gaming by Yan Cui at Codemotion DubaiCodemotion Dubai
 
Modelling complex game economy with Neo4j by Yan Cui at Codemotion Dubai
Modelling complex game economy with Neo4j by Yan Cui at Codemotion DubaiModelling complex game economy with Neo4j by Yan Cui at Codemotion Dubai
Modelling complex game economy with Neo4j by Yan Cui at Codemotion DubaiCodemotion Dubai
 
Microservices for Mortals by Bert Ertman at Codemotion Dubai
 Microservices for Mortals by Bert Ertman at Codemotion Dubai Microservices for Mortals by Bert Ertman at Codemotion Dubai
Microservices for Mortals by Bert Ertman at Codemotion DubaiCodemotion Dubai
 
Demystifying the 3d web - Codemotion 2016
Demystifying the 3d web - Codemotion 2016Demystifying the 3d web - Codemotion 2016
Demystifying the 3d web - Codemotion 2016Pietro Grandi
 
SMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion Dubai
SMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion DubaiSMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion Dubai
SMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion DubaiCodemotion Dubai
 

Viewers also liked (6)

Recording conversations without consent
Recording conversations without consentRecording conversations without consent
Recording conversations without consent
 
F# in social gaming by Yan Cui at Codemotion Dubai
F# in social gaming by Yan Cui at Codemotion DubaiF# in social gaming by Yan Cui at Codemotion Dubai
F# in social gaming by Yan Cui at Codemotion Dubai
 
Modelling complex game economy with Neo4j by Yan Cui at Codemotion Dubai
Modelling complex game economy with Neo4j by Yan Cui at Codemotion DubaiModelling complex game economy with Neo4j by Yan Cui at Codemotion Dubai
Modelling complex game economy with Neo4j by Yan Cui at Codemotion Dubai
 
Microservices for Mortals by Bert Ertman at Codemotion Dubai
 Microservices for Mortals by Bert Ertman at Codemotion Dubai Microservices for Mortals by Bert Ertman at Codemotion Dubai
Microservices for Mortals by Bert Ertman at Codemotion Dubai
 
Demystifying the 3d web - Codemotion 2016
Demystifying the 3d web - Codemotion 2016Demystifying the 3d web - Codemotion 2016
Demystifying the 3d web - Codemotion 2016
 
SMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion Dubai
SMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion DubaiSMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion Dubai
SMACK Stack - Fast Data Done Right by Stefan Siprell at Codemotion Dubai
 

Similar to Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016

Open Source and Windows Azure; A Match Made in Heaven
Open Source and Windows Azure; A Match Made in HeavenOpen Source and Windows Azure; A Match Made in Heaven
Open Source and Windows Azure; A Match Made in HeavenJesus Rodriguez
 
Modern e2e-testing-for-complex-web-applications-with-cypressio
Modern e2e-testing-for-complex-web-applications-with-cypressioModern e2e-testing-for-complex-web-applications-with-cypressio
Modern e2e-testing-for-complex-web-applications-with-cypressioMarios Fakiolas
 
summer file - Copy
summer file - Copysummer file - Copy
summer file - CopyRakesh Kumar
 
Android Web app
Android Web app Android Web app
Android Web app Sumit Kumar
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();dotNet Miami
 
JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...
JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...
JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...Andrey Sadovykh
 
GDSC NIET ORIENTATION ).pdf
GDSC NIET ORIENTATION ).pdfGDSC NIET ORIENTATION ).pdf
GDSC NIET ORIENTATION ).pdfYashiGupta410690
 
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earthPittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earthGrace Jansen
 
Tampere Docker meetup - Happy 5th Birthday Docker
Tampere Docker meetup - Happy 5th Birthday DockerTampere Docker meetup - Happy 5th Birthday Docker
Tampere Docker meetup - Happy 5th Birthday DockerSakari Hoisko
 
Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...
Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...
Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...AgileNetwork
 
OSGeo Live Lightening Overview
OSGeo Live Lightening OverviewOSGeo Live Lightening Overview
OSGeo Live Lightening OverviewJody Garnett
 
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps ZNetLive
 
Jfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptxJfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptxGrace Jansen
 
Bahrain ch9 introduction to docker 5th birthday
Bahrain ch9 introduction to docker 5th birthday Bahrain ch9 introduction to docker 5th birthday
Bahrain ch9 introduction to docker 5th birthday Walid Shaari
 
Profiling Android Applications
Profiling Android ApplicationsProfiling Android Applications
Profiling Android Applicationshubx
 
Docker Bday #5, SF Edition: Introduction to Docker
Docker Bday #5, SF Edition: Introduction to DockerDocker Bday #5, SF Edition: Introduction to Docker
Docker Bday #5, SF Edition: Introduction to DockerDocker, Inc.
 
Turku2017 recentdevelopments
Turku2017 recentdevelopmentsTurku2017 recentdevelopments
Turku2017 recentdevelopmentsAndrew Crabb
 
What is WebRTC? What can I do with it?
What is WebRTC? What can I do with it?What is WebRTC? What can I do with it?
What is WebRTC? What can I do with it?Dan Jenkins
 

Similar to Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016 (20)

Open Source and Windows Azure; A Match Made in Heaven
Open Source and Windows Azure; A Match Made in HeavenOpen Source and Windows Azure; A Match Made in Heaven
Open Source and Windows Azure; A Match Made in Heaven
 
VR Workshop #1
VR Workshop #1VR Workshop #1
VR Workshop #1
 
Modern e2e-testing-for-complex-web-applications-with-cypressio
Modern e2e-testing-for-complex-web-applications-with-cypressioModern e2e-testing-for-complex-web-applications-with-cypressio
Modern e2e-testing-for-complex-web-applications-with-cypressio
 
summer file - Copy
summer file - Copysummer file - Copy
summer file - Copy
 
Android Web app
Android Web app Android Web app
Android Web app
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();
 
JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...
JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...
JUNIPER: Towards Modeling Approach Enabling Efficient Platform for Heterogene...
 
GDSC NIET ORIENTATION ).pdf
GDSC NIET ORIENTATION ).pdfGDSC NIET ORIENTATION ).pdf
GDSC NIET ORIENTATION ).pdf
 
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earthPittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
PittsburgJUG_Cloud-Native Dev Tools: Bringing the cloud back to earth
 
Containers & CaaS
Containers & CaaSContainers & CaaS
Containers & CaaS
 
Tampere Docker meetup - Happy 5th Birthday Docker
Tampere Docker meetup - Happy 5th Birthday DockerTampere Docker meetup - Happy 5th Birthday Docker
Tampere Docker meetup - Happy 5th Birthday Docker
 
Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...
Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...
Agile Chennai 2023 | AI-Powered Agile : Transforming How We Deliver Extraordi...
 
OSGeo Live Lightening Overview
OSGeo Live Lightening OverviewOSGeo Live Lightening Overview
OSGeo Live Lightening Overview
 
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
 
Jfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptxJfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptx
 
Bahrain ch9 introduction to docker 5th birthday
Bahrain ch9 introduction to docker 5th birthday Bahrain ch9 introduction to docker 5th birthday
Bahrain ch9 introduction to docker 5th birthday
 
Profiling Android Applications
Profiling Android ApplicationsProfiling Android Applications
Profiling Android Applications
 
Docker Bday #5, SF Edition: Introduction to Docker
Docker Bday #5, SF Edition: Introduction to DockerDocker Bday #5, SF Edition: Introduction to Docker
Docker Bday #5, SF Edition: Introduction to Docker
 
Turku2017 recentdevelopments
Turku2017 recentdevelopmentsTurku2017 recentdevelopments
Turku2017 recentdevelopments
 
What is WebRTC? What can I do with it?
What is WebRTC? What can I do with it?What is WebRTC? What can I do with it?
What is WebRTC? What can I do with it?
 

Recently uploaded

TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 

Recently uploaded (12)

TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 

Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016