TypeScriptでGLSLファイルをインポートしたい時のメモ

d.tsファイルを作成してtsconfig.jsonで認識させる。

tsconfig.jsonと同じルートにtypesフォルダを作成、glsl.d.tsファイルを作成する

declare module "*.glsl?raw" {
 const value: string;
 export default value;
}

tsconfig.jsonに以下追加

"compilerOptions": {
 "typeRoots": ["types"],
},
"include": [... , "types"]

インポートする際は.glsl?rawでインポートする。

*.d.tsに.glslを追加するよう書けば.glslでもインポートできるが、ビルド時にエラーが出るようになる。

※※※　tsconfig.jsonでしっかりtypesファイルのd.tsファイルを読み込むことができていれば、.glslファイルをインポートしてもエラーはでないはず。　※※※

これでもできない場合、上記のことは忘れてvite-plugin-glslを使う。

npm install vite-plugin-glsl --save-dev

vite.config.tsに以下追加

import glsl from 'vite-plugin-glsl';

export default defineConfig({
  plugins: [glsl()],
});

その他は公式を見るとよいだろう。