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.8k
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
CSC509 Lecture 03
javiergs
PRO
0
340
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
品質ワークショップをやってみた
nealle
0
570
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
240
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
180
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
580
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
EMこそClaude Codeでコード調査しよう
shibayu36
0
220
iOSでSVG画像を扱う
kishikawakatsumi
0
130
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6.1k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
620
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Featured
See All Featured
Visualization
eitanlees
149
16k
Building Adaptive Systems
keathley
44
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Mobile First: as difficult as doing things right
swwweet
225
10k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
We Have a Design System, Now What?
morganepeng
53
7.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
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