问如何使用THREE.ShaderLib创建自定义着色器

EN

着色器只是字符串，这取决于您如何处理它们以及如何获取它们。话虽如此，three.js有许多工具可以帮助您更好地构建它们。

在最高级别，有一种THREE.Material形式的抽象。其中描述抽象属性，三个配置引擎盖下的着色器。

//no shaders involved
var redPlastic = new THREE.MeshStandardMaterial({
   color: 'red',
   roughness: notVeryRough
}) 

ShaderMaterial希望您编写原始的GLSL，但仍然包含一些否则您必须手动完成的内容。所以“从头开始写作”不是完全正确的。使用RawShaderMaterial，您可以从头开始编写所有内容。THREE.ShaderMaterial

varying vec2 vUv;
void main(){
  vUv = uv; // <- magic! where does uv come from?
  vec4 worldPosition = modelMatrix * vec4( position, 1.); // <- more magic! where do modelMatrix and position come from?
  gl_Position = projectionMatrix * viewMatrix * worldPosition; // more!
}

在运行时，当三个名称空间被编译并包含在一个页面上时，这三个名称空间就有了THREE.ShaderChunk字典。这些是GLSL的各种命名片段，所有的材料都是从这些片段中构建出来的。

可以从这些片段的源文件中复制它们，并将它们粘贴到您自己的着色器文件或字符串中。

您可以使用字符串模板来编写它：

`${THREE.ShaderChunk.some_chunk}
 void main(){
 ...
 ${anotherChunk}
 gl_Position = ...
`

但是如果你想扩展内置的材质，有一个叫做onBeforeCompile的材质的(IMHO buggy and wonky：)功能。这样，您就可以将回调传递给任何内置材质，并在编译之前获取着色器对象。在这里，你可以注入你自己的glsl，交换出块或任何你能想到的对字符串做的事情。

为了使用它，你需要熟悉从https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk构建的着色器的结构。