Dive into 0.016 seconds
of WebGL

Transcript

1. 1 Dive into 0.016 seconds
 of WebGL Presented by Akihiro

   Oyamada (@yomotsu) Frontend Engineer at PixelGrid, Inc. Sep 16, 2014

2. 2 Hello! Frontend Engineer at PixelGrid, Inc. @yomotsu

3. • Beautiful! • Cool Technology! • very hot!! 3 Impressions

   of WebGL

4. 4 100°C!
 (212°F)

5. 5 WebGL makes
 your Mac Book
 Very Hot

6. 6 https://yomotsu.github.io/walkthrough I’m making a game
 in three.js
 for fun

7. It was working with 60 FPS 7

8. • FPS stands for Frames Per Second • The number

   of rendering per one second 8

9. 9 http://yomotsu.github.io/FPS_Comparison/ 20 FPS
 vs
 60 FPS

10. 10

11. 11

12. Why 60 FPS? 12

13. • Most computer screens have
 a refresh rate of 60

    Hertz • Most console games work with 60 FPS too 13

14. Dive into a Frame 14 0 . 0 1 6

    s e c o n d s

15. Realtime 3D works with 
 Forward Rendering 15 or Deferred

    rendering

16. 16 16

17. 17

18. 18 Lets take a look ! demo

19. 19

20. Drawcalls increase
 CPU load
 and the temperature 20

21. Take care of CPU, GPU and RAM! 21 I’ll have

    a talk about optimization sometime soon! perhaps at CodeGrid
 https://app.codegrid.net/

22. 22 gl.finish(); @yomotsu