three.js - 如何在 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 后，使用该 Material 创建一些网格，但 Angular 会从其组件的 html 中删除脚本标签，因此我无法使用这种标准方法。应该如何在角度组件中创建和使用顶点和片段着色器？将感谢任何建议和示例!

Answer 1

The thing is that you need to put your script tags with some shader settings into your html page, something like the following:

这根本不是一件事，它只是您可能在各种示例中发现的一种(糟糕的)模式。

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

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

所以如果你这样做:

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

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

Three.js 不会提示(直到您开始渲染并且 WebGL 实际上提示)，您为着色器 Material 提供了有效的输入类型，只是内容是无效的 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 文件，并且可以异步获取它，或者在构建时内联它。