Top / 4K Procedural Gfx Monitor / 4KBプロシージャルGFX入門講座 1時限目

4KBプロシージャルGFX入門講座 1時限目

この講座の対象者

- demosceneに興味があり、最近の4KB Introや4KB Procedural Gfxの基盤技術を理解したい人
- てっとり早く4KBのデモをつくりたい人
- GPUをつかったレイトレとかやってみたい人

まぁだいたい以上の項目に当てはまっていればよいでしょう。
あまりWindowsAPIの知識などは要求されないので、今からメガデモをはじめる人などにはもってこいかもしれません。
これを機に日本のdemoscene人口が増えるとうれしいです。

講座で使うもの

- ベクトルなどの基本的な数学の知識
- GLSLの基礎知識(できれば)
- 4K Procedural Gfx Monitor [ダウンロード]
- 適当なエディタ(まぁメモ帳でよし)

この講座では筆者作の4K Procedural Gfx Monitorというツールを使って説明していきます。ツール自体は単に
作りやすくするための便利ツールで、このツールが万能4KBメガデモ生成機なわけではありません。
講座では主にGLSL(OpenGL Shading Language)というシェーダプログラムを利用します。知っているとより良いですが、
おそらく、あまり本に載っていない使い方をするので、まったく知らなくても問題ありません。

最初に

最近のdemosceneでは4KB Introの映像部分や4KB Prcedural GfxはDirectXやOpenGLのシェーダプログラムのみで
作られることがよくあります。最近の一番ホットな4KB Introのプログラムは

Elevated by rgba & TBC(pouet)
Youtube: Elevated by RGBA and TBC
でしょうか。
この4KBのグラフィックス部分はDirect3DのHLSLというシェーダプログラムだけで書かれているそうです。
ここまでのレベルに仕上げるには相当の努力と工夫が必要ですが、この講座の知識を発展させれば作ることも
不可能ではありません!

4K Procedural Gfx Monitorの基本的な使い方

4K Procedural Gfx Monitor(以下 4kGfxMon)をダウンロードして、圧縮を解凍すると以下のようになっています。

4kGfxMonはGLSLプログラムのソースファイル(VertexProgramソースとFragmentProgramソース)を読み込み、
ソースファイルをコンパイルして実行してくれるツールです。ソースファイルが更新された場合は自動的に
ソースファイルの再読み込みを行い、コンパイルし実行します。
fs.glslとvs.glslを適当なエディタで開いてみてください。
以下のようなファイルになっているはずです。

-- vs.glsl --
// VertexProgram

varying vec4 p;

void main()
{
    gl_Position = gl_Vertex;
    p = gl_Vertex;
}
-- fs.glsl --
// FragmentProgram
varying vec4 p;

void main()
{
    float g = p.y * 0.5 + 0.5;
    gl_FragColor = vec4(g,g,g,0);
    return;
}

ここで4kGfxMon.exeを実行すると以下のように表示されます。
以後4kGfxMonは起動したままにしておいてください。

では、ソースファイルを変更して保存してみましょう。
fs.glslを以下のように、p.y から p.x に変更します。

-- fs.glsl --
// FragmentProgram
varying vec4 p;

void main()
{
    float g = p.x * 0.5 + 0.5;
    gl_FragColor = vec4(g,g,g,0);
    return;
}

ソースの変更を保存すると、起動したままの4kGfxMonの表示内容が以下のように変わっているはずです。


この講座では4kGfxMonをこのように
ソースファイルの変更 → 4kGfxMonでプレビュー → ソースファイルの変更 → ・・・
というような形で利用していきます。
GLSLを用いたデモをツール無しで作ろうとすると、プレビューのためにCプログラムなどのコンパイルなどが
必要になってくることが多いですが、4kGfxMonを使えばシェーダプログラムを変更するだけでプレビューが
可能になり、効率よくグラフィックスの作成が可能になります。

注意:
4kGfxMonではファイルの更新日時のタイムスタンプを監視しています。
読み込まれているファイルタイムスタンプよりも新しければファイルを再読み込みします。
ファイルの上書きコピーなどではタイムスタンプが古くなる場合があります。
その場合は自動的に再読み込みされませんので、4kGfxMonを起動させなおしてください。

サンプルで遊んでみる

sampleフォルダにいくつかのサンプルデモを入れてあります。フォルダの中にvs.glslとfs.glslファイルが
入っているので、それぞれのファイルを4kGfxMon.exeがある階層のフォルダにコピーさせ、4kGfxMonを
実行させてみてください。また、ソースファイルを適当(数値など)にいじって4kGfxMonの表示がかわるか
どうかをためしてみてください。

プレビューがでない時は・・・

変更箇所を間違えたままソースファイルを保存すると、4kGfxMonでのプレビューが表示されなくなることがあります。
4kGfxMonにシェーダプログラムの間違えている付近の該当の行番号が表示されるので、参考にしてみてください。