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

Question

我一直在努力学习THREEJS着色器材料。到目前为止我了解了uniforms、vertexShader和fragmentShader在glsl和webgl的世界中如何在顶点和片段的投影和着色方面发挥作用。我一直在尝试找到一些很好的例子，其中使用 THREE.ShaderLib 扩展了 THREEJS 的 ShaderMaterial。

假设我想扩展一个标准的 Threejs 材质（THREE.ShaderLib['standard']）来写入 envmap 纹理，这可能吗？或者我是否绝对有必要从头开始编写所有内容？

Answer 1

着色器只是字符串，这取决于您如何使用它们以及如何获取它们。话虽如此，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。这样，您可以将回调传递给任何内置材质，并在编译之前获取着色器对象。在这里你可以注入你自己的 glsl、交换块或者任何你能想到对字符串做的事情。

为了使用这个，需要熟悉从以下位置构建的着色器的结构： https://github.com/mrdoob/ Three.js/tree/dev/src/renderers/shaders/ShaderChunk