SOLG System Blog

こんにちは。webエンジニア1年生です。
HTML/CSS/javascriptの「書き方」がなんとなくわかり始めてきた気がするこの頃です。
ふと気になることがあります。

「HTML文書はwebブラウザによってどのように処理され最終的にページとして描画されるの？」
「webブラウザってGPUを利用する事ってあるの？あるならどんなケースで利用されるの？」


気になりませんか？ググってみました。調べればなんでも情報が得られるってほんとうに素晴らしい世の中。

1. HTML文書はwebブラウザによってどのように処理されるの？

結論を言えば下記辺りのページをなんとなく眺めればなんとなく理解できてしまうはず。
とってもわかりやすく解説されてます。　

ブラウザの仕組み: 最新ウェブブラウザの内部構造

ブラウザにやさしいHTML/CSS

理解するに越した事はないですがwebコンテンツを作るという立場ならば、とりあえずの理解はなんとなくできれば良いのかなと思っています。仕様は各レンダリングエンジンによって異なるし、仕様すら日々変わっていくだろうから、現状の仕様を端から端まで完璧に理解する必要はかならずしも無いなぁと個人的には思います。が、動作の概略を理解する事はwebコンテンツを作る上で有益なのは間違いない。「書き方」だけでなく「動作」を知る事で、webで可能な新しい表現・最適化・デバッグの面できっと助けになる。はず。

なにかを極めるには、それよりも下のレイヤーの技術も含めて理解する事が大切だと誰かに言われました。


2. 「webブラウザってGPUを利用する事ってあるの？あるならどんなケースで利用されるの？」

そもそもGPUとは？という詳細は端折りますが、描画機能に特化したCPUと並列で動作できるハードウェアとでもいいましょうか。いろいろなGPUアーキテクチャが存在するので、細かい動作や機能は異なりますが、ぼんやりとしたイメージとして、3D空間上にポリゴンを描画するいわゆる「3D描画」を行う事が可能なモノの思って大差ないかと。GPUを利用した2D画面の描画も、3D空間上において、いわゆる”板ポリ”にテクスチャを貼り付けて描画する為、まとめて3D描画と呼んでしまいます。

もちろん描画ユニットとしてだけでなく、科学シミュレーションや話題の機械学習の分野等では、GPGPU 等と呼ばれる汎用的な並列計算を行うSIMD演算器のようなユニットとしても活用されています。ゲームアプリケーションの分野でもポストエフェクトの処理をGPGPU(ComputeShader)で実装する等のケースがよくあります。

ちなみにですがこのGPU、スマホにはどうせ非力なGPUがのっているんだろうというイメージがありますが、iPhoneなんかは使えるGPUがのっていたりします。むしろ統合型のGPUがのっているPCなんかとくらべても優秀です。Androidも含めてそれなりのスマホなら使えるGPUが載っています。しかもユニファイドメモリ。
http://itstrike.biz/apple/iphone/28870/

本題に戻りこのGPUですがwebブラウザではどのように活用されているのでしょうか。ググってみるなんとなくわかってきました。すべてを網羅しているわけではないですが例えば以下のようなケースで使用されるようです。

- GPUレイヤーを用いて処理負荷を削減するAccelerated-Compositing
- WebGL
- Videoのハードウェアデコード

javascriptではなくCSSでアニメーションさせればGPUが使われるケースがあるらしく、Accelerated-Compositingを想定したコーディングの戦略が存在するなど、奥が深くて面白そうです。処理負荷をどうにかしなければならない最適化の案件等がもしあったら試してみたい。
Web-based Signage コンテンツ開発ガイドライン

WebGLの方は説明するまでもないかと思いますが、OpenGL ES(現状は2.0)をサポートするブラウザ用のグラフィックスAPIです。
あくまで個人的にはですが、WebGLは理解はすべき層であって、使いやすさや実装の速さという点ではそのラッパー/上位のライブラリーであるthree.jsなんかを使うのがよいのかなあというのが肌感覚です。WebGLで書ける方がそれは勿論かっこいいですが。昨今のグラフィッスAPIはDirextX12/Metal/Vulkan等、低レベルの波がきていて、パフォーマンスを得る代わりに複雑度が増してコード記述量がとっても多くなってきてます。ライブラリ開発者やエンジン開発者はここを理解しかつ叩く必要があるかと思いますが、アプリケーションプログラマは、これらの低レベルのライブラリをある程度理解しつつ、先人の努力にあやかり上位のライブラリなりを使うのが開発効率としてはよいのかなあと感じています。繰り返しですがあくまで、WebGL→three.jsを触ってみての現時点での個人的な感想です。
なんにせよWebGL(three.js)をがっつり使うお仕事がほしいなあ。


ささっと斜め読みした程度の理解なので、もっとブラウザの気持ちが分かるように精進します。