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

こんにちは、タクゾウです。
今回は、WebGLとはなにかについて紹介します。
自分の勉強を兼ねて、WebGLの基礎を詳しく書いていくので、
Web上で3D表現をしたい人の参考になれば幸いです。

WebGLとは

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

OpenGLとは

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を使うのも難しくないです。

OpenGL ES2.0

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

実行環境の違い

WebGLのコードは最終的にローレベルなOpenGLのAPIとして実行されます。
これにより、通常のOpenGLなどに近い環境で実行され、GPUを利用した高速なレンダリングを行うことが可能になります。
つまり、アプリケーション本体である実行部分はCPUを使ったブラウザ上の JavaScript の速度でしか動かせないものの、描画処理そのものは、ネイティブな GPU を使った描画プロセスの非常に高速な処理の恩恵を受けられます。

対応環境

PC環境

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

WebGLが動作するために必要な環境は下記2つですが、
現在ほとんどのメジャーブラウザで実行が可能です。
・PCそのものがOpenGL ES2.0に対応してる
・WevGLに対応したブラウザ
※chromeだとブラックリストにより、古いGPUを制限する可能生があるので注意。

SP環境

iOS8以降
Android5.x系以降(chromiumベースのものならほぼ大丈夫)
iOS7以前とAndroid4以前のバージョンではWebGLが動くかどうかはわかりません。
Androidについてはデフォルトブラウザがメーカーにより実装の差があるため、

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

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

参考 webglstatswebglstats

 まとめ

  • WebGL とは OpenGL ES を JavaScript から叩ける API 群のこと
  • アプリケーション(JS)は CPU 上で動作するが GPU の動作は OpenGL ES と同等
  • OpenGL ES をそのまま記述するのと基本的に同じことを行う必要がある
  • 従来のウェブの常識が通用せずネイティブアプリのような記述スタイルになる
  • WebGL を使いこなせるなら他のプラットフォームで OpenGL を使うのは難しくない
  • PC環境はほぼ全ての環境で実行可能
  • SP環境は、iOS8以降、Android5.x系以降で実行可能

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA