This document discusses WebGL and 3D graphics on the web. It begins by introducing the author and their background in 3D art and WebGL development. It then discusses why the web is a good platform for applications, and why WebGL provides native GPU access through JavaScript without plugins. The document outlines the OpenGL graphics standard, shader programming, and WebGL's immediate rendering mode. It also discusses popular WebGL frameworks like Three.js and examples of WebGL usage in production by companies like Google Maps and Autodesk. Security considerations for WebGL are also covered.

1. Pietro Grandi
@PietroGrandi3D
Demystifying the 3D Web
1 / 44

2. Pietro Grandi
Frontend dev at BetssonGroup
Working with WebGL since 2012
Born as 3D Artist
Hi!
2 / 44

3. Community
Khronos Chapter Milano
OTS WebGL workshop
NodeSchool WebGL workshop
Pietro Grandi
3 / 44

4. Why the web?
4 / 44

5. Web is everywhere
Desktop
Mobile
Wearable
Why the web?
5 / 44

6. Browser as environment for
applications
Fast JS interpreter
Standards
One stack, more platforms
Why the web?
6 / 44

7. Why WebGL?
7 / 44

8. WebGL
Native API
Porting of OpenGL ES 2.0
GPU access
Maintained by Khronos Group
Why WebGL?
8 / 44

9. Native API
Access through JavaScript
No plugin required
Context from canvas
Why WebGL?
9 / 44

10. OpenGL
Industry standard
Shader based pipeline
Khronos Group
Why WebGL?
10 / 44

11. The Khronos Group
Founded in January 2000
Including ATI, Intel, NVIDIA...
Creating open standard APIs for
rich media
Why WebGL?
11 / 44

12. Shaders
Define rules for visualization
Vertex shader for geometry
Fragment shader for pixels
Why WebGL?
12 / 44

13. Shaders
Take parameters
Compiled
Use GLSL 1.0
Why WebGL?
13 / 44

14. Shader pipeline
Link shaders
Load geometry data
Draw data
Why WebGL?
14 / 44

15. Immediate mode API
Scene is redrawn each time
No scene caching
Scene is managed by the
application
Why WebGL?
15 / 44

16. Support
All product names, logos, and brands are property of their respective owners.
Why WebGL?
16 / 44

17. Yet another JS
framework???
17 / 44

18. WebGL API offers
primitives
Points and connections
Triangles and connections
Colors
Textures
Why frameworks?
18 / 44

19. World is bigger
Polygons
Solids
Fluids
Materials
Why frameworks?
19 / 44

20. A trivial example
A red square in 52 lines
A red square in 21 lines
Why frameworks?
20 / 44

21. So, is there a killer
framework?
21 / 44

22. The biggest
ThreeJS
BabylonJS
OSGJS
SceneJS
Which framework?
22 / 44

23. ThreeJS
Developed for Flash
Community driven development
Game engine
MIT License
Which framework?
23 / 44

24. BabylonJS
Developed for Silverlight
Supported by Microsoft
Game engine
Apache license 2.0
Which framework?
24 / 44

25. OSGJS
Based on OpenSceneGraph
Used by Sketchfab
Rendering engine
MIT License
Which framework?
25 / 44

26. SceneJS
Rendering engine
Declarative approach
Used by BioDigital Human
Custom OSS License
Which framework?
26 / 44

27. What about 2D?
Shaders for 2D effects
GPU powered rendering
Filters
Texture blending
Not just 3D
27 / 44

28. PixiJS
Fast rendering engine
Support animations
WebGL blend and filters
Not just 3D
28 / 44

29. Cool.
Is someone REALLY using
it?
29 / 44

30. Google maps
Big data visualization
Draw vectors instead of tiles
Boost performances
Case study
30 / 44

31. Autodesk
A360 Viewer
Revit WebGL Publisher
Using ThreeJS
Formerly using Flash
Case study
31 / 44

32. Autodesk
API for developer
Convert models
Display 3D
Case study
32 / 44

33. Unity
WebGL target as of 5.3
Compiles to JS with Emscripten
Custom framework
Case study
33 / 44

34. Big companies spend
money.
Have you ever used it in
production?
34 / 44

35. Yes, I did it!
UI to navigate environments
Data visualization
Online 3D viewer
Me
35 / 44

36. Have you read Microsoft's
security report?
36 / 44

37. Graphics is weak
Real time calls for performances
Less checks
Buffer overflow, illegal memory
access, DOS
Security
37 / 44

38. Untrusted code
Web applications are not
installed
Giving hardware access can be
harmful
No control
Security
38 / 44

39. 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

40. Unknown sources
Cross origin assets are forbidden
Only CORS validated resources
can be loaded
Security
40 / 44

41. Denial of service
OS can reset the GPU
GL_ARB_robustness has been
introduced
WebGL implementation could
detect GPU reset
Security
41 / 44

42. @PietroGrandi3D
pietrograndi.com
Thank you!
42 / 44

43. 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

44. Betsson Group
http://www.betssongroup.com/Jobs
We are hiring!
44 / 44