webpack + typescript + three.jsでGLSL (.frag|.vert) を外部モジュールとしてimportする

まとめ

• 型定義ファイルを用意

• raw-loader を使用

はじめに

three.jsで ShaderMaterial や RawShaderMaterial を使うと、自作したGLSLを利用できる。 公式ドキュメントで紹介されている方法や、「three.js glsl」とかで検索して出てくる大抵の記事にはhtmlやjsに直書きしている例が見られる。 しかし、これではシンタックスハイライトは効かないし見栄えも良くない。

.d.ts

型定義ファイル (.d.ts) を .(frag|vert) ファイルと同じ場所に用意。

:
├── src
│   ├── glsl
│   │   ├── glsl.d.ts
│   │   ├── hoge.frag
│   │   └── hoge.vert
│   └── index.ts
:

ファイル名は適当で良いが、自分は glsl.d.ts とした。 内容は以下の通り。

declare module '*.vert' {
    const src: string;
    export default src;
}
declare module '*.frag' {
    const src: string;
    export default src;
}

.(vert|frag) ファイルを外部モジュールとして declare キーワードでアンビエント宣言している。

.ts ファイルにimportする際のコードは以下のようになる。

import hoge_frag from "./glsl/hoge.frag";
import hoge_vert from "./glsl/hoge.vert";

raw-loader

.(ts|js) ではないファイルをimportしたいので、 loaderが必要。

npmjs.comで "shader loader webpack" と検索してみると、パッケージが10個ほど（2019/11/15現在）出てくる。

が、単に .vert と .frag をimportしたいだけであれば、これらを使う必要はない。 テキストをそのまま string として読み込みたいので、 webpack-contrib/raw-loader を用いる。

yarn add --dev raw-loader

webpack.config.js には以下のように記述する。

// (略)
module: {
  rules: [
    {
      test: /.(ts|tsx|js)$/,
      use: 'ts-loader',
      include: [path.resolve(__dirname, 'src')],
      exclude: /node_modules/
    },
    {
      test: /.(vert|frag)$/,
      use: 'raw-loader',
      include: [path.resolve(__dirname, 'src')],
      exclude: /node_modules/
    }
  ]
},
// (略)

完成。 よいシェーダーライフを。