Updated 2013.10.24 / Published 2013.10.24

HexGLのようなWebGLのコンテンツを見ていると、これから本格的にWebがゲーム機の領域を浸食するようになっていくのかと、同じWebでもWebサイトを作る領域からすると動きの面で感心させられることしきりです。

ハードウェア・アクセラレーションとは、ある機能を通常の(汎用)CPUの上でソフトウェアを実行する場合より高速に行なうため、CPUに対し付加的なハードウェアを使用することである。この付加的なハードウェアを総称してアクセラレータと呼ぶ。

さておき、WebGLのコンテンツは非常に滑らかなアニメーションを実現できているわけですが、それはWebGLが CPU ではなく GPU で処理されいるからとのことです。この場合のGPUで処理をするというのはソフトウェアであるブラウザがGPUを使ったハードウェア・アクセラレーションに対応していることが条件になります。つまり、CPU上でソフトウェア（ブラウザ）が処理する部分とGPU上のハードウェアで処理する部分を切り分けられる機能をもっているということになります。

Web制作にGPU処理を取り入れるには

そして、現在リリースされている最新主要ブラウザはすべてGPUを使ったハードウェア・アクセラレーションに対応しているので、Webサイトを作る領域においてもGPUを使った処理というのは滑らかなアニメーションを実現するために是非取り入れたいところではあります。

WebGLには canvas 要素が使われているのですが、GPUを使ったハードウェア・アクセラレーションに対応している場合、 canvas 要素があるとGPUで処理する部分として自動的にGPUレイヤーなるものを生成するらしいので、この場合は canvas 要素がGPUを使わせる処理のトリガーとなってるようです。

canvas 要素のように通常のWebサイトの制作においても、特定の条件を満たすことでGPUを使ったハードウェア・アクセラレーションに対応している場合はGPUレイヤーを任意の要素で生成することができるようです。

その特定の条件となっているものとして有名なのが translate3d(x, y, z) のように3D Transform関連のファンクションを指定することのようですが、ひとつ気になる記事を読みました。

確かに、多くの情報が出回っているように現時点ではSafari、Chromeなどでは、3D Transform関連のファンクションがあると自動的にGPUレイヤーを生成するようですが、これはブラウザの実装側の問題であって、ブラウザ側のGPUを使ったハードウェア・アクセラレーションへの対応の進化次第では他のCSSプロパティでもGPUレイヤーを生成するようになる（もしくは既になっている）かもしれませんし、逆に現在トリガーとして機能していたものが将来的にはトリガーにならなくなる可能性もあるかもしれません（たとえば過去にiOSで -webkit-transform-style: preserve-3d ; がトリガーになっていたがiOS6からは無効になっている→参考：iOS6 html hardware acceleration changes and how to fix them）。

そこでGPUで処理しているのかどうかを視覚化できないものかと情報を探していたところVisualizing WebKit's hardware accelerationという記事を見つけました。

さて、この記事によると環境変数を与えたSafariを起動させることで確認できるようで、

CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

上記のコマンドをターミナルで入力します（注：Mac OS X 10.9のSafari7.0ではエラーで起動しませんでした。Safari6.1も含めて、6系は起動します）。終了したい時は control + Z 。

これで早速いくつかサイトを見てみると、たしかに、処理負荷の高そうな箇所に応じて緑、より高いところは赤という感じで色分けをしてくれます。先の記事の説明によると赤くなっているところがハードウェア・アクセラレーションを使っているところという説明があります。

Apple

Facebook

このスクリーンショットを見ると、Appleのサイトでは、アニメーションしている部分が赤くなっていることが分かり、Facebookのようにアニメーションが使われていないサイトは真緑になりました。

ところが、肝心のGPUを使ったハードウェア・アクセラレーションになるトリガーとされている3D Transform関連のファンクションのサイトを見ると、どうもこの着色が逆にまったく何も反応しませんでした。そこで、最初に紹介した記事に「1. transform系を使わずに、left/topを使ったパターン, 2. traslateを使ったパターン, 3. traslate3dを使ったパターン」を比較したちょうど良いサンプルがあったので、そのスクリーンショットを見てみましょう。

このようにTransform関連のファンクションを使ったアニメーションでは、着色対応として全く反応しません。また、可視化しているSafariの環境変数について調べようにも、あまり詳しい情報が見つからなかったので、ここからは憶測が入るのですが、ひとつ仮説をたてます。