Как отобразить фрагментный шейдер GLSL на холсте WebGL в angular (9)? - PullRequest
Новая
       82

Как отобразить фрагментный шейдер GLSL на холсте WebGL в angular (9)?

2 голосов
/ 10 марта 2020

Я впервые работаю над проектом, созданным с angular, поэтому я все еще привыкаю к ​​большому количеству практик, специфицирующих c для него и WebPack.

Я ищу загрузить пользовательский фрагментный шейдер (.frag / .glsl) на полноэкранном холсте, чтобы использовать его в качестве фона для компонента. Для прошлых макетов или других проектов, не использующих angular, мне удалось сделать это легко с помощью таких библиотек, как GlslCanvas , которые управляли настройкой полноэкранного квадроцикла и униформы basi c, но теперь я У меня возникают проблемы с определением ошибок, возникающих при попытке создать мое приложение angular.

После многих часов просмотра я узнал, как успешно импортировать код своего шейдера, используя GLSL -shader-loader и добавление пользовательской конфигурации веб-пакетов через @ angular -devkit / build- angular и @ angular -builder / custom-webpacks: 

# my-custom-webpack.config.js

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

Я также узнал Мне нужно было набрать sh typcript от жалоб на не-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 from 'glslCanvas'

@Component({
  selector: 'app-glsl-bg',
  templateUrl: './glsl-bg.component.html',
  styleUrls: ['./glsl-bg.component.css']
})
export class GlslBgComponent implements OnInit {

  @ViewChild('bgCanvas', {static: true})
  public bgCanvas: ElementRef<HTMLCanvasElement>;

  myShaderCode = frag;

  constructor() { }

  ngOnInit() {
    console.log(this.myShaderCode);
  }

}

Но вот где я застрял: я пытался использовать различные легкие библиотеки (ничего особенного как три. js) безуспешно запустить код шейдера на канве.

При сборке с помощью glslCanvas он успешно компилируется, но на холсте ничего не отображается, и я получаю это в консоли: 

ERROR TypeError: glslCanvas__WEBPACK_IMPORTED_MODULE_2__ is not a constructor

Принимая во внимание, что если я использую glsl-canvas- js (порт 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

Любая помощь или подсказка будет принята с благодарностью!

...