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

前提

viteとtypescriptを使用

方法1（プラグイン無し）

インポート末尾に?rawとつけると、なんでも文字列としてインポートすることできる。

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

この方法だと、glslファイル内で#includeを使ってもエラーになる。

方法2

vite-plugin-glslを使う。

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

vite.config.tsに以下追加

import glsl from 'vite-plugin-glsl';

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

tsconfig.jsonに以下追加

"types": [..., "vite-plugin-glsl/ext"],