WebGLやWebGPUとは

Three.jsの記事で、Three.jsはWebGLレンダラー…というようなことを記載しました。

A-FrameとThree.jsを使ってみた

改めて、WebGLとWebGPUについてまとめたいと思います。

WebGLとは

まず、Khronos Groupという非営利団体が策定しているOpenGL(Open Graphics Library)というものがあります。OpenGLはワークステーションなどでの実行が想定されていたようです。創設時のメンバーにサン・マイクロシステムズがいたそうなので、それなりに古い団体です。OpenGLの最新版はVersion 4.6で、このOpenGLをベースにした組込みシステム向けの OpenGL ESというものが存在しています。
ここで本題に戻るのですが、WebGLは上記OpenGL ESをベースにしています。WebGLの最新版はVersion 2.0で、ベースとしているOpenGL ESはVersion3.0とのこと。

  • WebGL2.0 は 2015年発表のOpenGL ES 3.0を元にしている。
    ちなみに、OpenGLの最新は2017年発表の 4.6

日進月歩のXR分野においては、ちょっと古いですかね。
ちなみにAppleは OpenGL ES 3.0を最後にサポートを止めると宣言しています。そのためMacOS、iOSで動く Metal ( https://developer.apple.com/metal/ ) を採用しています。
またOpenGLはレガシーな要素が多過ぎるという背景から、ゼロから新しく設計された”Vulkan”が登場しました。

Vulkan

こちらもKhronos Groupが策定している、OpenGLの後継APIです。
UnityでAndroid向けのVRアプリを開発されている方は一度は見たことがあるかも知れません。Android OSにおける3Dグラフィック・コンピュートAPIとしてGoogleはVulkanを採用しているということがあります。Unityのアプリのビルド設定において、”OpenGLES3″という選択肢があるのですがこれがOpenGL ES 3.0であり、それを使うかVulkanを使うかなど選択できるようになっています。
AppleのMetalと同等の役割をAndroidで果たすものです。

  • Apple は Metal
  • Google は Vulkan
  • Microsoft は Direct3D 12

ありがちですが、各社で利用技術が別れてしまいました。
WebGL2.0まではほぼ全てのブラウザがサポートしている状況なので、Safari向けに特別に何かをするということなどなければWebGL2.0ベースで開発すれば良さそうです。

WebGPUとは

ワーキングネームであり、そのコミュニティはAppleやGoogle、Microsoftなどのエンジニアによって構成されているとのこと。上述の通りVulkanやMetalなど各社で別々のAPIが利用されている状態ですが、それを統合する波となっていると捉えられそうです。
(以下Wikipediaより)

WebGPU is the working name for a future web standard and JavaScript API for accelerated graphics and compute, aiming to provide “modern 3D graphics and computation capabilities”. It is developed by the W3C GPU for the Web Community Group with engineers from Apple, Mozilla, Microsoft, Google, and others.

https://ja.wikipedia.org/wiki/WebGPU

2021年4月時点ではAppleが提案している状況で、Metalベースの仕様となっているようです。もしこれが採用され、GoogleがChromeに採用すればどのブラウザでもWebGPUが標準サポートになりそうです。ただ、そうすると結局Metalベースの仕様で展開が進んでいくことになり、Vulkanの立場が。

ブラウザ対応状況

  • Safari Technology Preview : プレビュー版にてサポートしています。
    https://developer.apple.com/safari/technology-preview/
  • Chrome Canary : 実験的ビルド(アルファ版みたいなもの)でサポートしています。
    https://www.google.com/intl/ja/chrome/canary/

ライブラリ対応状況

以下の記事でご紹介したライブラリにおいて、実験的なものも含めてWebGPUをサポートしているものがあるようです。

  • Babylon.js:率先してサポートに挑戦しているようです。
    https://doc.babylonjs.com/advanced_topics/webGPU
  • Three.js:実験的にサポートしているようです。
    examplesにサンプルコードがいくつか紹介されています。
    https://github.com/mrdoob/three.js/blob/dev/README.md
    examples/webgpu_compute.html など。

そもそもまだWebGPU自体が提案レベルで策定に至っておらず、仕様が変わる可能性もある中でサポートをするというのも大変だと思います。

所感

2021年4月時点で、WebGPUをプロダクトに採用するのは少し難しいという印象です。WebXR以上に不確定要素が多く・ブラウザ戦争の様相があります。新しい技術に取り組む姿勢としては良いですし、個人的なWebアプリケーションであれば問題ないと思うのですが、商用サービスとしてはメンテナンスなどが大変そうになりそうだと思いました。

もしVRデバイスの性能を発揮させたい…と考えるのであれば、現時点ではネイティブアプリとして開発した方が現実的なのではないかと思いました。何かWebアプリケーションを世に送り出すのであれば、まだWebGL2.0準拠で開発するのがよさそうだと感じました。

また時間を置いて改めてWebGPUについて調査してみようと思います。

タイトルとURLをコピーしました