OpenGL・WebGLを学ぶ上で必要な基礎知識

こんにちは、タクゾウです。

今回は、WebGLとはなにかについて紹介します。

自分の勉強を兼ねて、WebGLの基礎を詳しく書いていくので、

Web上で3D表現をしたい人の参考になれば幸いです。

WebGLとは

簡単に説明するとWeb上で3D描画を再現するための技術であり、
3DCGを描画するためのAPIとして、広く利用されているOpenGLをJavaScriptで叩けるようにしたAPIです。

PC・スマートフォン・タブレットに搭載されているAPIで『Khronos』という団体によって管理されています。(『Khronos』は、3DAPIの「W3C」のようなものです。)

Webにおける言語仕様が、HTMLやJavaScriptであるように、

3DCGの場合もOpenGLという一種の世界標準があり、OpenGLシリーズのなかの一つであるWebGLは、WebにおけるCG描画の標準機能になってます。

ちなみにWebGLは、OpenGL ES2.0というOpenGLのバージョンを元にしているため、WebGLの実装はほとんどOpenGL ESの実装と同じような感じになります。

そのため、WebGLを使いこなせれば、他のプラットフォームでOpenGLを使うのも難しくないです。

モバイル用に最適されたもので、ほぼ全てのスマートフォンやタブレットが対応してます。

WebGLのコードは最終的にローレベルなOpenGLのAPIとして実行されます。

これにより、通常のOpenGLなどに近い環境で実行され、GPUを利用した高速なレンダリングを行うことが可能になります。

つまり、アプリケーション本体である実行部分はCPUを使ったブラウザ上の JavaScript の速度でしか動かせないものの、描画処理そのものは、ネイティブな GPU を使った描画プロセスの非常に高速な処理の恩恵を受けられます。

IE 11 / Microsoft Edge / Chrome / Firefox / Safari / Opera

WebGLが動作するために必要な環境は下記２つですが、

現在ほとんどのメジャーブラウザで実行が可能です。

・PCそのものがOpenGL ES2.0に対応してる

・WevGLに対応したブラウザ

※chromeだとブラックリストにより、古いGPUを制限する可能生があるので注意。

iOS８以降

Android5.x系以降(chromiumベースのものならほぼ大丈夫)

iOS7以前とAndroid4以前のバージョンではWebGLが動くかどうかはわかりません。

Androidについてはデフォルトブラウザがメーカーにより実装の差があるため、

モバイルChromeのを使えば動くことが多いです。

詳しくはこちらのサイトを参考にするのがいいです。

WebGLは3Dプログラミングそのものなので、理解するのがかなり大変かと思いますが、諦めないで勉強したいと思います！
次はWebGLを簡易的に操作できるThree.jsというライブラリについて紹介したいと思います。