Dive into 0.016 seconds
of WebGL

3c557c6103a4addc52f7b76ffd0a0f27?s=47 yomotsu
September 16, 2014

Dive into 0.016 seconds
of WebGL

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

September 16, 2014
Tweet

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