フロントエンドにおける3Dグラフィックス
2021/09/30
@kfurumiya
自己紹介
HN
所属
最近使ってる言語
趣味
最近やってるゲーム
TypeScript / Rust
ゲーム / お絵描き / プログラミング
原神 / アークナイツ / グラブル
もくじ
- フロントエンドにおける3Dグラフィックス
- WebGLとOpenGL ES
- WebGL2
- WebGPUに向けて
もくじ
- フロントエンドにおける3Dグラフィックス
- WebGLとOpenGL ES
- WebGL2
- WebGPUに向けて
フロントエンドにおける3Dグラフィックス
- HTML5でネイティブ並みの機能を!という時代
- 2005年から2010年あたり
- 無茶なAPIがだいぶ実装された(一部はすでに廃止)
- 要求は当然グラフィックス面にもおよぶ
- 3DCG使いたい!!!
- MozillaとKhronosによりWebGL仕様策定
- 2009年頃から普及
フロントエンドにおける3Dグラフィックス
three.js demo
もくじ
- フロントエンドにおける3Dグラフィックス
- WebGLとOpenGL ES
- WebGL2
- WebGPUに向けて
WebGL
- OpenGL ES 2.0ベースのグラフィックスAPI
- プログラマブルシェーダ対応
- 頂点シェーダ + フラグメントシェーダの構成
- シェーダ言語はGLSL
- 古いiPhone向けのとかがほぼそのまま使える
- APIがOpenGL ES 2.0っぽいだけで内部実装は不問
- WindowsのブラウザではANGLEを使うことが多い
- ANGLEでOpenGLからDirectXへ変換
OpenGL ES
- 組み込み向けのOpenGLサブセット
- for Embedded Systems(ES)
- ES 3.0でプレステ3とかXbox360ぐらいの機能セット
- WebGLはES 2.0相当
- 2.0だと結構制約が厳しい
- マルチレンダーターゲットとか…
GLSL
attribute vec3 vertexPosition;
attribute vec3 color;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
varying vec4 vColor;
void main() {
vColor = vec4(color, 1.0);
gl_Position = projection * view * model * vec4(vertexPosition, 1.0);
}
もくじ
- フロントエンドにおける3Dグラフィックス
- WebGLとOpenGL ES
- WebGL2
- WebGPUに向けて
WebGL2
- WebGL = OpenGL ES 2.0ベース
- 古い!!!しんどい!!!
- アップデートしよう
- WebGL2 = OpenGL ES 3.0ベース
- 2017年頃
- そこそこ新しい機能が使える
WebGL2
After the Flood
WebGL2の苦難
- 2017年ぐらいになるとOpenGL自体が古い
- 低レイヤーAPIの台頭
- Mantle, Vulkan, Metal, DirectX12
- 暗黙の処理で発生するオーバーヘッドを軽減したい
- GPGPUの普及
- 並列計算、機械学習
- WebGL2でできるといえばできるが…
- OpenCLを動かせるようにするWebCLは音沙汰なし
- Appleが実装しない
- 「登場時にしてすでにレガシーなAPI」を実装する意義
- Appleは後述のWebGPUを提唱
もくじ
- フロントエンドにおける3Dグラフィックス
- WebGLとOpenGL ES
- WebGL2
- WebGPUに向けて
WebGPU
- WebGLの闇が高まってきた
- 実装しないと普及しない、実装すると古すぎる
- 世のニーズを満たせないのでは…?
- Apple「WebGPUやるで」
- モダンな低レイヤーAPI
- GoogleやMicrosoft、Mozillaもおおむね合意っぽい
- 実装はまだ全然なので待とう
- SafariではExperimentalで実装されてる
WebGPUとWGSL
- シェーダ言語はWGSL
- Rustっぽいシンタックス
- SPIR-Vに変換して使用
- SPIR-V吐ければいいというわけでもない?
- いまのところWGSL前提っぽい
[[stage(fragment)]]
fn main() -> [[location(0)]] vec4<f32> {
return vec4<f32>(0.4, 0.4, 0.8, 1.0);
}
WebGL2どうなんの?
- あとSafariだけで有効化されてなかった
- ずっとexperimental扱いで有効化されなかった
- Safari 15で有効化されました
- 今WebGL2/GLSLを学ぶリスク
- 個人的にはWebGPUまだかかりそうと思う
- WebGL2やってても損はしないとは思う
- 得もしないと思う…
まとめ
- ブラウザでも3Dグラフィックスは扱えるよ!
- WebGL / WebGL2
- OpenGL ESベースなので全体的に古い
- WebGPUに移行する流れが来てそう
- 過渡期なので流れを見ていろいろ学んでいこう!
- シェーダ書くの楽しいよ
フロントエンドにおける3Dグラフィックス
By Koto Furumiya
フロントエンドにおける3Dグラフィックス
【オンライン】エンジニア達の「〇〇完全に理解した」Talk #21 https://easy2.connpass.com/event/223671/ でのLT資料です
- 1,403