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
1k
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
690
PBR in three.js
yomotsu
1
960
dialog要素でつくるモーダルダイアログ
yomotsu
0
1k
IE to Edge
yomotsu
1
360
A Camera Control Library for three.js
yomotsu
1
1.3k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
560
WebXR: Beyond WebGL
yomotsu
2
1.9k
Non-DOM components with WebGL in Vue.js
yomotsu
5
13k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.8k
Other Decks in Programming
See All in Programming
One Enishi After Another
snoozer05
PRO
0
160
Cursorハンズオン実践!
eltociear
2
1.2k
ドメイン駆動設計のエッセンス
masuda220
PRO
12
3.3k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
CSC305 Lecture 09
javiergs
PRO
0
320
技術的負債の正体を知って向き合う
irof
0
270
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
670
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
It's Worth the Effort
3n
187
28k
Bash Introduction
62gerente
615
210k
Speed Design
sergeychernyshev
32
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
RailsConf 2023
tenderlove
30
1.3k
Designing for Performance
lara
610
69k
How GitHub (no longer) Works
holman
315
140k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Language of Interfaces
destraynor
162
25k
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