Post on 14-Apr-2017
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
Browser as environment forapplications
Fast JS interpreterStandardsOne stack, more platforms
Why the web?
6 / 44
WebGL
Native APIPorting of OpenGL ES 2.0GPU accessMaintained by Khronos Group
Why WebGL?
8 / 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
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
WebGL API offersprimitives
Points and connectionsTriangles and connectionsColorsTextures
Why frameworks?
18 / 44
A trivial example
A red square in 52 linesA red square in 21 lines
Why frameworks?
20 / 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
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
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