Next.jsでgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.fragや.vertなどのGLSLファイルに分けて管理しようと思います。
具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。
他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います（主観）。
raw-loaderとglslify-loader
raw-loaderはファイルを文字列として読み込むローダーです。
基本的なGLSLならこれだけでOK。
glslify-loaderはglslfyされたファイルを読み込むローダーです。
GLSL自体をモジュール化などして管理するならこちらも使います。
必要がないときに入れて問題が起きるわけではないですが読み込み時に#define GLSLIFY 1などが追加されます。
|
1 2 3 |
npm i -D raw-loader glslify-loader or yarn add -D raw-loader glslify-loader |
webpackの設定
webpack単体だとサンプル通りwebpack.config.jsのmoduleに追記するだけです。
Next.jsでwebpack機能をいじるにはnext.config.jsを書き換えます（Doc）。
今回の場合はこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
webpack: (config, options) => { config.module.rules.push({ test: /\.(glsl|frag|vert)$/, use: [ options.defaultLoaders.babel, { loader: "raw-loader" }, { loader: "glslify-loader" }, ], exclude: /node_modules/, }); return config; }, |
これで適当なところに置いたGLSLファイルを読み込めるようになりました。
|
1 2 3 |
import sepia from "@components/glsl/frags/sepia.frag"; or const { default: sepia } = require("@components/glsl/frags/sepia.frag"); |