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

Demistifying the 3D Web

Jan 09, 2017

Download

Software

Codemotion
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Demistifying the 3D Web

Pietro Grandi@PietroGrandi3D

Demystifying the 3D Web

1 / 44

Page 2: Demistifying the 3D Web

Pietro Grandi

Frontend dev at BetssonGroupWorking with WebGL since 2012Born as 3D Artist

Hi!

2 / 44

Page 4: Demistifying the 3D Web

Why the web?

4 / 44

Page 5: Demistifying the 3D Web

Web is everywhere

DesktopMobileWearable

Why the web?

5 / 44

Page 6: Demistifying the 3D Web

Browser as environment forapplications

Fast JS interpreterStandardsOne stack, more platforms

Why the web?

6 / 44

Page 7: Demistifying the 3D Web

Why WebGL?

7 / 44

Page 8: Demistifying the 3D Web

WebGL

Native APIPorting of OpenGL ES 2.0GPU accessMaintained by Khronos Group

Why WebGL?

8 / 44

Page 9: Demistifying the 3D Web

Native API

Access through JavaScriptNo plugin requiredContext from canvas

Why WebGL?

9 / 44

Page 10: Demistifying the 3D Web

OpenGL

Industry standardShader based pipelineKhronos Group

Why WebGL?

10 / 44

Page 11: Demistifying the 3D Web

The Khronos Group

Founded in January 2000Including ATI, Intel, NVIDIA...Creating open standard APIs forrich media

Why WebGL?

11 / 44

Page 12: Demistifying the 3D Web

Shaders

Define rules for visualizationVertex shader for geometryFragment shader for pixels

Why WebGL?

12 / 44

Page 13: Demistifying the 3D Web

Shaders

Take parametersCompiledUse GLSL 1.0

Why WebGL?

13 / 44

Page 14: Demistifying the 3D Web

Shader pipeline

Link shadersLoad geometry dataDraw data

Why WebGL?

14 / 44

Page 15: Demistifying the 3D Web

Immediate mode API

Scene is redrawn each timeNo scene cachingScene is managed by theapplication

Why WebGL?

15 / 44

Page 16: Demistifying the 3D Web

Support

All product names, logos, and brands are property of their respective owners.

Why WebGL?

16 / 44

Page 17: Demistifying the 3D Web

Yet another JSframework???

17 / 44

Page 18: Demistifying the 3D Web

WebGL API offersprimitives

Points and connectionsTriangles and connectionsColorsTextures

Why frameworks?

18 / 44

Page 19: Demistifying the 3D Web

World is bigger

PolygonsSolidsFluidsMaterials

Why frameworks?

19 / 44

Page 20: Demistifying the 3D Web

A trivial example

A red square in 52 linesA red square in 21 lines

Why frameworks?

20 / 44

Page 21: Demistifying the 3D Web

So, is there a killerframework?

21 / 44

Page 22: Demistifying the 3D Web

The biggest

ThreeJSBabylonJSOSGJSSceneJS

Which framework?

22 / 44

Page 23: Demistifying the 3D Web

ThreeJS

Developed for FlashCommunity driven developmentGame engineMIT License

Which framework?

23 / 44

Page 24: Demistifying the 3D Web

BabylonJS

Developed for SilverlightSupported by MicrosoftGame engineApache license 2.0

Which framework?

24 / 44

Page 25: Demistifying the 3D Web

OSGJS

Based on OpenSceneGraphUsed by SketchfabRendering engineMIT License

Which framework?

25 / 44

Page 26: Demistifying the 3D Web

SceneJS

Rendering engineDeclarative approachUsed by BioDigital HumanCustom OSS License

Which framework?

26 / 44

Page 27: Demistifying the 3D Web

What about 2D?

Shaders for 2D effectsGPU powered renderingFiltersTexture blending

Not just 3D

27 / 44

Page 28: Demistifying the 3D Web

PixiJS

Fast rendering engineSupport animationsWebGL blend and filters

Not just 3D

28 / 44

Page 29: Demistifying the 3D Web

Cool.

Is someone REALLY usingit?

29 / 44

Page 30: Demistifying the 3D Web

Google maps

Big data visualizationDraw vectors instead of tilesBoost performances

Case study

30 / 44

Page 31: Demistifying the 3D Web

Autodesk

A360 ViewerRevit WebGL PublisherUsing ThreeJSFormerly using Flash

Case study

31 / 44

Page 32: Demistifying the 3D Web

Autodesk

API for developerConvert modelsDisplay 3D

Case study

32 / 44

Page 33: Demistifying the 3D Web

Unity

WebGL target as of 5.3Compiles to JS with EmscriptenCustom framework

Case study

33 / 44

Page 34: Demistifying the 3D Web

Big companies spendmoney.

Have you ever used it inproduction?

34 / 44

Page 35: Demistifying the 3D Web

Yes, I did it!

UI to navigate environmentsData visualizationOnline 3D viewer

Me

35 / 44

Page 36: Demistifying the 3D Web

Have you read Microsoft'ssecurity report?

36 / 44

Page 37: Demistifying the 3D Web

Graphics is weak

Real time calls for performancesLess checksBuffer overflow, illegal memoryaccess, DOS

Security

37 / 44

Page 38: Demistifying the 3D Web

Untrusted code

Web applications are notinstalledGiving hardware access can beharmfulNo control

Security

38 / 44

Page 39: Demistifying the 3D Web

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

Page 40: Demistifying the 3D Web

Unknown sources

Cross origin assets are forbiddenOnly CORS validated resourcescan be loaded

Security

40 / 44

Page 41: Demistifying the 3D Web

Denial of service

OS can reset the GPUGL_ARB_robustness has beenintroducedWebGL implementation coulddetect GPU reset

Security

41 / 44

Page 42: Demistifying the 3D Web

@PietroGrandi3Dpietrograndi.com

Thank you!

42 / 44

Page 44: Demistifying the 3D Web

Betsson Grouphttp://www.betssongroup.com/Jobs

We are hiring!

44 / 44