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
HTML5 WebGLについて #TechLunch
Search
Livesense Inc.
PRO
April 23, 2014
Technology
0
77
HTML5 WebGLについて #TechLunch
2012/03/14(水) @ Livesense TechLunch
発表者:島田 喜裕
Livesense Inc.
PRO
April 23, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_総合職採用_会社説明資料
livesense
PRO
0
2.5k
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
6.5k
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
180
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.6k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
550
26新卒_総合職採用_会社説明資料
livesense
PRO
0
12k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
2
51k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
13k
中途セールス職_会社説明資料
livesense
PRO
0
290
Other Decks in Technology
See All in Technology
広告の効果検証を題材にした因果推論の精度検証について
zozotech
PRO
0
190
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
150
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
470
Data Hubグループ 紹介資料
sansan33
PRO
0
2.7k
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
300
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
610
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
68k
Greatest Disaster Hits in Web Performance
guaca
0
260
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
360
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
riku_423
2
580
Introduction to Bill One Development Engineer
sansan33
PRO
0
360
Featured
See All Featured
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
Agile that works and the tools we love
rasmusluckow
331
21k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Claude Code のすすめ
schroneko
67
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Navigating Team Friction
lara
192
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
66
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Transcript
HTML5 WebGLについて
WebGLとは? • ブラウザをプレステにしてしまう技術 • 2011年3月に1.0が勧告されたばかりの今一番 ホットな仕組み • OpenGLがWebGLのもとになっている
OpenGL • OpenGL グラフィックスを高速に描画するための専用ハード ウェアを使うためのAPI
GPU(Graphics Processing Unit) nVidiaのGPU
GPU nVidiaのGPU VGAカード
HTML5 HTML5では、これまで単に文章を構造化するのみ から、動画、オーディを扱えるようになった。 →クロスプラットホーム環境を実現
canvas HTML5のcanvas要素では3次元グラフィックスを描 画することができる。 • 2次元や3次元グラフィックスをプラグインなしに HTML上に直接描画することができる。 • 原理的にはどのような3次元グラフィックスも描 画することが可能。
WebGL • Webブラウザで3DCGが表示できる • Flash、SilverLight等のプラグイン不要 • 勝手にGPUを叩いてくれる • インターフェースはJavaScript 動作するブラウザ
• FireFox、Chrome、Safari、Opera • IEではIEWebGL、JebGL、ChromeFrameなどを 使うことで動作させることができる
WebGLの実行環境 • WebブラウザがWebGLに対応していること • PCに搭載されているグラフィックカードの OpenGLのバージョンが2.0以上である必要 (2012年2月現在) →古いPCでは対応してないのが現状 • スマートフォンなどでのWebGLの対応は現在
(2012年2月)準備中段階。 →一気にウェブブラウザ用3次元グラフィックスAPI の地位を築く!?
WebGLの問題 IEがWebGLとは反対の立場をとっている →「OpenGL」と「DirectX」はライバル ↓ DirectXはMS関連製品でしか動作しないため勝敗 は明らか!?
セキュリティーホール WebGLはその機能要件ゆえにセキュリティが危険 に晒される可能性がある 1. ハードウェアの機能がWeb側につつぬけ 2. Webの利用体験を確保するためにサードパー ティを放任しすぎている 3. DoS攻撃に対する不備
デモ • Flash、Unity、WebGLの動作を確認 • ジニーエフェクト • Google Labsが公開するBody • Google
Chrome専用のWebGLコンテンツ • プレゼンテーションをWebGLで加工 • Aquarium
まとめ • WebGLは扱いが難しい? • 仕様策定の行く末やブラウザ対応など課題はあ る • Web上でできることの幅が一段と広がる
次回 WebGL WebSockets WebWorkers WebStorage