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
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
18. 18 Lets take a look ! demo
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