隅歩つ

書いて理解を深める

GLSLの「Hello, World」

GLSLは理解したいことの1つです。

GLSLはコンピュータでのグラフィックの基本のイメージがありますし、TouchDesignerでも使えるので、ぜひマスターしたいです。

リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング」という書籍(Kindle)を購入しました。

VSCodeでGLSLを動かす

VSCodeで動かすには、まずglsl-canvasという機能拡張をインストールします。

GLSLのHelloWorld
GLSL機能拡張

この機能拡張をインストールするだけで準備OKです。

GLSLのコードを書く

そして、コードを書きます。

書籍どおりに書いて、表示できるか確認します。

#version 300 es
precision highp float;
out vec4 fragColor;
void main(){
    fragColor=vec4(1.0,0.0,0.0,1.0);
}

VSCodeではコードを書くと横に表示されます。

表示されない場合は、コマンドパレット(ctrl+Shift+P)で[Show glslCanvas]を選択します。

今回のは赤のベタ塗りにしています。

GLSLのHelloWorld
glslCanvas

無事に表示されました。

これでGLSLをスタートすることができます。

Shadertoy

書籍には「Shadertoy」でのやり方もありました。

「Shadertoy」が先に紹介されていたので、もしかしたら「Shadertoy」のほうがいいのかもしれません。

www.shadertoy.com

「new」をクリックすると基本的にコードは表示されます。

ちょっと確認したいときなどはShadertoyのほうが便利かもしれないですね。

yuuuha.hatenablog.com