Angular 如何在WebGL画布中以角度（9）显示GLSL片段着色器？

这是我第一次使用angular构建一个项目，所以我仍然习惯于很多特定于它和WebPack的实践

我希望在全屏画布中加载自定义片段着色器（.frag/.glsl），用作组件的背景。对于过去的实体模型或其他不使用angular的项目，我在类库的帮助下很容易做到这一点，比如管理全屏四元屏幕和基本制服的设置，但现在我很难找出在尝试构建angular应用程序时抛出的一些错误

经过几个小时的浏览，我发现了如何通过@angular devkit/build angular和@angular builder/custom webpacks使用并添加自定义网页配置成功导入着色器代码：

#my-custom-webpack.config.js
module.exports={
模块：{
规则：[{
测试：/\（frag垂直glsl）$/，
使用：[
{ 
加载程序：“glsl着色器加载程序”，
选项：{}
}
]
}]
}
}

我还了解到，我必须通过定义所需的声明来避免typescript在导入时抱怨非ts模块，即：

#my-declarations.d.ts
声明模块'*.glsl'；
声明模块'*.frag'；
声明模块'*.vert'；

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

{{myShaderCode}}

）：

然而，如果我正在使用（前者的ts端口），它将无法编译，这给了我以下日志：

ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './buffers' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './common' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './context' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './iterable' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './logger' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './subscriber' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './textures' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './uniforms' in '[...]\node_modules\glsl-canvas-js\dist'

* [...] = full paths removed for simplification

---

任何帮助或暗示都将不胜感激

我不是一个有角度的开发人员，但这里有一个来自Webpack样板文件的Typescript/Webpack设置：

网页包的GLSL加载程序：

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/addon-glsl/index.js
// setting with raw-loader and glslify
rules: [
  {
    test: /\.(glsl|frag|vert)$/,
    exclude: /node_modules/,
    use: [
      'raw-loader',
      {
        loader: 'glslify-loader',
        options: {
          transform: [
            ['glslify-hex', { 'option-1': true, 'option-2': 42 }]
          ]
        }
      }
    ]
  }
]

我建议在被动框架之外创建一个webgl实例，并通过pubsub调用它，这样就不会有额外的轮询。这是一个带有performant time handling的示例助手，您可以在Darvin 2.0中找到它作为演示示例

/**
*@作者托比亚斯。frei@unic.com
*
*@module glsl统一演示
* 
* https://github.com/unic/darvin-webpack-boilerplate/blob/master/.cli/.preview/.demo/.templates/.njk/templates/modules/m03-background/index.ts
*/
const Tweakpane=require（'Tweakpane'）；
//@ts忽略
从“@scripts/glsl/demo.glsl.vert”导入顶点抖动；
//@ts忽略
从'@scripts/glsl/demo.glsl.frag'导入碎片抖动；
//参数对象
让PARAMS：任何；
const DEFINE_FPS=35；
const DEFINE_RES=800；
const DEFINE_RES2=800；
常数偏差=1；
const resX=定义设备，
resY=定义\u RES2*设备，
顶点=[-1,1，-1,1,1,1,1,1,1]；
让画布：HTMLCanvasElement，
gl:WebGLRenderingContext，
时间间隔：数字，
twodContext:CanvasRenderingContext2D，
现在：DOMHighResTimeStamp，
然后：DOMHighResTimeStamp，
已用时间：DOMHighResTimeStamp，
改革框架1：承诺；
常量ImageData:ImageData[]=[]，
纹理：任意[]=[]，
textureLocationDarvin:WebGLUniformLocation[]|任意[]=[]；
//webgl制服
让我们看看：任何，
节目:WebGLProgram,，
缓冲区：任何，
ut:WebGLUniformLocation |空，
ures:WebGLUniformLocation | null，
ucenter:WebGLUniformLocation |空，
ushake:WebGLUniformLocation |空，
upulse:WebGLUniformLocation | null，
publink:WebGLUniformLocation | null，
ulight:WebGLUniformLocation | null；
常量createShader=（类型：数字，源：字符串）=>{
常量着色器=gl.createShader（类型）；
如果（！着色器| |！源）{
错误（“>无法创建着色器”）；
返回；
}
gl.shaderSource（着色器，源）；
gl.compileShader（着色器）；
const success=gl.getShaderParameter（着色器，gl.COMPILE_状态）；
如果（！成功）{
gl.deleteShader（着色器）；
返回false；
}
返回着色器；
},
createProgram=（vertexShaderString:string，fragmentShaderString:string）=>{
//设置Vertext/Fragment着色器函数
const vertexShader=createShader（gl.VERTEX_着色器，vertexShaderString）；
常量fragmentShader=createShader（gl.FRAGMENT\u着色器，fragmentShaderString）；
//设置程序和附加着色器功能
const newProgram:WebGLProgram | null=gl.createProgram（）；
if（新建程序和顶点着色器和碎片着色器）{
gl.attachShader（新程序，顶点着色器）；
gl.attachShader（新程序、碎片着色器）；
总账链接程序（新程序）；
}否则{
console.error（“#dv>webgl程序错误”）；
}
返回新程序；
},
createGraphics=（vertexShader:string | null，fragmentShader:string | null）=>{
如果（！vertexShader | |！fragmentShader）{
console.error（“>着色器缺失”）；
返回；
}
createTextureObject（图像数据）；
//创建程序//
const newProgram=createProgram（顶点着色器、碎片着色器）；
如果（！newProgram）{
console.error（“#dv>webgl创建图形错误”）；
返回；
}
程序=新程序；
//创建并绑定缓冲区//
buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
缓冲数据(
gl.ARRAY\u缓冲区，
新的浮点数组（顶点），
gl.STATIC\u-DRAW
);
pos=gl.GetAttriblLocation（程序“pos”）；
gl.VertexAttribute指针(
销售时点情报系统，
2，//大小：每次迭代2个组件
gl.FLOAT，//类型：数据为32位浮点
false，//规范化：不规范化数据
0，//步长：0=向前移动大小*每次迭代的大小（键入）以获得下一个位置
0//从缓冲区的开头开始
);
gl.EnableVertexAttributeArray（pos）；
导入程序（）；
},
updateUniforms=（时间：DOMHighResTimeStamp）：承诺=>{
返回新承诺（解决=>{
gl.useProgram（程序）；
形式（时间）；
绘图阵列(
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './buffers' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './common' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './context' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './iterable' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './logger' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './subscriber' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './textures' in '[...]\node_modules\glsl-canvas-js\dist'
ERROR in ./node_modules/glsl-canvas-js/dist/glsl-canvas.js
Module not found: Error: Can't resolve './uniforms' in '[...]\node_modules\glsl-canvas-js\dist'

* [...] = full paths removed for simplification

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/addon-glsl/index.js
// setting with raw-loader and glslify
rules: [
  {
    test: /\.(glsl|frag|vert)$/,
    exclude: /node_modules/,
    use: [
      'raw-loader',
      {
        loader: 'glslify-loader',
        options: {
          transform: [
            ['glslify-hex', { 'option-1': true, 'option-2': 42 }]
          ]
        }
      }
    ]
  }
]