まとめ

  • 型定義ファイルを用意
  • raw-loader を使用

はじめに

three.js で ShaderMaterialRawShaderMaterial を使うと,自作した 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/
    }
  ]
},
// (略)

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