フロントエンドにおける3Dグラフィックス

2021/09/30

@kfurumiya

自己紹介

古都こと

@kfurumiya

株式会社出前館 エンジニア

HN

Twitter

所属

最近使ってる言語

趣味

最近やってるゲーム

TypeScript / Rust

ゲーム / お絵描き / プログラミング

原神 / アークナイツ / グラブル

もくじ

  1. フロントエンドにおける3Dグラフィックス
  2. WebGLとOpenGL ES
  3. WebGL2
  4. WebGPUに向けて

もくじ

  1. フロントエンドにおける3Dグラフィックス
  2. WebGLとOpenGL ES
  3. WebGL2
  4. WebGPUに向けて

フロントエンドにおける3Dグラフィックス

  • HTML5でネイティブ並みの機能を！という時代
    • 2005年から2010年あたり
    • 無茶なAPIがだいぶ実装された（一部はすでに廃止）
  • 要求は当然グラフィックス面にもおよぶ
    • 3DCG使いたい！！！
  • MozillaとKhronosによりWebGL仕様策定
    • 2009年頃から普及

フロントエンドにおける3Dグラフィックス

three.js demo

https://threejs.org/examples/#webgl_animation_keyframes

もくじ

  1. フロントエンドにおける3Dグラフィックス
  2. WebGLとOpenGL ES
  3. WebGL2
  4. 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);
}

もくじ

  1. フロントエンドにおける3Dグラフィックス
  2. WebGLとOpenGL ES
  3. WebGL2
  4. WebGPUに向けて

WebGL2

  • WebGL = OpenGL ES 2.0ベース
    • 古い！！！しんどい！！！
    • アップデートしよう
  • WebGL2 = OpenGL ES 3.0ベース
    • 2017年頃
    • そこそこ新しい機能が使える

WebGL2

After the Flood

https://playcanv.as/e/p/44MRmJRU/

WebGL2の苦難

  • 2017年ぐらいになるとOpenGL自体が古い
    • 低レイヤーAPIの台頭
    • Mantle, Vulkan, Metal, DirectX12
    • 暗黙の処理で発生するオーバーヘッドを軽減したい
  • GPGPUの普及
    • 並列計算、機械学習
    • WebGL2でできるといえばできるが…
    • OpenCLを動かせるようにするWebCLは音沙汰なし
  • Appleが実装しない
    • 「登場時にしてすでにレガシーなAPI」を実装する意義
    • Appleは後述のWebGPUを提唱

もくじ

  1. フロントエンドにおける3Dグラフィックス
  2. WebGLとOpenGL ES
  3. WebGL2
  4. 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,382

More from Koto Furumiya