Search code examples
typescriptglsl

How can I import glsl as string in TypeScript?

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 ?

Solution

  • 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