Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dive into 0.016 seconds of WebGL
Search
yomotsu
September 16, 2014
Programming
0
970
Dive into 0.016 seconds of WebGL
yomotsu
September 16, 2014
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
470
PBR in three.js
yomotsu
1
850
dialog要素でつくるモーダルダイアログ
yomotsu
0
970
IE to Edge
yomotsu
1
330
A Camera Control Library for three.js
yomotsu
1
1.2k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
530
WebXR: Beyond WebGL
yomotsu
2
1.7k
Non-DOM components with WebGL in Vue.js
yomotsu
5
12k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.8k
Other Decks in Programming
See All in Programming
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
160
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
GoとPHPのインターフェイスの違い
shimabox
2
210
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
310
Formの複雑さに立ち向かう
bmthd
1
940
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
Rubyと自由とAIと
yotii23
6
1.8k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Scaling GitHub
holman
459
140k
The Language of Interfaces
destraynor
156
24k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How GitHub (no longer) Works
holman
314
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Transcript
1 Dive into 0.016 seconds of WebGL Presented by Akihiro
Oyamada (@yomotsu) Frontend Engineer at PixelGrid, Inc. Sep 16, 2014
2 Hello! Frontend Engineer at PixelGrid, Inc. @yomotsu
• Beautiful! • Cool Technology! • very hot!! 3 Impressions
of WebGL
4 100°C! (212°F)
5 WebGL makes your Mac Book Very Hot
6 https://yomotsu.github.io/walkthrough I’m making a game in three.js for fun
It was working with 60 FPS 7
• FPS stands for Frames Per Second • The number
of rendering per one second 8
9 http://yomotsu.github.io/FPS_Comparison/ 20 FPS vs 60 FPS
10
11
Why 60 FPS? 12
• Most computer screens have a refresh rate of 60
Hertz • Most console games work with 60 FPS too 13
Dive into a Frame 14 0 . 0 1 6
s e c o n d s
Realtime 3D works with Forward Rendering 15 or Deferred
rendering
16 16
17
18 Lets take a look ! demo
19
Drawcalls increase CPU load and the temperature 20
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 gl.finish(); @yomotsu