【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)

2023年12月2日2023年12月7日WebGL & Three.js

WebGL(GLSL)で定数を定義する方法を紹介します。 定数を定義するのは、2通りあります。

• define
• const

この2つの使い方、その違いからくる注意点をみてみましょう。 基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説を参考にしてみてください。

defineで定数を定義

#define PI 3.14

void main() {
    vec4 color = vec4(sin(PI / 2.0), 0.0, 0.0, 1.0);
    gl_FragColor = color;
}

このようにvoid main関数の外に書いて使用します。

constで定数を定義

void main() {
    const float PI = 3.14;
    vec4 color = vec4(sin(PI / 2.0), 0.0, 0.0, 1.0);
    gl_FragColor = color;
}

constの場合は、型を指定して、変数に値を代入する形になります。

defineとconstの違いと注意点

defineとconstの違いは、プログラムが実行されるときの変数の扱いにあります。 defineの場合は、プログラムが実行される前に、値が置き換わります。 つまり、

#define value 3.14 + 5

void main() {
    vec4 color = vec4((value * 10 / 5), 0.0, 0.0, 1.0);
    gl_FragColor = color;
}

上のコードなら、

#define value 3.14 + 5

void main() {
    vec4 color = vec4((3.14 + 5 * 10 / 5), 0.0, 0.0, 1.0);
    gl_FragColor = color;
}

このようにdefineで定義した定数が変換されてから実行されます。 上の計算式の場合、計算結果が変わってしまうことがわかると思います。 一方で、constの場合はプログラム実行時に変換されるので、上のような問題を考える必要がありません。 定数に数値を入れる場合は、挙動を理解した上でdefineを使うか、constを使用するのがいいでしょう。