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
80
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
HTML5 WebGLについて #TechLunch
2012/03/14(水) @ Livesense TechLunch
発表者:島田 喜裕
Livesense Inc.
PRO
April 23, 2014
More Decks by Livesense Inc.
See All by Livesense Inc.
Rubyはただの⾔語に⾮ず
livesense
PRO
0
450
28新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
110
27新卒_総合職採用_会社説明資料
livesense
PRO
0
6.2k
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
11k
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
520
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
1
1.7k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
650
26新卒_総合職採用_会社説明資料
livesense
PRO
0
13k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
2
70k
Other Decks in Technology
See All in Technology
Webの技術とガジェットで子どもも大人も楽しめるワクワク体験を提供する / Qiita Tech Festa Day 2026
you
PRO
1
160
プロダクト開発組織の現在地(Ver.2026/07) / product-organization
kaonavi
0
400
クラウドを使う側から、作る側へ / 大吉祥寺.pm 2026前夜祭
fujiwara3
5
1.2k
全社でのソフトウェアサプライチェーン攻撃対策をやってみた with Takumi Guard
z63d
0
270
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
shinyasaita
0
460
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする~デザインシステム運用に学ぶ組織レバレッジ~ 渡辺 凌央
legalontechnologies
PRO
1
280
AI時代におけるテストの基礎の再定義 / Rethinking the Fundamentals of Testing in the AI Era
mineo_matsuya
14
4.6k
AI Native なプロダクト組織の立ち上げ方 : 生産性 100 倍への挑戦
mikesorae
0
1.3k
事業成長とAI活用を止めないデータ基盤アーキテクチャの設計思想
hiracky16
0
530
探索・可視化・自動化を一本化 Amazon Quickでデータ活用スピードを上げる方法
koheiyoshikawa
0
170
テックカンファレンス三大ステークホルダーの文化人類学 ─ 違いを認め合う関係性作り
bash0c7
1
180
2026年のソフトウェア開発を考える(2026/07版) / Agentic Software Engineering 2026-07 Findy Edition
twada
PRO
26
11k
Featured
See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
210
A Tale of Four Properties
chriscoyier
163
24k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
3
360
Paper Plane
katiecoart
PRO
2
52k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.7k
Are puppies a ranking factor?
jonoalderson
1
3.7k
Tell your own story through comics
letsgokoyo
1
1k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
220
The Curse of the Amulet
leimatthew05
2
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.8k
Evolving SEO for Evolving Search Engines
ryanjones
0
240
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.6k
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