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

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

这根本不是问题，只是在各种示例中可能会发现的一种（不良）模式。

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

让我们首先确定着色器不过是 string 。

因此，如果您执行以下操作：

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文件中突出显示，然后异步获取它，或在构建时内联它。

Answer 2

尝试通过HTTP客户端获取着色器作为文本：

对Angular 6-8有效：

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

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

2 个答案: