@UsagiLabo (うさぎ研究所)posted at 2022-11-11

glslify-loaderが期待通りに動作しない

Q&A

glslify-loaderが期待通りに動作しない問題を解決したい

WebGLの開発をすることが多くなり、node.jsで効率よくソースを管理しようと調べたところ「glslify」というパッケージの利用者が多そうなことがわかりました。これを使いたいのですが期待通りに動作しないので、私の使い方の誤りをご指摘いただければと思い質問します。

作業したこと

以下のパッケージをインストール

npm install -D glslify glslify-loader raw-loader

webpack.config.jsに追記

module.exports = {
  module: {
    rules: [{
        test: /\.(glsl|frag|vert)$/,
        exclude: /node_modules/,
        loader: 'raw-loader'
      }, {
        test: /\.(glsl|frag|vert)$/,
        exclude: /node_modules/,
        loader: 'glslify-loader'
    }]
  },
};

別ファイルで関数を作成（この関数をインポートして使いたい）

devideTen.glsl

float devideTen ( float value ) {
	return value * 0.1;
}
#pragma glslify: export( devideTen )

頂点シェーダ

vShader.glsl

#version 300 es
in	vec2	aPosition;
out	float	vValue;
#pragma glslify: devideTen = require("./devideTen.glsl")
void main ( void ) {
	gl_Position	= vec4( aPosition, 0.0, 1.0 );
	vValue	= ( aPosition.x + aPosition.y );
}

この状態でパックすると期待通りのソースが書き出されました（以下の通り）。

#version 300 es
#define GLSLIFY 1
in	vec2	aPosition;
out	float	vValue;
float devideTen ( float value ) {  //期待通りに挿入された
	return value * 0.1;
}
void main ( void ) {
	gl_Position	= vec4( aPosition, 0.0, 1.0 );
	vValue	= ( aPosition.x + aPosition.y );
}

vValueに対して関数を適用するため、以下のように書き換えました。

vShader.glsl

#version 300 es
in	vec2	aPosition;
out	float	vValue;
#pragma glslify: devideTen = require("./devideTen.glsl")
void main ( void ) {
	gl_Position	= vec4( aPosition, 0.0, 1.0 );
	vValue	= devideTen( aPosition.x + aPosition.y ); //関数を使いたい
}

しかし期待通りに変換されず以下のようなソースになってしまいました。

#version 300 es
#define GLSLIFY 1
in	vec2	aPosition;
out	float	vValue;
float devideTen_0 ( float value ) {  //関数名が変わってしまう
	return value * 0.1;
}
void main ( void ) {
	gl_Position	= vec4( aPosition, 0.0, 1.0 );
	vValue	=  devideTen _1540259130( aPosition.x + aPosition.y );  //想定外の文字列
}

発生している問題・エラー

単に関数を読み込むだけだと問題ないのに、その関数を実行しようとすると想定しない文字列が追加されてしまいます。関数名の「devideTen」が「devideTen_0」に、関数呼び出し時の関数名が「devideTen _1540259130（途中に空白含む）」になります。
どのようにすればglslify-loaderを正しく使えるようになるでしょうか。

その他

glsl-import-loaderも使いたいのですが、こちらはこちらで別のエラーが出てしまいます。現状raw-loaderしか使えていない状態です。

詳しい方、ご教示くださいますか。
どうぞよろしくお願いします。

Are you sure you want to delete the question?

glslify-loaderが期待通りに動作しない