WebGL with three.jsENEI 2016

José Ferrão

SetupText editor (sublime, emacs, vim, brackets, notepad, ...)

Web Browser (Firefox, chrome, edge, ...)

Phyton 3.0+

2

FilesFiles for the workshop available at

github.com/tentone/enei2016

PresentationJosé Manuel Miranda Ferrão

MIECT, Aveiro University

3

tentone@outlook.com

github.com/tentone

twitter.com/tentonej

4

IDKwGL (github.com/tentone/idkwgl)

• WebGL based library for 3D graphics

•My first contact with WebGL

5

nunuStudio (github.com/tentone/nunuStudio)

• IDE for web 3D and VR applications development

• Based on three.js

6

DANGER!

7

FOURTH

DIMENSION

in use

Objectives• Introduce base concepts about graphic programming

• Explore the three.js library

• Introduce WebVR with three.js

8

Javascript• Originally developed by Brendan Eich in 1995

• JavaScript is standardized by the ECMAScript specifications

• A browser reads the code and runs it directly

9

• Javascript is getting faster

• But still ... stop using it for everything ... please

Javascript

10

WebGL• WebGL is a Javascript API for rendering 3D graphics using the computer GPU

• No plugins are required

• WebGL specification is close the to the OpenGL ES 2.0 specification

• Graphics programming can be hard

• Mathematics

• GLSL

11

How to draw an Owl

12

“A fun and create guide for beginners”

First stepDraw 2 circles

Second stepDraw the rest of the damn Owl

Rendering pipeline

13

“From data to screen”

Triangles

14

Pixel graphics

15

Sub-pixel accuracy

16

Sub-pixel accuracy

17

Anti-Aliasing

18

Depth Buffer

19

Depth Buffer (http://orbides.org/apps/superslow.html)

20

GLSL

GLSL is a C-like language that runs in the GPU to draw images

21

Fragment shader

Operate at pixel level and are used to control how the objects surface is draw

Vertex shader

Operate on the vertex level and can be used to deform objects

GLSL

22

Shadertoy (www.shadertoy.com)

Website to share GLSL shaders

23

Rendering pipeline

24

three.js

25

• Cross-browser high level library for WebGL graphics

• User all over the internet

• Compreensive API for beginners

26

three.js (www.threejs.org)

Released by Ricardo Cabello to GitHub in 2010

github.com/mrdoob

twitter.com/mrdoob

three.js

27

Lifecycle

28

Initialize

Update

Render

Resize

Lifecycle

29

Hello world

30

Can we make it move?

31

Transformations

32

Scale

33

ቊx′ = 2 ∙ xy′ = 2 ∙ y

Rotation

34

ቊx′ = cos 45 ∙ x − sin(45) ∙ y

y′ = sin 45 ∙ x + cos(45) ∙ y

Translation

35

ቐ𝑥′ = 𝑥 + 𝑤 ∙ 10

𝑦′ = 𝑦𝑤 = 1

Matrix Transformations

𝑥′ = 𝑎 ∙ 𝑥 + 𝑏 ∙ 𝑦 + 𝑐 ∙ 𝑧 + 𝑑 ∙ 𝑤

𝑦′ = 𝑒 ∙ 𝑥 + 𝑓 ∙ 𝑦 + 𝑔 ∙ 𝑧 + ℎ ∙ 𝑤

𝑧′ = 𝑖 ∙ 𝑥 + 𝑗 ∙ 𝑦 + 𝑘 ∙ 𝑧 + 𝑚 ∙ 𝑤

𝑤′ = 𝑛 ∙ 𝑥 + 𝑜 ∙ 𝑦 + 𝑝 ∙ 𝑧 + 𝑞 ∙ 𝑤

36

𝑥′ 𝑦′ 𝑧′ 𝑤′ =

𝑎 𝑏 𝑐 𝑑𝑒 𝑓 𝑔 ℎ𝑖 𝑗 𝑘 𝑚𝑛 𝑜 𝑝 𝑞

∙

𝑥𝑦𝑧1

• Most of the graphic API’s apply linear transformations using transformation matrixes

• A transformation matrix is multiplied by the model vertices to get the transformated vertices

3D Objects• Objects are represented in a 3D space• Position

• Scale

• Rotation

• Objects are organized in a tree structure

• Parents properties affect the children objects

Hello world!

38

39

Geometries

Geometries

40

41

Input

Mouse and keyboard input

42

Cameras

43

Cameras

44Perspective Orthographic

Cameras

45OrthographicPerspective

Lights

46

Lights

Ambient Diffuse Specular Combined

+ + =

Lights

Diffuse Specular

Lights

49

Ambient Lights

50

Point Lights

51

Spot Lights

52

Directional Lights

53

Shading

54Smooth shading

(per pixel)

Flat shading

(per vertex)

Shading

55Smooth shading

(per pixel)

Flat shading

(per vertex)

Materials

56

Materials

57

Materials

58

Standard

(PBR)

Phong Lambert Basic

Basic Material

59

•Simple material

• Supports coloring

• Transparency

• Alpha maps

• No lighting

Lambert Material

60

• Everything that is supported in basic material

• Per vertex lighting

• Environment mapping

Phong Material

61

• Per pixel lighting

• Specular component

• Normal maps

• Specular maps

• Displacement maps

PBR Material

62

• Metalness and roughness

• Based on a physical model

• Allows designers to collect material characteristics from the real world

• Clear coat

External files

63

Textures

64

Textures

65

UV Mapping

66

UV mapping is the process of projecting a 2D image to a 3D model surface

Normal Material

67

Normal Mapping

68

Normal Mapping

69

Normal Mapping

70Original w/ Normal map

Normal Mapping

71Original

4M Triangles

Simplified

500 Triangles

Simplified

+ Normal map

Specular mapping

72

Specular mapping

73

Displacement mapping

74

Displacement mapping

75

=+

Displacement mapping

76

Original Normal

Mapping

Displacement

Mapping

Displacement mapping

77

Tesselation

78

Tesselation

79

• Consists in repeatedly subdividing the a geometry into a finer mesh

• The GPU generates more vertices and triangles dynamically

• Used with displacement mapping to improve object quality dynamically

Tesselation

80

Tesselation

81

Video Textures

82

Video Textures

83

Shadows

84

Shadows

85

Shadow map (threejs.org/examples/webgl_shadowmap.html)

86

ShadowsPoint, directional and spot ligths can cast shadows

87

Cube mapping

88

Cube mapping

89

Cube mapping

90

Reflections

91

Reflections

92

Refractions

93

Refractions

94

Cube cameras

95

Raycaster

96

Raycaster

97

Raycaster

98

WebVR

99

WebVR (w3c.github.io/webvr/)

• WebVR is an JavaScript API that provides access to Virtual Reality devices, in your browser.

• WebVR is still an experimental feature

• Special builds of browsers are required for now

100

WebVR

101

WebVR

102

Microsoft Edge

(Announced)

Google Chrome

WebVR 1.1

Mozilla Firefox

WebVR 1.1

Samsung Gear VR Browser

WebVR

103

WebVR

104

Performance tips• Polygon count

• Reduce polygon count and use normal maps

• Buffered Geometry vs Geometry

• Material performance

• Basic and Lambert materials peform better

• Object count

• Merge geometries when possible

105

Whats next?

106

A-Frame• VR Web Apps written in HTML

• Entity-component ecosystem

• Built on top of three.js

107

WebGL 2.0• Based on OpenGL 3 ES

108

Questions?

109

ReferencesTHREE.JS - http://threejs.org/ (September 18, 2016)

AlteredQualia - http://alteredqualia.com/ (September 18, 2016)

Open.gl - https://open.gl/drawing (October 04, 2016)

OpenGL Tutorial - http://www.opengl-tutorial.org/ (October 04, 2016)

FlatIcon - http://www.flaticon.com/ (October 04, 2016)

nunuStudio - https://github.com/tentone/nunustudio (October 05, 2016)

Acko.net - https://acko.net/ (October 05, 2016)

Oculus - https://developer.oculus.com/webvr/ (October 05, 2016)

NVIDIA - http://www.nvidia.com/object/tessellation.html (October 05 2016)

110