enei16 - webgl with three.js
TRANSCRIPT
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
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
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