如何在 Angular 应用程序中使用自定义着色器？

Question

我有一个 Angular 6 应用程序，我正在尝试从 threejs.org 示例中使用一些自定义着色器。问题是您需要将带有一些着色器设置的脚本标签放入您的 html 页面中，如下所示：

    <script type="x-shader/x-vertex" id="vertexshader">
        uniform float amplitude;
        attribute vec3 customColor;
        attribute vec3 displacement;
        varying vec3 vNormal;
        varying vec3 vColor;
        void main() {
            // ... some code
        }
    </script>

    <script type="x-shader/x-fragment" id="fragmentshader">
        varying vec3 vNormal;
        varying vec3 vColor;
        void main() {
            // ... some code
        }
    </script>

...然后在创建 THREE.ShaderMaterial 之后，使用此材质创建一些网格，但 angular 会从其组件的 html 中删除脚本标签，因此我无法使用这种标准方法。应该如何在角度组件中创建和使用顶点和片段着色器？将应用任何建议和示例！

Answer 1

尝试使用 HTTP 客户端将着色器作为文本获取：

适用于 Angular 6-8：

http.get('assets/shaders/particle.vert', {
  responseType: 'text'
}).subscribe(data => {
  vertexS1 = data;
})

Answer 2

问题是您需要将带有一些着色器设置的脚本标签放入您的 html 页面，如下所示：

这根本不是一件事，它只是您可能在各种示例中找到的一种（不良）模式。

您可以编写着色器并以多种方式使用它们。

让我们首先确定着色器只不过是一个字符串。

所以如果你这样做：

const myShader = 'dolphins shooting lazers out of their eyes'

const myMaterial = new THREE.ShaderMaterial({vertexShader: myShader})

Three.js 不会抱怨（直到你开始渲染并且 WebGL 真正抱怨），你给着色器材质一个有效的输入类型，只是内容是无效的 GLSL。

你可以只做多行字符串：

const shader = `
  uniform vec3 foo;
  varying vec3 bar;
  void main(){...}
`

或者您可以获取文件本身：

new THREE.FileLoader().load('my_shader.vert',(file)=>{
   myShader = file
   //make new THREE.ShaderMaterial() here
})

或者，如果您有什么要解释的 require 或 import：

import myShader from './shaders/my_shader.vert'
const myShader = require('./shaders/my_shader.vert')

这将允许您编写着色器并在 .vert | .frag | .vs | .fs | .glsl 文件中突出显示，并且可以异步获取它，或者在构建时内联它。