如何在TypeScript中将glsl导入为字符串？

Question

我正在使用TypeScript在WebGL项目中工作。有许多着色器由glsl编写，我想在ts文件中将它们作为字符串导入。像：

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

我可以这样做吗？

Answer 1

这取决于着色器文件（在您的示例中为./shader/fxaa）的编写方式。如果您自己编写此着色器文件，则可以执行以下操作：

const fxaa = 'my shader code here';
export { fxaa };

然后使用此着色器代码：

import { fxaa } from './shader/fxaa';
const fxaaShader = new fxaaShader(fxaa);

或者，您可以像这样编写着色器文件（./shader/fxaa.json）：

"my shader code here"

并要求此文件作为JSON对象：

const fxaa = require('./shader/fxaa.json');
const fxaaShader = new fxaaShader(fxaa);

Answer 2

在这里晚了聚会，但是只需添加一个声明文件glsl.d.ts：

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

...然后导入为字符串：

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

...如果您使用的是webpack，则需要ts-shader-loader