demistifying the 3d web
TRANSCRIPT
Pietro Grandi@PietroGrandi3D
Demystifying the 3D Web
1 / 44
Pietro Grandi
Frontend dev at BetssonGroupWorking with WebGL since 2012Born as 3D Artist
Hi!
2 / 44
Community
Khronos Chapter MilanoOTS WebGL workshopNodeSchool WebGL workshop
Pietro Grandi
3 / 44
Why the web?
4 / 44
Web is everywhere
DesktopMobileWearable
Why the web?
5 / 44
Browser as environment forapplications
Fast JS interpreterStandardsOne stack, more platforms
Why the web?
6 / 44
Why WebGL?
7 / 44
WebGL
Native APIPorting of OpenGL ES 2.0GPU accessMaintained by Khronos Group
Why WebGL?
8 / 44
Native API
Access through JavaScriptNo plugin requiredContext from canvas
Why WebGL?
9 / 44
OpenGL
Industry standardShader based pipelineKhronos Group
Why WebGL?
10 / 44
The Khronos Group
Founded in January 2000Including ATI, Intel, NVIDIA...Creating open standard APIs forrich media
Why WebGL?
11 / 44
Shaders
Define rules for visualizationVertex shader for geometryFragment shader for pixels
Why WebGL?
12 / 44
Shaders
Take parametersCompiledUse GLSL 1.0
Why WebGL?
13 / 44
Shader pipeline
Link shadersLoad geometry dataDraw data
Why WebGL?
14 / 44
Immediate mode API
Scene is redrawn each timeNo scene cachingScene is managed by theapplication
Why WebGL?
15 / 44
Support
All product names, logos, and brands are property of their respective owners.
Why WebGL?
16 / 44
Yet another JSframework???
17 / 44
WebGL API offersprimitives
Points and connectionsTriangles and connectionsColorsTextures
Why frameworks?
18 / 44
World is bigger
PolygonsSolidsFluidsMaterials
Why frameworks?
19 / 44
A trivial example
A red square in 52 linesA red square in 21 lines
Why frameworks?
20 / 44
So, is there a killerframework?
21 / 44
The biggest
ThreeJSBabylonJSOSGJSSceneJS
Which framework?
22 / 44
ThreeJS
Developed for FlashCommunity driven developmentGame engineMIT License
Which framework?
23 / 44
BabylonJS
Developed for SilverlightSupported by MicrosoftGame engineApache license 2.0
Which framework?
24 / 44
OSGJS
Based on OpenSceneGraphUsed by SketchfabRendering engineMIT License
Which framework?
25 / 44
SceneJS
Rendering engineDeclarative approachUsed by BioDigital HumanCustom OSS License
Which framework?
26 / 44
What about 2D?
Shaders for 2D effectsGPU powered renderingFiltersTexture blending
Not just 3D
27 / 44
PixiJS
Fast rendering engineSupport animationsWebGL blend and filters
Not just 3D
28 / 44
Cool.
Is someone REALLY usingit?
29 / 44
Google maps
Big data visualizationDraw vectors instead of tilesBoost performances
Case study
30 / 44
Autodesk
A360 ViewerRevit WebGL PublisherUsing ThreeJSFormerly using Flash
Case study
31 / 44
Autodesk
API for developerConvert modelsDisplay 3D
Case study
32 / 44
Unity
WebGL target as of 5.3Compiles to JS with EmscriptenCustom framework
Case study
33 / 44
Big companies spendmoney.
Have you ever used it inproduction?
34 / 44
Yes, I did it!
UI to navigate environmentsData visualizationOnline 3D viewer
Me
35 / 44
Have you read Microsoft'ssecurity report?
36 / 44
Graphics is weak
Real time calls for performancesLess checksBuffer overflow, illegal memoryaccess, DOS
Security
37 / 44
Untrusted code
Web applications are notinstalledGiving hardware access can beharmfulNo control
Security
38 / 44
WebGL is not OpenGL
New allocated memory is zeoredPixels outside framebuffer areset to (0,0,0,0)Array buffers have fixed size
Security
39 / 44
Unknown sources
Cross origin assets are forbiddenOnly CORS validated resourcescan be loaded
Security
40 / 44
Denial of service
OS can reset the GPUGL_ARB_robustness has beenintroducedWebGL implementation coulddetect GPU reset
Security
41 / 44
@PietroGrandi3Dpietrograndi.com
Thank you!
42 / 44
WebGL programming guide, Kouichi MatsudaWebGL security, Khronos GroupWebGL considered harmful, Microsoft 2011Unity WebGL updates, Jonas Echterhoff 2015Step inside the map with Google MapsGL, Brian McLendon2011WWDC 2014, AppleAnnouncing an updated version of Internet Explorer 11,Microsoft 2014
References
43 / 44
Betsson Grouphttp://www.betssongroup.com/Jobs
We are hiring!
44 / 44