Slide 1
Slide 1 text
1
Dive into 0.016 seconds
of WebGL
Presented by Akihiro Oyamada (@yomotsu)
Frontend Engineer at PixelGrid, Inc.
Sep 16, 2014
Slide 2
Slide 2 text
2
Hello!
Frontend Engineer
at PixelGrid, Inc.
@yomotsu
Slide 3
Slide 3 text
• Beautiful!
• Cool Technology!
• very hot!!
3
Impressions of WebGL
Slide 4
Slide 4 text
4
100°C!
(212°F)
Slide 5
Slide 5 text
5
WebGL makes
your Mac Book
Very Hot
Slide 6
Slide 6 text
6
https://yomotsu.github.io/walkthrough
I’m making a game
in three.js
for fun
Slide 7
Slide 7 text
It was working with
60 FPS
7
Slide 8
Slide 8 text
• FPS stands for Frames Per Second
• The number of rendering per one second
8
Slide 9
Slide 9 text
9
http://yomotsu.github.io/FPS_Comparison/
20 FPS
vs
60 FPS
Slide 10
Slide 10 text
10
Slide 11
Slide 11 text
11
Slide 12
Slide 12 text
Why 60 FPS?
12
Slide 13
Slide 13 text
• Most computer screens have
a refresh rate of 60 Hertz
• Most console games work with 60 FPS too
13
Slide 14
Slide 14 text
Dive into a Frame
14
0 . 0 1 6 s e c o n d s
Slide 15
Slide 15 text
Realtime 3D works with
Forward
Rendering
15
or Deferred rendering
Slide 16
Slide 16 text
16
16
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
18
Lets take a look
!
demo
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
Drawcalls
increase
CPU load
and the temperature
20
Slide 21
Slide 21 text
Take care of
CPU, GPU and
RAM!
21
I’ll have a talk about optimization sometime soon! perhaps at CodeGrid
https://app.codegrid.net/
Slide 22
Slide 22 text
22
gl.finish();
@yomotsu