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

2019-11-14
#webpack #typescript #threejs #glsl
  1. まとめ
  2. はじめに
  3. .d.ts
  4. 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/
    }
  ]
},
// (略)

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