はじめに
この記事の内容はタイトルの通り、シェーダーを扱っていると出てくるいろいろな用語の一部を、自分用に少し整理してみるという内容です。
p5.js を使ったプログラムなど JavaScript のプログラムで、例えば以下のようなシェーダーを使ったプログラムを作るのに、参考になりそうな情報をいろいろ見ていきました。
そんな中で、聞いたことがあるキーワードや初めて聞くキーワードなどが多く出てきました。
そのキーワードの中で、これまで耳にしていたキーワードも多かったものの、正確な意味をあまり気にしてなかったものもあったので、キーワード同士の関係性や位置付けの違いで、混乱してき部分がありました。
そこで、以下のキーワードをとりあげて、その関係性などを自分用に整理して書いてみようと思います。
- OpenGL / OpenGL ES
- WebGL （1.0、2.0）
- GLSL / GLSL ES
OpenGL（Open Graphics Library） / OpenGL ES（OpenGL for Embedded Systems）
OpenGL は、グラフィックスハードウェア向けの2次元/3次元コンピュータグラフィックスライブラリで、多様な描画デバイスを包括するグラフィックスAPI のオープン標準規格として策定が行なわれている。グラフィックスハードウェア（GPU）の機能および性能を活用した高速なグラフィックス描画が可能。
そして、OpenGL ES は、OpenGL のサブセット。OpenGL と同じくグラフィックスハードウェア（GPU）の機能および性能を活用した高速なグラフィックス描画が可能。
iOS や Android などの携帯端末向け OS で採用されていたり、プレステ3 やニンテンドー3DS にも採用された。
参考
●OpenGL - The Industry Standard for High Performance Graphics
https://www.opengl.org/
●OpenGL - Wikipedia
https://ja.wikipedia.org/wiki/OpenGL
●OpenGL ES - Wikipedia
https://ja.wikipedia.org/wiki/OpenGL_ES
WebGL (Web Graphics Library)
WebGLは、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API。
HTML の 要素へ描画を行う。その描画には、ハードウェアのグラフィックアクセラレーションを利用可能。
WebGL 1.0 は、OpenGL ES 2.0 の派生規格で、WebGL 2.0 は OpenGL ES 3.0 の派生規格。
以下は、「サンプルで理解するWebGL 2.0 - WebGL 2.0の利点とは - ICS MEDIA」のもの。
参考
●WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API
●WebGL - Wikipedia
https://ja.wikipedia.org/wiki/WebGL#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E6%87%B8%E5%BF%B5
●WebGL - OpenGL ES 2.0 for the Web
https://jp.khronos.org/webgl/
●wgld.org | WebGL2: WebGL 2.0 と WebGL 1.0 |
https://wgld.org/d/webgl2/w001.html
●WebGL Fundamentals
https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html
GLSL（OpenGL Shading Language / OpenGL シェーディング言語） / GLSL ES
GLSL は、C言語の構文をベースとした、グラフィックスパイプラインを制御するための高レベルシェーディング言語。GLSL の派生規格として、組み込み環境向けの OpenGL ES用のシェーダー言語の GLSL ES がある。
WebGL 1.0 では GLSL ES 1.0 が利用されており、WebGL 2.0 からは GLSL ES 3.0 も利用可能。
●GLSL - Wikipedia
https://ja.wikipedia.org/wiki/GLSL
●wgld.org | WebGL: シェーダの記述と基礎 |
https://wgld.org/d/webgl/w008.html
●GLSL シェーダー - ゲーム開発 | MDN
https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
●wgld.org | WebGL2: WebGL 2.0 と GLSL ES 3.0 |
https://wgld.org/d/webgl2/w003.html
●WebGL Shaders and GLSL
https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html