How can I import glsl as string in TypeScript?

Question

I am working at a WebGL project by TypeScript. There are many shaders written by glsl, and I want to import them as string in my ts file. Like:

import fxaa from "./shaders/fxaa";
const fxaaShader = new Shader(fxaa); // pass as string

Can I do it ?

Answer 1

Late to the party here, but just add a declaration file glsl.d.ts:

declare module '*.glsl' {
  const value: string
  export default value
}

...then import as string:

import shaderVert from './shaders/vertex.glsl'

...and if you're using webpack you'll need ts-shader-loader