WebGLのShaderをHTMLに直接書くと消耗するので、外部ファイルにしてJadeかSlimでincludeしちゃおう

そのへんのサンプルをみるとシェーダーがHTMLに直接書いてある

sample.html

<script id="vertexShader" type="x-shader/x-vertex">
uniform float hoge;
void main() {
  float fuga = 1;
  gl_Position = projectionMatrix * modelViewMatrix;
}
</script>

こんな感じでHTMLに埋め込まれている。

• いちいちhtmlを触らないといけない
  • → 再利用性がない
• シンタックスハイライトもないので、開発がめんどくさい。

別ファイルにしよう

2つの戦略がある。

外部ファイルにするShaderファイルを作成し

1. jsでロードする
2. JadeなどでHTMLに埋め込む

ここではJSでロードすると単純にめんどくさいのと、ロード時間が増えて、メリットがなさげなのでやめておく。

Jadeでの埋め方

jadeと同じ階層のtest.vertファイルを埋め込む

script#vertexShader(type='x-shader/x-vertex')
  include test.vert

Slimでの埋め方

source/shader/hoge.vertファイルを埋め込む

script#vertexShader type="x-shader/x-vertex"
  == File.read('./source/shader/hoge.vert')

ちなみにGLSLシェーダーファイルの拡張子は .vert, .frag

特に拡張子の指定はないが、慣習的にこうなってるらしい。

• .vert
• .frag

GLSLシェーダの正しいファイルの拡張子は何ですか？

.vs, .fsとしている派閥もいるらしい。

.vert, .fragのシンタックスカラーはC/C++などにしとくとよし

GLSLはC言語をベースとしているらしいので、それでいいんじゃないかな！？

IntelliJ IDEAだとプラグインあり

1. GLSL Supportっていうのがあるので、それをインストール
2. [Settings] → [File Types] → [OpenGL Shadeing...]で*.vert, *.frag追加

でOK！

だけど、シンタックスハイライトがうまく設定できなくて、ちょっときもちわるい。