はじめに

Webアニメーションや映画など3Dやグラフィック映像、CGなどを実現したいとき。

様々なシステムを利用します。

3Dやグラフィック映像を制作するためにはどうのようなシステムがあり、どのような機能があるでしょうか。

たとえば、WebGLやOpenGLというブラウザがあります。

WebGLはWebGraphicsLibraryの略でグラフィックスをオンラインでレンダリングするためのものです。

もう一つのOpenGLはOpenGraphicsLibraryShadingLanguageの略称になります。

今回は、OpenGLの中の代表的な言語「GLSL」についての紹介です。

GLSLの特徴や役割、使い方などについて解説します。


GLSLとは

GLSLは、3Dグラフィックを作成するためのC言語をベースとしてシェーディング言語です。

GLSLは、OpenGLの規格で、GPUを使って色や頂点の計算を行います。

WebGLとOpenGLは類似したシェーディング言語ベースのシステムです。

GLSLは、基本的にバーテックスシェーダーとフラグメントシェーダーの2種類の取り扱いがあります。


GLSL特徴

GLSLの特徴は、3Dや2Dを描画するためにGPUを直接操作できるところです。

Shaderといわれる3次元グラフィックのシェーダーを行う際、Shade内でアートを生成できることは、GLSLのもう一つの特徴になります。


GLSLの役割

GLSLは、3DCGを描写する際、質の高いグラフィックスを高速に描画しないといけない場合、GPUに特化したハードウェアを使います。

GPUの性能が高いとしてもうまく活用できなければ綺麗なCGを作り上げることは不可能です。

つまり、GPUを上手に操作できたら完成度の高いグラフィックスをあっという間に書くことができます。

GLSLの役割は、この高速に質の高いグラフィックスを仕上げるためにGPUをコントロールするための言語です。

GLSLがGPU上で動作をするためには、シェーダを介します。


GLSLの基礎的な構文

GLSLのよく使う構文や型などを紹介します。

GLSLを最低限理解するために必要なものを簡単にまとめましたが、これだけが全てではありませんのでご注意下さい。


C言語構文

GLSLは、基本的にC言語ベースの構文です。

例えばmain関数を使った場合。

エントリーポイントでは、main関数の記述や関数の呼び出し前には定義を終わらせることが必須になります。

GLSLでコメントを残す方法は、JavaScriptと同じで、頭に「#」をつけることでコメント入力が可能です。


特殊型

GLSLは基本的にC言語ベースの型ですが、中にはC言語ベースでないものもあります。

例えば、行列用のmat系型、ベクトル用のvec系型や画素データ用のsampler系型があります。


ビルドインの変数

GLSLは、多くのビルドイン変数や関数があります。

GLSLのビルドイン変数は、先頭文字があるので比較的理解しやすくなっているのが特徴です。

代表的なビルドイン変数は、頂点ジェーダで点の大きさを指定する「gl_PointSize」です。

また、フラグメントシェーダで色を出力する「gl_FragColor」もあります。

他には、gl_Positionの頂点の座標を代入するために使う変数です。

描画中や制作中に頂点を知りたい場合にgl_Positionは、欠かせません。

色付けるするために「gl_FragColor」も必要です。


スウィズル演算子

スウィズル演算子は、ドットを利用してベクトルの各要素にアクセスすることです。

  1. vec3 hoge = vec3(2.0, 0.0, 1.0);
  2. .
  3. .
  4. float fuga = hoge.x; // fuga == 0.0

ベクトルの要素でアクセス可能なだけでなく、順番通りに必ずしもデータを並べておく必要はないことが特徴になります。


フラグメント/頂点シェーダ

フラグメントシェーダは、ピクセル単位で実行するシェーダで、スクリーンの大小によって負荷が変わります。

スクリーンが大きくなればなるほど負荷が比例して高くなる可能性が高いです。

ピクセルはどうしてもスクリーンが大きくなればピクセルの絶対値すうが増えるため、負荷が大きくなります。

もう一つのシェーダである頂点シェーダは、頂点を描くために実行される動作です。

これは、頂点の数だけ実行される回数が比例して増えます。

もちろんですが、描く頂点の数が少なくなれば実行される回数は減少するのが通例です。


GLSLの実行環境

GLSLで実行環境を整えるためには、APIとセットにして利用できるプラットフォームを準備することがポイントです。

環境を構築するためには、WebGLが最適とされています。

iOSアプリを実装するためには、モバイル用のOpenGL ESを使って実装を組むことが可能です。

C++を利用してOpenGLと実装を組むこともできます。

APIとGLSLをセットにして実装することがポイントなので、GLSLの実行環境には、APIが必要です。

実際にGLSLを実行するための環境として使いやすいWebGLやOpenGLにはどのようなものがあるかについて紹介します。


Shdr Editor

オンラインGLSLエディタで、フラグメントと頂点の両方のジェーダを同時にバランスよく編集することができます。

いくつかの3Dモデルが用意されているため、試しに頂点ジェーダをいじったり、編集したり、ライトを当てたりと色々試すことが可能です。

GLSLを使いたい人には、非常に洗練されたエディタなので使いやすいツールになります。


Sandbox

馴染みやすく使いやすいのは、Sandboxです。

オンラインエディタの中でも歴史が古く、他の人が書いたシェーダコードを使いまわすことができます。

GLSLは、ウェブ上でリアルタイムに高度な描画を作成可能です。

描画の負荷が大きくてもGPUが常に稼働してフリーズやストップなどのリスクはありません。

通常のGPUは、ハードウェアなので、高負荷は大量の電力消費や発熱など負荷が高くなればなるほどダメージが大きくなり、リスクです。


Piexel Sharders

Piexel Shardersはオンラインエディタ。

3DCGに欠かせないノイズやグラデーション、コードについての簡単なチュートリアルが付属されています。

ごくごくベーシックなオンラインエディタですが、チュートリアル付きで操作できるので比較的初心者向けです。


vertex

vertexは、先に紹介した3つのシステムより初心者には難易度が上がります。

vertexは、頂点ジェーダを多用して3DCGを描画するので知識が必要です。

vertexには、玄人向けの機能が豊富ですが、素人向けではありません。

ただ、他の人が書いたシェーダがたくさんストックされているので勉強になることは間違いないです。


HLSLとは

HLSLは、Microsoftが開発したDirect3Dで使用されるシェーディング言語になります。

HLSLは、High Level Shading Languageの略称です。

HLSLは、GLSLと類似していて、言語文法がC言語ベースになっています。


GLSLとHLSLの共通点

GLSLとHLSLは、類似している点が色々あります。

ベースとなる言語や関数、変数などで共通するところの紹介です。


ベース言語

GLSLのベース言語は、C言語です。GLSLの構文は、C言語やC++がベースになります。一方、HLSLもGLSL同様、ベース言語は、C言語やC++です。


関数

絶対値を示す関数abs(x)は、GLSLとHLSL両方同じです。

少数きりすての関数floor(x)や正規化の関数normalize(x)は、共通の関数になります。

また、フラグメントシェーダーでピクセルの結果を出力しない関数discardは、同じものを使います。

他にも絶対値を示す関数は、abs(x)ですが、これもGLSLとHLSLの共通関数です。

x,y間を補間するsmothstep、yをz乗する関数pow(y,z)やzを計算するsign(z)は共通の関数になります。

もう一つ、条件を求めるclamp(0, min, max)はどれもGLSLとHLSLに共通する関数です。


変数

GLSLとHLSLで名前が同じ変数は、floatとsampler2Dです。関数より異なる変数はあまり多くありません。


GLSLとHLSLの違い

GLSLとHLSLは、関数や変数で同じものと違うものがそれぞれあります。

ここでは、GLSLとHLSLの共通する関数や変数と異なる関数や変数の紹介です。


関数

GSLSとHLSLの関数には異なるものや名前が若干違うものがあります。

例えば、色を取得するための関数がGLSLでtexture2D(img,texcoord)としたらHLSLは、tex2D(img,texcoord)です。

HLSLの方が若干短くなっています。どちらも同じく色の取得です。他には、浮動小数点の余剰を返す関数があります。

GLSLは、mod(o,z)に対して、HLSLは、fmod(o,z)と頭文字にfがつくかつかないかの違いです。

他には、2つの値(o,z)のアークタンジェントを返します。関数は、GLSLがatan(o,z)です。HLSLは、atan2(o,z)になります。

HLSLにしかない関数があります。

mul(matrx,matrix)というマトリックス同士、ベクターとマトリックスの掛け算に使いますが、GLSLにはない関数です。


変数

GLSLとHLSLは、変数にも同じものと違うものがあります。

関数ほど数はありませんが、いくつかピックアップして紹介します。

名前が違う変数は、vec2とfloat2やmat3とfloat3x3とベクトルやマトリクスを表すものが異なります。


GLSLからHLSLへの書き換え方法

GLSLからHLSLへの書き換えは、GLSLとHLSLで共通しない変数や関数を変更すれば可能になります。

例えば、下記のコードはGLSLのものです。

  1. vec3 hoge = vec3(2.0, 0.0, 1.0);
  2. .
  3. .
  4. float fuga = hoge.x; // fuga == 0.0

これをHLSLへ書き変えたら次のようになります。

  1. float3 hoge = float3(2.0, 0.0, 1.0);
  2. .
  3. .
  4. float fuga = hoge.x; // fuga == 0.0

GLSLとHLSLは、異なる変数や関数もありますが、共通する変数や関数もあります。

コピペだけで全てまかなうことは難しいですが、変数や関数を変更するだけで書き換えることが可能です。


GLSLの学習資料

GLSLは、他のプログラミング言語と比べると使用先が限定的であるため、関連資料があまり多くありません。

GLSLの知識やスキルを上げていく上で学習資料や関連資料が必要です。

ここでは、GLSLの学習資料を紹介します。


Khronos の公式サイト

GLSLを提供しているKhronosの公式サイトは、OpenGLを管理しているため、GLSLだけでなく様々なユーザーガイドがあります。

GLSLの利用で使い方に行き詰まったらまず確認すべき資料のあるサイトです。

Khronosの公式サイトでは、クイックレファレンスカードを提供していて、FAQや簡単な使い方はすぐに見つけることができます。


Shaderific

GLSLのビルドイン関数についての英語ドキュメントになります。

日本語版がないのですが、ビルドイン関数の辞書的な資料として使うことが可能です。


The Book of Shaders

最近の更新が止まってしまっていますが、日本語訳が有志により作成されているため他の資料より読みやすくなっています。

途中で日本語訳の更新が止まってはいるものの、GLSLのビギナーユーザーには一読の価値ありです。


まとめ

GLSLについて紹介しました。GLSLは他のシェーディング言語に比べたら、初心者や慣れていない人が使うのに適している言語です。

プログラミング言語とは異なるように思えてC言語ベースにしているため、意外と共通しているところもあります。

GLSL以外にもシェーディング言語はあるのでGLSLを機に興味を持ったらチャレンジしてみましょう。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。