【視聴メモ】Next-Generation 3D Graphics on the Web (Google I/O ’19)

この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。

---

References

Speaker(s): Corentin Wallez, Ricardo Cabello

Abstract

This talk will cover the latest updates for adding 3D to your web site. You'll learn how to use model-viewer and new features for rendering, AR, and interactivity. You'll also see some phenomenal sites created with three.js. Then you'll get an overview of the WebGPU API that will provide modern features such as “GPU compute” as well as lower overhead access to GPU hardware and better, more predictable performance. Expect performance gains in Tensorflow.js up to 10x.

訳

このセッションはWebサイトに3Dグラフィックを追加するときの最新情報をカバーしています。また、このセッションではmodel-viewerの使い方、レンダリング、AR、インタラクティビティについての新機能も紹介します。また、three.jsを使ったすばらしいいくつかのサイトもご紹介します。これにより、WebGPU APIが提供する"GPU compute"などの機能についてなども知ることができます。これはGPUに少ないオーバーヘッドでアクセスでき、tensorflow.jsのパフォーマンスを10倍まで高速化したりできます。

Contents

WebGL

• WebGLの基本
  • canvasを定義してcontextでwebglを指定する
  • あとはゴリゴリ書いていくだけ！
• WebGLがどうやって使われているか
  • インタラクティブなビデオクリップ
  • ゲーム(Plumeというものが紹介されていた)
  • Storybook
  • インテリアなどのコンフィグレーション
  • three.jsやbabylon.jsのサイトで色々な実用例を確認できるよ
• もちろんWebページのデザインとしても使われている
  • すごい → https://bertrandcandas.com/
  • すげえ！ → http://taotajima.jp/
• canvasの中にDOM要素を入れて映像効果を足している
• three.jsのReact拡張なんかもあって書きやすい
• WebGL + Web Components
  • WebGLの大変さをコンポーネントに隠してしまえば簡単に再利用できる（下図）

<script src="webgl-globe.js"></script>
<webgl-globe src="myjson.json" format="magnitude"></webgl-globe>

• model-viewer というWeb Componentsが便利
  • glbファイルを指定すると3Dモデルがわかりやすく表示される
  • アクセシビリティ的にも丁寧に表示される
  • attributeにarを指定するだけでARに対応する

WebGPU

• WebGLの新しいAPI
• babylon.js
  • WebGPUに対応して多くのオブジェクトを描画してもパフォーマンス（FPS)が落ちなくなった

• Post-processing filterが使える
  • カメラアプリなどで使われる色彩効果や深度表現が行える
• GPU Compute
  • 物理的なGPUの処理方法
    • 1つのGPUはたくさんのExecution Unitからなり、Execution Unit はたくさんのレジスタとALUからなる
    • 最近のGPUはALU同士が通信できるように共有メモリがある
  • WebGLでのイメージフィルタがGPU処理とどう結びつくか
    • 画像をすべてメモリに乗せて乗算を計算してる
    • 画像の分だけメモリを消費する
  • WebGPU
    • 計算結果を共有メモリにキャッシュするので速いしメインメモリもあまり消費しない
• MLの計算を効率化する目的でもよく使われる

Memo

• WebGPU、すごいけどライブラリが勝手に対応していつの間にかサイトが速くなってる系の改善かな？
• model-viewer 便利
• TAO TAJIMA のページがすごい