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

Question

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

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

我能做吗？

Answer 1

来晚了，但只需添加一个声明文件glsl.d.ts

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

...then导入为字符串：

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

...and如果你用webpack，你需要ts-shader-loader

Answer 2

这取决于如何编写着色器文件(在您的示例中是./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);