小编emb*_*mbm的帖子

这是我第一次处理使用 Angular 构建的项目，因此我仍在习惯针对 Angular 和 WebPack 的大量实践。

我希望在全屏画布中加载自定义片段着色器（.frag/.glsl）以用作组件的背景。对于过去的模型或其他不使用角度的项目，我设法在GlslCanvas等库的帮助下轻松做到这一点，这些库管理全屏四边形和基本制服的设置，但现在我无法弄清楚向我抛出的一些错误当尝试构建我的角度应用程序时。

经过几个小时的浏览，我找到了如何成功导入着色器代码，使用GLSL-shader-loader并通过 @Angular-devkit/build-Angular 和 @Angular-builder/custom-webpacks 添加自定义 Webpack 配置：

# my-custom-webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /\.(frag|vert|glsl)$/,
            use: [
                { 
                loader: 'glsl-shader-loader',
                options: {}  
                }
            ]
        }]
    }
}

我还了解到我必须通过定义所需的声明来阻止打字稿抱怨导入时的非 ts 模块，即：

# my-declarations.d.ts

declare module '*.glsl';
declare module '*.frag';
declare module '*.vert';

此时，片段着色器的代码已正确导入（或者我认为是这样？），我可以将其记录或打印出来（例如{{ myShaderCode }}）：

# glsl-bg.component.ts

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import frag from './myShader.frag';
import * as GlslCanvas …